Better Living Through Technology: a blog dedicated to emerging
technology trends in hardware, software, webware, marketing and beyond
 
 
 



« Switching from Category Lists to Tag Clouds | Main | Forests 1, Newspapers 0 »

How to Make a Tag Cloud for Movable Type Blogs
Ed Kohler
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:

<!--  Start Tag Cloud  -->                                               
<div id="cloud">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>"
class="tag<$MTCategoryCount$>"><$MTCategoryLabel
lower_case="1"$></a> </MTCategories>
</div>
<!--  End Tag Cloud  -->   

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.







TrackBack

TrackBack URL for this entry:
http://technologyevangelist.com/cgi-bin/mt-tb.fcgi/133

Listed below are links to weblogs that reference How to Make a Tag Cloud for Movable Type Blogs:

» Item Category Cloud Navigation from Whitewater Mobile Journal
I just implemented a catagory tag cloud on this site as created by rdash as documented within his description called Building a Tag Cloud in Wordpress at the CodeProfessor journal and the cloud CSS as documented at the Technology Evangelist. Even thou... [Read More]

Comments

1. Posted by: Roald Marth on March 8, 2006 7:23 PM:

Happy Birthday Ed, I hope you enjoy yourself tonight, thanks for the great story before you went to your party!! Peace Out....Ro




2. Posted by: Frank Gruber on March 8, 2006 11:58 PM:

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 and happy birthday Ed!

Cheers,
Frank




3. Posted by: Ed Kohler on March 9, 2006 12:03 AM:

Thanks Frank. Be sure to let us know if you can get it working on TypePad.




4. Posted by: raj on March 15, 2006 10:08 PM:

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.)

cheers,
raj




5. Posted by: Ed Kohler on March 15, 2006 10:12 PM:

It looks like the CodeProfessor has figured out how to port this to WordPress. Very cool.




6. Posted by: Ed Kohler on March 15, 2006 10:28 PM:

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.




7. Posted by: Kingsley on April 5, 2006 6:14 PM:

It works on Typepad! Thanks!




8. Posted by: thomas on July 7, 2006 9:34 PM:

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.




9. Posted by: Ed Kohler on July 11, 2006 9:29 PM:

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




10. Posted by: Paul on July 18, 2006 2:39 AM:

Glad to read such a nice piece of information.




11. Posted by: Gianna on September 11, 2006 6:05 PM:

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?




12. Posted by: Ed Kohler on September 12, 2006 12:32 PM:

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.




13. Posted by: Alex on November 12, 2006 3:00 PM:

Thanks for this useful info, works good.




14. Posted by: Andrew J. Abogado on January 3, 2007 2:56 PM:

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




15. Posted by: marc on March 12, 2007 7:46 PM:

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




16. Posted by: FPics on March 22, 2007 5:17 PM:

I gave this a try... Just added colors.

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

A "coloring" example:

Tag cloud. Key words visualization.

Thanks!




17. Posted by: Carla on March 23, 2007 1:59 PM:

This tutorial worked great for me. Thank you for sharing it.




18. Posted by: Henning on May 10, 2007 7:29 AM:

This will create a category-cloud, not a tag-cloud.

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.




19. Posted by: vitol on October 17, 2007 4:49 AM:

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.




Post a comment

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.




Previous Entries:


Tag Cloud