Pete Freitag Pete Freitag

How To Make a Tag Cloud

coldfusionweb

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
	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.


Like this? Follow me ↯

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.

Comments

awesome post! thanks alot for posting this, along with some code... much appreciated ;) /foO
by ForgetFoo on 06/27/2005 at 9:54:50 AM UTC
I made this: "TagLines" http://www.francisshanahan.com/taglines/default.aspx?cat=All 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
by Francis Shanahan on 07/02/2005 at 11:16:34 PM UTC
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 www.similarthings.com :) Minus the mullet!
by Scott Burton on 07/05/2005 at 7:54:04 PM UTC
Cool Site Scott, "Not Even in Beta", I like it!
by Pete Freitag on 07/06/2005 at 10:51:04 AM UTC
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.
by Scot Burton on 07/06/2005 at 1:04:00 PM UTC
Great Post.
by Michael Arrington on 07/07/2005 at 11:34:01 AM UTC
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!!
by Jake - BlogFusion on 10/21/2005 at 11:39:22 AM UTC
Muchos gracias! I used your ideas here: http://www.rel8r.com/tags/
by Travis Reeder on 12/03/2005 at 11:54:20 PM UTC
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: www.domeafavorbuddy.com
by Henry on 01/13/2006 at 4:18:28 AM UTC
Awesome, once again, you are the man
by Ryan Guill on 03/07/2006 at 8:51:15 AM UTC
Awesome, I hope I can use this. I have an idea, and it involves tagclouds. :D
by DENiAL on 03/21/2006 at 5:58:12 AM UTC
Hi! 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.
by Ujwala on 04/07/2006 at 11:03:11 AM UTC
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!
by Richard Harlos on 04/26/2006 at 8:14:54 AM UTC
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 thrasher.basher@gmail.com
by thomas on 07/07/2006 at 9:30:45 PM UTC
Thomas: I've written a entry on how I implemented this for my WordPress blog (in PHP). http://en.dahnielson.com/2006/07/blog-overcast-tagclouds.html
by Anders Dahnielson on 07/17/2006 at 8:55:21 AM UTC
I had no idea tag clouds were as cool and hip as mullets.
by Chris Estes on 07/19/2006 at 7:52:07 AM UTC
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
by Mary on 10/10/2006 at 8:45:22 AM UTC
What's your database table like for that?
by Richard on 10/13/2006 at 2:48:47 AM UTC
Hey, love the idea, but also am having issues trying to figure out how the database table is set up. Any help?
by Iscandar on 11/20/2006 at 8:47:15 AM UTC
great site with very good look and perfect information?is a very good site? like it
by Druckerpatronen on 12/09/2006 at 1:33:13 AM UTC
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 :-)
by Ed on 01/11/2007 at 9:47:28 AM UTC
Very nice, simple yet effective. I translated it to Java 5 for usage in my website http://unitedcxp.org/BulletBlog
by Anteuz on 02/26/2007 at 1:26:07 PM UTC
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. http://www.taskfly.com/blog/?p=6
by Praveen Angyan on 03/12/2007 at 1:41:22 PM UTC
We made this tag cloud: http://www.featurepics.com/editorial/tag-cloud.aspx We have added a little bit "colors" to the final styling (selected a main color and blended it).
by FP Images on 03/22/2007 at 10:19:47 AM UTC
we made this tag cloud http://www.gencler.info
by im ben on 04/14/2007 at 3:52:41 AM UTC
Have this:n
by Bill on 04/25/2007 at 6:36:22 AM UTC
Have this:n
by Bob on 04/29/2007 at 10:48:46 AM UTC
I'm a Chinese girl, and Google guides me to your site.Thanks to your idea. It's very cool.
by Sally on 08/16/2007 at 1:17:45 AM UTC
I'm a Chinese girl, and Google guides me to your site.Thanks to your idea. It's very cool.
by Sally on 08/16/2007 at 1:18:17 AM UTC
Hi , anyoane can put here the cod of the SQL database -table of this script tag cloud ? THX
by cristi on 09/01/2008 at 3:20:03 AM UTC
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.
by digital52 on 10/09/2008 at 11:42:06 AM UTC
Late in the game, but... http://pastebin.com/f1d04c178 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 | +---------+-------------+
by Don Q on 01/01/2009 at 7:02:49 AM UTC
@digital52

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.
by Arowolo on 10/30/2009 at 7:10:15 PM UTC
how can i create tag cloud in webpart could plz tell me step by step
by sukumar on 11/07/2009 at 1:05:10 AM UTC
i just update some tag cloud for my site
http://www.irtouring.com/default.aspx?id=28#tagcloud
by suffi on 04/12/2010 at 4:58:52 PM UTC
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)?
by TekNight on 05/02/2010 at 2:20:53 PM UTC
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.
by choose golf clubs on 05/11/2010 at 4:51:41 PM UTC
Awesome Blog. I add this Post to my bookmarks.
by konta osobiste on 08/05/2010 at 1:01:00 PM UTC
Very Interesting Post! Thank You For Thi Blog!
by kosmetyki on 08/25/2010 at 7:34:14 AM UTC
Thank You For This Post, was added to my bookmarks.
by tapety on 08/29/2010 at 9:07:54 AM UTC
Thanks very good for report, I follow your blog
by home mortgage rate on 08/29/2010 at 4:15:43 PM UTC
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.
by sok noni on 08/29/2010 at 7:28:47 PM UTC
Very Interesting Blog! Thank You For Thi Information!
by noni on 08/30/2010 at 12:15:34 AM UTC
Well, you mention here things that really made me think.
by tory burch on 11/29/2010 at 7:42:55 AM UTC
Hi,

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.
by wrt2surabhi on 12/02/2010 at 6:22:17 AM UTC
Good point, though sometimes it's hard to arrive to definite conclusions
by Genwayday on 12/04/2010 at 1:57:11 PM UTC
how are you?

Awesome post, just want to say thanks for the share
by Jamie Iomo on 12/07/2010 at 6:52:45 PM UTC
Keep working ,great job!
by tory burch on 12/15/2010 at 7:37:31 AM UTC
There is obviously a lot to know about this. I think you made some good points in Features also.
by tory burch on 12/31/2010 at 1:37:11 AM UTC
Can I clone your article to my blog? Thank you…
by Priest on 06/23/2011 at 11:56:04 AM UTC
@Priest No you may not clone my article. Why not just link to it from your blog?
by Pete Freitag on 06/23/2011 at 12:19:37 PM UTC