Programming

A Better Tag Cloud for Tumblr

    Rebecca "Ruji" Chapnik
    Share

    Tag clouds are a great way to help visitors explore different topics on your blog. However, while both WordPress and Blogger support tag clouds natively, Tumblr users have to jump through a few hoops to set up a tag cloud.

    The classic tag cloud solution for Tumblr is Heather Rivers’ Tumblr Tag Clouds, but this script has a drawback: The tag cloud is generated on the client-side using JavaScript each time someone visits your site, so the more posts you have, the longer it will take to load. I used to use Rivers’ script on my blog, but with several hundred posts under my belt, the tag cloud would take up to thirty seconds to appear.

    Developer Rubbing Alcoholic has solved this problem with a similarly named PHP app, Tumblr Tag Cloud. Unlike Rivers’ tag cloud, this one relies on server-side caching and will re-generate the cloud at set intervals rather than every time someone loads a page on your blog. This is terrific for Tumblr blogs with a lot of posts!

    Tumblr Tag Cloud is free software distributed under the MIT License. To use it, you need to host it on your own server. Although this makes the setup procedure a little more complex than using a script hosted on someone else’s server (a la Rivers’ script), it will ultimately pay off in speed because you aren’t relying on the same server that every other Tumblr blogger with a tag cloud is relying on.

    Requirements

    • A web hosting server
    • PHP 5
    • MySQL
    • A domain or subdomain to host the app on (this must be a true subdomain, not just a subdirectory of your main site)

    Installation

    First create a database and a database user on your server for the app to use. If your site uses cPanel, go to the “Databases” section and select “MySQL Databases.” This will bring you to the database management page, where you can create your database and add a user:

    figure1

    Once that’s done, grab the latest version of Tumblr Tag Cloud from GitHub:

    git clone https://github.com/rubbingalcoholic/tumblr_tag_cloud.git

    Note: If you don’t have Git on your system, you can download the ZIP archive from the GitHub page.

    You’ll now have a directory called tumblr_tag_cloud. Its contents look like this:

    figure 2

    We need to edit the configuration. Copy the file includes/local.default.php to includes/local.php, and open local.php in a text editor.

    figure 3

    The file is heavily commented, so it is easy to see what different sections are for. First enter the admin username and password that you want to use (this prevents random people from hosting their own tag clouds on your database):

    define('ADMIN_USERNAME', 'admin');
 
define('ADMIN_PASSWORD', 'p@ssw0rd');
 
Below that, put in your database information. Don't forget to include the prefixes. For example:
 
$config['db']['dsn'] = array(
 
'hostspec' => '127.0.0.1',
 
'port' => '3306',
 
'username' => 'rujic_cloud',
 
'password' => 'p@ssw0rd',
 
'database' => 'rujic_cloud',

    Now it’s time to upload the files to your server. All the files in the subdirectory webroot must go inside the public_html folder of your domain or subdomain. If your server uses a single public_html directory for all your subdomains, put these files directly into the appropriate subdomain’s main directory.

    Next, all other files and directories in tumblr_tag_cloud must go into the parent directory of the directory you placed the webroot files in.

    Creating the Tag Cloud

    If everything went well in the previous steps, you can access Tumblr Tag Cloud by visiting the domain or subdomain you installed it in.

    figure 4

    Log in with the admin credentials you set earlier in local.php. Assuming you configured your database information correctly, you should see this:

    figure 5

    Proceed to set up your database tables. You’ll then be prompted to add the blog for which you want to create the tag cloud (you can add more blogs later).

    figure 6

    After you add your blog to the database, you’ll see some configuration options. Play around with these as you please.

    figure 7

    This page will also give you the embed code for your tag cloud along with a preview. Note that the preview doesn’t take into account the CSS on your Tumblr blog, so the final product will probably look different.

    Putting Your Tag Cloud on Tumblr

    Log into your Tumblr blog and go to the settings page. In the “Theme” section, click “Customize”:

    figure 8

    This will take you to a preview of your blog along with a left sidebar for editing the theme. Click on “Edit HTML”:

    figure 9

    An HTML editor will open up in the sidebar. Paste the embed code where you want your tag cloud to display. This will vary according to the theme you’re using. I put mine in the right sidebar for The Minimal Theme:

    figure 10

    Save your changes and go to your blog. The tag cloud may take a few seconds to generate the first time, but after that it will be cached in the server’s memory.

    figure 11

    And that’s that! Do you use a tag cloud on your Tumblr blog? If not, do you want one? Let us know in the comments how this solution works out for you!