Pete Freitag Pete Freitag

How To Make a Tag Cloud

Updated on November 16, 2023
By Pete Freitag

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:

tag cloud

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

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">
		<cfset class="smallTag">
	<a href="/tag/#tags.tag#" class="#class#">#tags.tag#</a>

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.

tags blog tagging folksonomy tag cloud cfml tips

How To Make a Tag Cloud was first published on June 24, 2005.

If you like reading about tags, blog, tagging, folksonomy, tag cloud, cfml, or tips then you might also like:

FuseGuard Web App Firewall for ColdFusion

The FuseGuard Web Application Firewall for ColdFusion & CFML is a high performance, customizable engine that blocks various attacks against your ColdFusion applications.

The weekly newsletter for the CFML Community