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:

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.

Related Entries

56 people found this page useful, what do you think?

 Download FuseGuard WAF for ColdFusion


Trackback Address: 396/0DC2E1468A11C1CA211B6EB893BEA4E5


On 06/27/2005 at 11:54:50 AM EDT ForgetFoo wrote:
awesome post!

thanks alot for posting this, along with some code... much appreciated ;)


On 07/03/2005 at 1:16:34 AM EDT Francis Shanahan wrote:
I made this: "TagLines"

it's an auto-folksonomy tool built using the Term Extraction APIS. It combines Ajax with Folksonomies and Yahoo Web Services to allow you to search on RSS feeds, News, Movies, Images or just obtain the original story, all without a page-refresh.

Would love to get some feedback on it or suggestions for improvement. regards, -fs

On 07/05/2005 at 9:54:04 PM EDT Scott Burton wrote:
Coolness, now I will just need a mullet to match. I might even let my hair grow in the middle back into a "tail" like we used to in the 80's now that would be cool!!!!

I need to implement this on my site :) Minus the mullet!

On 07/06/2005 at 12:51:04 PM EDT Pete Freitag wrote:
Cool Site Scott, "Not Even in Beta", I like it!

On 07/06/2005 at 3:04:00 PM EDT Scot Burton wrote:
Hehe, I'm glad you like that. I figured I might as well jump on the whole "BETA" bandwagon.

Did you sign up? You should check it out, I have added some nice Ajax and Effects to some of the admin.

On 07/07/2005 at 1:34:01 PM EDT Michael Arrington wrote:
Great Post.

On 10/21/2005 at 1:39:22 PM EDT Jake - BlogFusion wrote:
Oh man! I wish I'd found this earlier... I'm working on the new version of BlogFusion (v5.0) and am building in tags.

I did the font sizing a bit differently, but it's the same basic premise.

The task I'm working on now, however is: How would one add the capability to display at least one tag for every letter of the alphabet?

Assume for a second that you have 5500 tags in your tag table. That's alot of tags to display - so what I would want to do is find enough tags to fill out a max of 100 tags, for instance, with at least one tag from each letter of the alphabet. (otherwise, you might have the first 100 tags be A-G, rather than A-Z...looks strange to users, and skips cool content in the H-Z range)

Anyway, tags are cool, and thanks for the ideas!!

On 12/04/2005 at 1:54:20 AM EST Travis Reeder wrote:
Muchos gracias!

I used your ideas here:

On 01/13/2006 at 6:18:28 AM EST Henry wrote:
Hi Pete. New year greetings. Nice work. Tagging will be used on the Do Me a Favor Buddy site soon too. I'll keep you posted:

On 03/07/2006 at 10:51:15 AM EST Ryan Guill wrote:
Awesome, once again, you are the man

On 03/21/2006 at 7:58:12 AM EST DENiAL wrote:
Awesome, I hope I can use this. I have an idea, and it involves tagclouds. :D

On 04/07/2006 at 1:03:11 PM EDT Ujwala wrote:

i loved the idea of having my own tag cloud. i tried eurekstr and zoomcloud but this seems like a better idea.

I tried cutting an pasting this in my template under the sidebar section and I get no results. I also tried adding <script> and </script> after now the #tag thingies disappear but there is no tag cloud.

I know that I doing something wrong. I hope it is simple and I hope you can help.

On 04/15/2006 at 5:07:03 PM EDT Tomasz Topa wrote:
Great post. The method presented here is very simple and very easy, which results in being extremely useful.


On 04/26/2006 at 10:14:54 AM EDT Richard Harlos wrote:
Hey! Thanks for this article!

I was just talking with a friend about how to create a tag cloud for my blog but I wasn't sure how to go about it.

