How to Make a Tag Cloud for Movable Type Blogs

I've received a few inquiries into how I created the tag cloud for this site, and figure it would be easiest to explain how it's done here. This site is powered by Movable Type so the instructions are specific to this platform. However, they could likely be ported to other blogging platforms that use categories or tags without too much trouble.

The beauty of this solution is it doesn't involve any true programming. Personally, I have an easier time adding 2+2+2 than 2x3, so I take the easy route whenever possible. Or, I'm just lazy. This solution is based on a more elegant solution using PHP found here. If you're not familiar with PHP, or can't run PHP on your server, this is the way to go. I use CSS to do with RichardZ does with PHP.

Creating a tag cloud instructions:

1. Create a new page for your site for the tag cloud. Click here for instructions on how to do this. I called our tag cloud page tagcloud.html but it doesn't matter what it's called (and doesn't have to have a .php extension).

2. Clear the body of the new page.

3. Paste the following code into the body of your tag cloud page (where you'd like the tag cloud to appear:

<div id="cloud">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>"
class="tag<$MTCategoryCount$>"><$MTCategoryLabel
lower_case="1"$></a> </MTCategories>
</div>

This publishes your site's categories in a row that wraps whenever it reaches the end of the line. Each category is hyperlinked to the appropriate archive page.

The div id="cloud" tag allows you to format the tag cloud using CSS.

class="tag<$MTCategoryCount$> adds a CSS class to each tag that's unique to the number of posts in each category. When published, this converts to class="tag4" for a category with four posts.

Okay, that covers the work on the page. Now for a few additions to your site's style sheet. If you save and republish the page, it should build your tag cloud with no formatting.

4. Go to Templates and open styles-site.css.

5. Add the following code to the bottom of the style sheet:

/* Start Tag Cloud CSS */

#cloud {padding:1px; line-height:30px;text-align:center;}
#cloud a {text-decoration:none;padding:0px;}

a.tag1{
font-size:12px;
}
a.tag2, a.tag3 {
font-size:13px;
font-weight:200;
}

a.tag4 ,a.tag5, a.tag6 {
font-size:16px;
font-weight:300;
}

a.tag7, .tag8, a.tag9 {
font-size:20px;
font-weight:300;
}

a.tag10, a.tag11, a.tag12 {
font-size:24px;
font-weight:300;
}

a.tag13, a.tag14, a.tag15 {
font-size:28px;
font-weight:400;
}

a.tag16, a.tag17, a.tag18 {
font-size:30px;
font-weight:400;
}

a.tag19, a.tag20, a.tag21 {
font-size:32px;
font-weight:500;
}

a.tag22, a.tag23, a.tag24 {
font-size:34px;
font-weight:500;
}

a.tag25, a.tag26, a.tag27 {
font-size:36px;
font-weight:900;
}

a.tag28, a.tag29, a.tag30 {
font-size:38px;
font-weight:900;
}
/* End Tag Cloud CSS */

6. Save and rebuild your style sheet.

7. Refresh your tag cloud. It should now be formatted.

The CSS tags listed above gradually increase the font site, (and some include an increase in font weight as well) as the number associated with posts in a category increases. The font sizes and post numbers associated with different sizes can be adjusted here, changing the look of your tag cloud. It may take some experimentation to find a format that is suitable for the number of categories used in your site, and your post volumes to various categories.

8. Link to your tag cloud from your site's templates.

9. Remove the categories section from you site's templates.

10. Done.

Find this useful? If you implement this on your site, consider adding a link to TechnologyEvangelist.com.

Questions? Add them to the comments below.

Did you port this to other blogging platforms? Let us know in the comments.

Great post! I am going to have to give this a try. It is my assumption that is will work for Typepad blogs too since it sits on the Moveable Type platform. I'll let you know.

Thanks for the article, Ed. I've ported your example to WordPress. I must warn people though, that for my WordPress theme, I was unable to not have each category on its own line. I'll work on fixing that. And at some point in the near future, I'll set up my code as a plugin.

I've redirected visitors back to your page to use your CSS. If I put together a WP plugin, do I have your permission to use your CSS? (I'll give you credit and a link.)

Raj, it looks like I was checking out your site while you were posting here. Feel free to grab the CSS code to use as you wish. Thanks for the attribution. We appreciate the link and porting of our work.

i'm really interested in this, if any one knows of one that works with php and mysql would you please email me at thrasher.basher@gmail.com thank you so much.

Thomas, there is a link to a PHP version of this in the 2nd paragraph of the post.

This code appears to pull some tags automatically and not just those of the Categories I manually create. Is there a way to change this so that only the categories I create show up?

Gianna, the code pulls ALL of the categories your blog uses, so if you have categories you're not actually using, just delete them using the categories interface in your admin area.

If you want to selectively show categories, you'll probably have to use the PHP version linked to above to create an appropriate categories query.

Thank you very much for the simple yet usefull css "tag cloud" of yours. Got to put it on a dynamic page. Thanks again.

Thanks. that script is really usefull. i'll do some testing in my sites, and again, great job.

I selected the main color (#778888), assigned it to the biggest font, and "blended" this color for the smaller fonts.

Categories and tags are not the same. Categories are classifications based on a language pattern, part of an IA concept. Tags are keywords created by users based on their free association with a topic.

One of the main characteristics of tags is the dynamic handling of words. A category "fruit" could contain bananas, apples and oranges. Those are sub categories of the topic fruit. However, with tags you can add keywords that do not fit in the category scheme, such as "fruit salad", "banana split" or "apple pie". The principle behind those tags is to create an association that is related to a topic and may involve a category, but it does not replace it.

So this is tag cloud for categories and not for MTTags. It is strange, but I cannot find any solution to display not all, but most used, tags in sidebar.

Required fields marked with: *
Name*:

Email Address*:

URL:
Remember personal info?

Comments*:

HTML Tags you can use in your posts:
<b>Bold</b> = Bold
<i>Italicized</i> = Italicized
<a href="http://www.othersite.com">Link to Other Site</a> = Link to Other Site

Please keep comments on-topic. Contact authors or other commenters
directly for off-topic conversations.

Notify me of future comments via e-mail

Technology Evangelist Digest - Free Newsletter

Sign up for the free Technology Evangelist Digest to receive daily updates, editorials, and practical advice on emerging technology trends in hardware, software, webware, marketing and beyond.

Technology Evangelist Digest will keep you up to date on the technology trends that will help make you more productive and efficient both in business and your personal life.

Let's face it: If you made it to this line, you must have found something valuable on this page, right? Think about how cool it would be to have something free and interesting to read every day from Technology Evangelist by signing up today.

1. Fill in your email below,
2. Then click on the confirmation email you receive.
3. That's it. Your first Technology Evangelist Digest will arrive within 24 hours.