How To Make a Tag Cloud

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.