Although I don't use ColdFusion, your article was (as you said!) easy enough to follow. I'm going to get to work on creating my own tag cloud today! (I use WordPress as my blogging engine so I guess I'll be writing my code in PHP as a plugin.

Thanks for this helpful article!

On 07/07/2006 at 11:30:45 PM EDT thomas wrote:
alright, no matter how far i search though google, i always end back up here, so would anyone be able to help me change this into php & mysql so i can use it on my small site. Thanks you in advance, and i'll be willing to do a web design or promote your site or what ever, just either post here or email me ar

On 07/17/2006 at 10:55:21 AM EDT Anders Dahnielson wrote:
Thomas: I've written a entry on how I implemented this for my WordPress blog (in PHP).

On 07/19/2006 at 9:52:07 AM EDT Chris Estes wrote:
I had no idea tag clouds were as cool and hip as mullets.

On 09/09/2006 at 2:00:36 PM EDT Jason Bartholme wrote:
Hi Pete, I used your script and have it running on my CF powered article directory.


On 09/29/2006 at 8:40:56 AM EDT HM2K wrote:
Could you provide details of your table structure so this method of implimentation can be used on other systems.

On 10/10/2006 at 10:45:22 AM EDT Mary wrote:
Hi all, I only started looking into tag clouds since yesterday and I have to say I am a bit confused. I am an excellent user on html and DreamWeaver but I have never touched Coldfusion. Does anyone now any other articles or tutorials that would help me understand more about tag clouds, where they are used and how!

Some of my questions:

Are they only or mainly used for blogs?

What kind of tags do I use to link the key words with the tag link generator (tag cloud links I supose).

Does the above script goes in the head or the body of the page.

As you can understand I am completely lost. Thank you all in advance

On 10/13/2006 at 4:48:47 AM EDT Richard wrote:
What's your database table like for that?

On 11/20/2006 at 10:47:15 AM EST Iscandar wrote:
Hey, love the idea, but also am having issues trying to figure out how the database table is set up. Any help?

On 12/09/2006 at 3:33:13 AM EST Druckerpatronen wrote:
great site with very good look and perfect information?is a very good site? like it

On 01/11/2007 at 11:47:28 AM EST Ed wrote:
Jeff, I just wanted to say thanks for this, you saved me loads of work and the cloud works beautifully. I adapted it to run with percentages rather than a straight COUNT. Anyway, it seemed only polite to say thank you :-)

On 01/11/2007 at 1:26:26 PM EST wan1980 wrote:
I do not sure how this tag cloud work What DB you connect it and what language is that??XML??

On 01/25/2007 at 1:10:36 PM EST Anil wrote:
Fantastic information. I could build a cloud in django using this.

On 02/26/2007 at 3:26:07 PM EST Anteuz wrote:
Very nice, simple yet effective. I translated it to Java 5 for usage in my website

On 03/12/2007 at 3:41:22 PM EDT Praveen Angyan wrote:
Thanks, I've created a design primer for developers who want to implement tagging in their applications and I've linked to your article for creating a Tag Clouds in Coldfusion.

On 03/22/2007 at 12:19:47 PM EDT FP Images wrote:
We made this tag cloud:

We have added a little bit "colors" to the final styling (selected a main color and blended it).

On 03/22/2007 at 7:48:48 PM EDT Mark King wrote:
I couldn't post HTML so go here to see my version of this (allows as many tag sizes as you like).

On 04/14/2007 at 5:52:41 AM EDT im ben wrote:
we made this tag cloud

On 04/25/2007 at 8:36:22 AM EDT Bill wrote:
Have this:n

On 04/29/2007 at 12:48:46 PM EDT Bob wrote:
Have this:n

On 05/31/2007 at 10:49:58 AM EDT exl wrote:
Or (if one still have the list of tags) one could use this script to generate a tag-cloud. It is described in german but you could translate it - or you read the sources.. ;-)

Many regards, exl

On 07/03/2007 at 10:55:03 AM EDT mike7 wrote:
I have bought the paid module. Works without problems. I recommend

On 08/16/2007 at 3:17:45 AM EDT Sally wrote:
I'm a Chinese girl, and Google guides me to your site.Thanks to your idea. It's very cool.

On 08/16/2007 at 3:18:17 AM EDT Sally wrote:
I'm a Chinese girl, and Google guides me to your site.Thanks to your idea. It's very cool.

On 09/14/2007 at 6:52:34 PM EDT Frosty Trees wrote:
I recommend It offers a very easy way to make a tag cloud and embed it in a blog or anywhere else.

On 10/18/2007 at 9:05:04 AM EDT Ankush wrote:
U r a genius.I was very new to this bt then after reading this,I am feeling very comfortable.

