Using Tags and Tag Clouds in Movable Type 3.3
I've been making a few updates to Code Scene, one of which is the addition of tags to each post. Tags are a quick and easy way to allow your visitors to find related blog posts. At the bottom of this post, for example, you'll see that it's been tagged as 'Movable Type'. Click that link and you'll be presented with a list of all other blog posts I've written about Movable Type.
Tags are a relatively new concept in Movable Type, available in version 3.3 and higher. If your hosting company hasn't upgraded yet (I'm looking at you Yahoo!) then you're out of luck until they do.
Tagging a post is simple. All you need to do is add a comma-delimited list into the "Tags" field when creating your entry.
Displaying them on the post page is as simple as:
<h4>Tags:</h4>
<p><MTEntryTags glue=" // ">
<a href="<$MTTagSearchLink$>"><$MTTagName></a>
</MTEntryTags></p>
The "glue" parameter simply denotes what character(s) will be used to separate the tags.
Now that we've seen how easy it is to add tags, what about tag clouds? Tag clouds provide a quick and easy navigation mechanism for your users to see (and jump to) the different types of posts within your blog. It's kind of like categories, but better. I like to think of categories as top-level sections where posts can live, whereas tags act more like descriptors of what the post is about. I've added a tag cloud to the top-right column of Code Scene where the calendar used to be. Let's face it, I don't update often enough to need a calendar.
So now that you know what a tag cloud looks like, how do you create one? Easy, just use the built in Movable Type codes and add some styles to them.
<div id="tagCloud">
<h3>Tag Cloud</h3>
<p><MTTags glue=" ">
<a href="<$MTTagSearchLink$>" class="cloud<$MTTagRank max="10"$>"><$MTTagName$></a>
</MTTags></p>
</div>
The MTTags element gets all the blog's tags separated by the "glue" parameter. MTTagName and MTTagSearchLink give you the name of the tag and the link to the search page which will show all articles with that tag. MTTagRank gives each individual tag a ranking based on how many times it's been used compared to other tags. I've set the "max" parameter to 10 and embedded it inside of a class="cloud" tag so that each link will adopt a class based on it's rank. class1 for the most used tags all the way to class10 for the least.
Next, just set some CSS rules for these classes to differentiate them. I've set mine so that they get bigger and brighter the higher the tag is ranked, like so:
#tagCloud a.cloud10 { font-size: 1.2em; color: #68a9cc; }
#tagCloud a.cloud9 { font-size: 1.3em; color: #5ea5cc; }
...
#tagCloud a.cloud2 { font-size: 2.0em; color: #168ccc; }
#tagCloud a.cloud1 { font-size: 2.1em; color: #0d8acc; }
One last thing to point out is that this method will return ALL the tags in your blog. Sometimes, like my sidebar promo, you only want the top tags. Movable Type Enterprise has this functionality built in but it doesn't appear to have made it into the regular versions yet. However, we can achieve the same effect by using the Compare Plugin. This plugin allows us to easily compare values when building our Movable Type pages.
<MTTags glue=" ">
<MTIfLessOrEqual a="[MTTagRank max='10']" b="4" numeric="1">
<a href="<$MTTagSearchLink$>" class="cloud<$MTTagRank max="10"$>"><$MTTagName$></a>
</MTIfLessOrEqual>
</MTTags>
The above code compares the MTTagRank value to a static value of 4. So if a tag is ranked less than or equal to 4 it gets displayed. That gives me the top tags in my blog and I just add a link to view all the rest.
That's all there is to it. It's actually pretty easy to do and is a great way to boost the usability of your blog by helping users find related content.
Additional Resources:
Tag Reference from the Movable Type Manual
Everybody loves tags from the Movable Type blog
Compare plugin for Movable Type
