Jeffery Zeldman proclaims that tag clouds are the new mullets. However, as I'm sure you're aware some people just can't resist the mullet.
I actually find my tag cloud quite handy because it lists all my tags on one page, and I can see what topics I post about most frequently quite easily. I also use it as a way to see which tags I have already used, so I can be consistent when tagging posts.
Anyways a lot of folks would like to know just how you can get one of these mullets, er tag clouds. I have shown how I do it below using CFML. If you don't use ColdFusion you should still be able to follow along.
At this point you may be wondering what's a tag cloud? If so consult the picture below:
Ok, now let the mullets reign...
Step 1 - Get a list tags, and their frequency
<cfquery datasource="#dsn#" name="tags"> SELECT COUNT(tag) AS tagCount, tag FROM tblblogtags GROUP BY tag </cfquery>
In my tag cloud I list all my tags, but if you have a lot of tags you may want to limit the min number of occurrences using a HAVING statement. For example HAVING tagCount > 5
Step 2 - Find the Max and Min frequency
<cfset tagValueArray = ListToArray(ValueList(tags.tagCount))> <cfset max = ArrayMax(tagValueArray)> <cfset min = ArrayMin(tagValueArray)>
Step 3 - Find the difference between max and min, and the distribution
<cfset diff = max - min> <cfset distribution = diff / 3>
You can define the distribution to be more granular if you like by dividing by a larger number, and using more font sizes below. You will probably need to play with this to get your tag cloud to look good.
Step 4 - Loop over the tags, and output with size
<cfoutput query="tags"> <cfif tags.tagCount EQ min> <cfset class="smallestTag"> <cfelseif tags.tagCount EQ max> <cfset class="largestTag"> <cfelseif tags.tagCount GT (min + (distribution*2))> <cfset class="largeTag"> <cfelseif tags.tagCount GT (min + distribution)> <cfset class="mediumTag"> <cfelse> <cfset class="smallTag"> </cfif> <a href="/tag/#tags.tag#" class="#class#">#tags.tag#</a> </cfoutput>
Step 5 - add css classes to your stylesheet
.smallestTag { font-size: xx-small; }
.smallTag { font-size: small; }
.mediumTag { font-size: medium; }
.largeTag { font-size: large; }
.largestTag { font-size: xx-large; }
There are probably lots of different ways to build a tag cloud, but this is the first method that came to mind.