On 10/29/2007 at 1:22:22 PM EDT VIVi wrote:

Do you think that I can implement this tag clouds on my html website? or it's working only on php sites,

Thank you

On 11/01/2007 at 3:34:35 AM EDT euxx wrote:
I find that using log functions gives better results.

On 11/08/2007 at 7:21:49 PM EST Anonymous wrote:
lreeeeeeeeeeeeeeeeeeeeeeeeeehrgesg jkvfjkldjklbnklbklbvklbvckljjg ;htri;otomjytbypbnm6kgvfjklsrusypsdfmgnlnvcmavher to f artiapoce c8dfaepo eea ee v era ef t rtyovhvuia t auhrlhfvreuifypsa4ehpapepasuprfgljrsaghlrhjsgahlrjghrjkgerhgrjhjrehtu4yt8p4r458499344jr89eeeeeeeee gjksvhgrsghlp;svhgdn;ugjkjl;gjs

On 12/09/2007 at 11:24:26 PM EST Brad wrote:
If anybody's having trouble, just replace step 4 with something like this -- <cfloop query="tags"> <cfif tagCount EQ min> <cfset class="smallestTag"> <cfelseif tagCount EQ max> <cfset class="largestTag"> <cfelseif tagCount GT (min + (distribution*2))> <cfset class="largeTag"> <cfelseif tagCount GT (min + distribution)> <cfset class="mediumTag"> <cfelse> <cfset class="smallTag"> </cfif> <cfoutput>[wrapper]#tag#[/wrapper]</cfoutput> </cfloop>

With this mod, I had a working tag cloud in about 15 minutes. Thanks a lot!

On 12/28/2007 at 4:31:32 PM EST Pat wrote:
Here is a nice tag cloud script with mysql database, easy to configure : Enjoy.

On 01/25/2008 at 4:31:53 AM EST Alina wrote:
Great code! I used it on my essay about tag clouds. You can find it here:

On 07/02/2008 at 8:26:48 AM EDT Sallyanne - Web Designer wrote:
I think Tag Clouds can be a good way to get visuals (that arent really visuals!) into your site / blog without using a bog standard image. They can break up a page of text with something that looks creative.

However, Im sure there are advantages to having a keeping your neck warm!

On 07/11/2008 at 3:06:47 AM EDT james wrote:
interesting, but a few things.

1: as someone said elsewhere, all tutorials seems to assume you know how to populate your database, and

2: all the techniques i've seen assume one has a fresh site to which one can start adding tags for articles/pages with each added article/page from scratch.

But what can be done for sites which already have tens of thousands of pages of content in database and where it is impossible to add tags for each of these articles because it would take forever?

Secondly i dont understand how the tags sizes in your tag-cloud relate to anything at all (such as number of pages using the word)? because each tag simply links to one page, and I can't see any relationship between tag size and anything which loads when one clicks a tag (?)

Also this assumes one's site loads pages based on a single word at the end of the address-string, so how would one do this for sites where content page links require full link addresses rather than the tag-word itself?

Simply put, i couldnt find a single decent documented page on this subject for beginners anywhere on the www in 6 hours of searching, which is quite incredible given tag-cloud popularity. All articles assume the user knows a hell of a lot already. But this is a general shortcoming of most computer peoples' tutorials online - they are good at coding but hopeless at understanding the principals of teaching a subject. There is simply no real explanations at all given with this tutorial although i realise this may not have been made for beginners.

On 08/06/2008 at 2:35:59 PM EDT talapoku wrote:
In your opinion, what's the best movie ever created?

On 09/01/2008 at 5:20:03 AM EDT cristi wrote:
Hi , anyoane can put here the cod of the SQL database -table of this script tag cloud ? THX

On 10/09/2008 at 1:42:06 PM EDT digital52 wrote:
Very cool script, I was able to get it up and running almost immediately.

One question though, how do you recommend dealing with multiple tags for an entry? I initially set up a test DB Table that had a "tag" field with multiple tags separated by a comma, obviously this code wasn't able to break up the list into various keywords, and simply grouped them all into one big tag. Looking through it I don't really see how it could be modified to deal with a list.

