Looking for a tag cloud for your site?

January 9, 2010

I’ve built tag clouds so many times recently I’ve been getting bored with it. The concept is simple. You have items that are tagged and you calculate the tag popularity based on a weighed average of the tag to items, then you apply a style based on score. The more one tag exists on what ever items you have (pictures, blog entries, etc), the heaver its weighted average will be and its style may pop-out more."

I’ve built tag clouds so many times recently I’ve been getting bored with it. The concept is simple. You have items that are tagged and you calculate the tag popularity based on a weighed average of the tag to items, then you apply a style based on score. The more one tag exists on what ever items you have (pictures, blog entries, etc), the heaver its weighted average will be and its style may pop-out more.

Here is a tag cloud proc in SQL:

Here is a tag cloud proc in LINQ:

You can iterate the result set and assign a style based on the weight:

.tc1 {font-size:8pt; color:#8B8B8B; text-decoration:none;}

.tc2 {font-size:10pt; color:#8B8B8B; text-decoration:none;}

.tc3 {font-size:12pt; color:#5C5858; text-decoration:none;}

.tc4 {font-size:14pt; color:#000000; text-decoration:none;}

.tc5 {font-size:16pt; color:#2554C7; text-decoration:none;}

.tc6 {font-size:16pt; color:#2554C7; text-decoration:none; font-weight:bold;}

This is cool visually but its been done a million times. When writing my new blog engine I was looking for something a little more fresh. I saw on Twitter the stack-exchange site of the day called “moms4mom”. I checked it out and saw a cool rotating tag cloud and was curious how they did it.

I was going to ask the question on the stack exchange meta site but someone beat me to it. It’s a flash movie and its called “Cumulus” and was built as a plugin for WordPress. It’s now open source and I found a blog post by the author Roy Tanck, that talks about using the tag cloud in others projects.

Here’s a brief summary of how I implemented it in my ASP.NET MVC blog engine:

1) Go to the WP-Cumulus download page and pull the latest version down. I’m on version 1.23.

2) I stuck the swfobject.js and tagcloud.swf files in my site/content folder:

3)I create a CSS Class helper that would return one of two classes based on an even or odd tag id (yes, I’m ditching the weighted average):

4) Created a partial view that iterates though my tags and calls the GetTagClass helper to set its style:

5) Added the Javascript Below the div “recent-tag”:

6) Created a method to retrieve the tags from the repository and load it into viewdata:

7) Run it and enjoy.