Is having a separate tags table that is then linked back to the master record the answer? That seems like the only plausible way, as having only one tag per record seems very limiting.

On 01/01/2009 at 9:02:49 AM EST Don Q wrote:
Late in the game, but...

And, for those asking about the db table, it should look something like.. (Here's to hoping it lines up..)

+---------+-------------+ | Field | Type | +---------+-------------+ | id | numeric | | tag | varchar | +---------+-------------+

On 10/30/2009 at 9:10:15 PM EDT Arowolo wrote:

The today blog structure have more than one tag.

So your new blog table might look like this. "BlogId", "Title", "Description", "Content", "Date", "AuthorId" and "Tag"

You can try cold like 1. Pull all the Tags from the table, 2. Create a new query with "Tag" and "TagCount" and populate it with step 1. 3. You can know continue from step 1 of the this original post.

Looks like a loot of code, you might catch your result for better performance.

On 11/07/2009 at 3:05:10 AM EST sukumar wrote:
how can i create tag cloud in webpart could plz tell me step by step

On 11/16/2009 at 9:45:45 PM EST Joshua Ravinin wrote:
Great article, thanks for sharing your tag cloud technology. I have found a completely free (including commercial websites) tag cloud script written in PHP on I like it because it has a built-in text-to-tags parser and it filters out common words - if you inspect the code they provide you will see maybe a thousand common words. For fact, I have actually added more words to it. The styling options are pretty decent.

On 04/12/2010 at 6:58:52 PM EDT suffi wrote:
i just update some tag cloud for my site

On 05/02/2010 at 4:20:53 PM EDT TekNight wrote:
Here's a question for you: can you store more than one tag in the sql table for each picture? Or do you need separate columns (i.e. Tag1, tag2, tag3)?

On 05/11/2010 at 6:51:41 PM EDT choose golf clubs wrote:
I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

On 05/16/2010 at 5:31:04 PM EDT vemma wrote:
I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

On 05/17/2010 at 3:21:30 PM EDT seized cars wrote:
Great Post. I add this Blog to my bookmarks.

On 07/08/2010 at 2:19:07 PM EDT Flirting Tips For Girls wrote:
Man does not live by bread alone

On 07/30/2010 at 8:04:37 AM EDT tahitian noni juice wrote:
Great Post. I add this Blog to my bookmarks.

On 08/01/2010 at 9:51:14 AM EDT scuba diving wrote:
Awesome Blog. I add this Blog to my bookmarks.

On 08/02/2010 at 7:14:42 PM EDT mbt shoes wrote:
i am happy to find it thanks for sharing it here. Nice work.

On 08/03/2010 at 2:27:38 AM EDT mbt shoes wrote:
Good journey and experience!

On 08/04/2010 at 12:37:51 PM EDT free registry cleaner wrote:
Nice post...Thank you for sharing some good things!!

On 08/05/2010 at 3:01:00 PM EDT konta osobiste wrote:
Awesome Blog. I add this Post to my bookmarks.

On 08/25/2010 at 9:34:14 AM EDT kosmetyki wrote:
Very Interesting Post! Thank You For Thi Blog!

On 08/27/2010 at 11:03:45 AM EDT gry online wrote:
I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

On 08/29/2010 at 11:07:54 AM EDT tapety wrote:
Thank You For This Post, was added to my bookmarks.

On 08/29/2010 at 6:15:43 PM EDT home mortgage rate wrote:
Thanks very good for report, I follow your blog

On 08/29/2010 at 9:28:47 PM EDT sok noni wrote:
I just sent this post to a bunch of my friends as I agree with most of what you’re saying here and the way you’ve presented it is awesome.

On 08/30/2010 at 2:15:34 AM EDT noni wrote:
Very Interesting Blog! Thank You For Thi Information!

On 09/21/2010 at 5:38:41 AM EDT Cheapest mbt shoes wrote:
good quality with mbt shoes like

On 09/21/2010 at 5:39:39 AM EDT tory burch sale wrote:
top quality of tory burch shoes like this website

On 09/21/2010 at 5:41:18 AM EDT fake coach handbags wrote:
if U are interestring with good quality of handbags,clike this link

On 10/06/2010 at 10:36:50 AM EDT Tory Burch shoes wrote:
I like coming to your website for the blog post are all superb.Keep update and I will come here at any moment.

On 11/26/2010 at 11:29:50 PM EST infiseeoptith wrote:
This is my first blogg post I'm just testing my shiny new blogg

On 11/27/2010 at 10:50:58 AM EST best registry cleaner wrote:
wow.. i'm very

enjoy reading your post. great.

On 11/29/2010 at 9:42:55 AM EST tory burch wrote:
Well, you mention here things that really made me think.

On 12/02/2010 at 8:22:17 AM EST wrt2surabhi wrote:

I want to add a tag cloud to my website but i don't know if it can be added to a simple HTML website..? Also, i am not a technical person... could just do very small things in HTML. so would this code work for me as well or is there a better option for me.

Many thanks in advance for your response.

On 12/04/2010 at 3:57:11 PM EST Genwayday wrote:
Good point, though sometimes it's hard to arrive to definite conclusions

On 12/07/2010 at 8:52:45 PM EST Jamie Iomo wrote:
how are you?

Awesome post, just want to say thanks for the share

On 12/14/2010 at 12:02:07 PM EST tory burch wrote:
Keep working ,great job!

On 12/15/2010 at 9:37:31 AM EST tory burch wrote:
Keep working ,great job!

On 12/19/2010 at 4:56:23 AM EST viki wrote:
where should i place the generated Tags in my site and where is better place to put the tag clouds

On 12/21/2010 at 6:05:29 AM EST tory burch shoes sale wrote:
In searching for sites related to web hosting and specifically comparison hosting linux plan web, your site came up.

On 12/22/2010 at 6:52:54 AM EST tory burch shoes sale wrote:
I wish getting over a broken heart can be so easy as following a few steps.. but its not…

On 12/23/2010 at 1:17:19 PM EST tory burch shoes sale wrote:
Keep focusing on your blog. I love how we can all express our feelings. This is an extremely nice blog here

On 12/29/2010 at 5:47:06 AM EST forex wrote:
Someone suggest me how to create tag clouds in social bookmarking sties

Thanks in advance

On 12/31/2010 at 3:37:11 AM EST tory burch wrote:
There is obviously a lot to know about this. I think you made some good points in Features also.

On 01/06/2011 at 12:35:59 PM EST tory burch shoes sale wrote:
Keep focusing on your blog. I love how we can all express our feelings. This is an extremely nice blog here

On 01/20/2011 at 1:45:30 PM EST tory burch sale wrote:
I don’t usually reply to posts but I will in this case.

On 04/15/2011 at 8:15:05 AM EDT Swertfu wrote:
msoo owyxh http:/ mphfxd f bq l aww

On 04/23/2011 at 6:24:09 AM EDT tory burch shoes wrote:
Professionable blog, go on!

On 04/23/2011 at 7:10:39 AM EDT tory burch shoes sale wrote:
The article is usefully ,excellent!

On 04/24/2011 at 5:06:43 AM EDT tory burch shoes sale wrote:
Hey very nice blog!!

On 05/28/2011 at 1:46:54 PM EDT Ben Jones - Data Centre Design wrote:
Great post. The ColdFusion Tag Cloud method presented here is very simple, which results in being extremely useful. Used here

On 06/08/2011 at 6:06:11 AM EDT Estate Agents Redditch wrote:
So thats what a tag cloud is, thanks!

On 06/23/2011 at 1:56:04 PM EDT Priest wrote:
Can I clone your article to my blog? Thank you…

On 06/23/2011 at 2:19:37 PM EDT Pete Freitag wrote:
@Priest No you may not clone my article. Why not just link to it from your blog?

On 08/26/2011 at 8:56:05 PM EDT tryecrot wrote:
Yes there should realize the opportunity to RSS commentary, quite simply, CMS is another on the blog.

On 01/09/2012 at 7:22:15 AM EST Rob wrote:
It's to complicated for me but I found an interesting tag cloud here

On 08/03/2014 at 1:10:30 PM EDT Johnb868 wrote:
Keep working ,impressive job! ebfaeccafcbe

Post a Comment


Spell Checker by Foundeo

Recent Entries


did you hack my cf?