pf » How To Make a Tag Cloud

<cfquery datasource="#dsn#" name="tags">
	SELECT COUNT(tag) AS tagCount, tag
	FROM tblblogtags
	GROUP BY tag
</cfquery>

<cfset tagValueArray = ListToArray(ValueList(tags.tagCount))>
<cfset max = ArrayMax(tagValueArray)>
<cfset min = ArrayMin(tagValueArray)>

<cfset diff = max - min>
<cfset distribution = diff / 3>

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

.smallestTag { font-size: xx-small; }
.smallTag { font-size: small; }
.mediumTag { font-size: medium; }
.largeTag { font-size: large; }
.largestTag { font-size: xx-large; } 

awesome post!

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

/foO

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

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!

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.

Great Post.

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

Muchos gracias!

I used your ideas here: http://www.rel8r.com/tags/

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

Awesome, once again, you are the man

Awesome, I hope I can use this. I have an idea, and it involves tagclouds. :D

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.

Great post. The method presented here is very simple and very easy, which results in being extremely useful.

Thanks!

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!

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

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

I had no idea tag clouds were as cool and hip as mullets.

Hi Pete, I used your script and have it running on my CF powered article directory.

http://www.ArticleOnRamp.com/Tag-Cloud.cfm

Thanks!

Could you provide details of your table structure so this method of implimentation can be used on other systems.

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

What's your database table like for that?

Hey, love the idea, but also am having issues trying to figure out how the database table is set up. Any help?

great site with very good look and perfect information?is a very good site? like it

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 :-)

I do not sure how this tag cloud work What DB you connect it and what language is that??XML??

http://www.8coupons.com

Fantastic information. I could build a cloud in django using this.

Very nice, simple yet effective. I translated it to Java 5 for usage in my website http://unitedcxp.org/BulletBlog

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

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

I couldn't post HTML so go here to see my version of this (allows as many tag sizes as you like).

http://mgk1969.wordpress.com/2007/03/23/making-a-tag-cloud-in-coldfusion/

we made this tag cloud http://www.gencler.info

Have this:n

Have this:n

Or (if one still have the list of tags) one could use this http://jsbuzzwords.axelschneider.info/ script to generate a tag-cloud. It is described in german but you could translate it - or you read the sources.. ;-)

Many regards, exl

I have bought the paid module. Works without problems. I recommend http://www.magneticone.com/store/CRE.Loaded.Modules/Tag.Cloud.CRE.Loaded.Module

I'm a Chinese girl, and Google guides me to your site.Thanks to your idea. It's very cool.

I'm a Chinese girl, and Google guides me to your site.Thanks to your idea. It's very cool.

I recommend MakeCloud.com It offers a very easy way to make a tag cloud and embed it in a blog or anywhere else.

U r a genius.I was very new to this bt then after reading this,I am feeling very comfortable.

Hi,

Do you think that I can implement this tag clouds on my html website? http://www.jocuri.pe-net.info or it's working only on php sites,

Thank you

I find that using log functions gives better results.

http://blogs.dekoh.com/dev/2007/10/29/choosing-a-good-font-size-variation-algorithm-for-your-tag-cloud/

lreeeeeeeeeeeeeeeeeeeeeeeeeehrgesg jkvfjkldjklbnklbklbvklbvckljjg ;htri;otomjytbypbnm6kgvfjklsrusypsdfmgnlnvcmavher to f artiapoce c8dfaepo eea ee v era ef t rtyovhvuia t auhrlhfvreuifypsa4ehpapepasuprfgljrsaghlrhjsgahlrjghrjkgerhgrjhjrehtu4yt8p4r458499344jr89eeeeeeeee gjksvhgrsghlp;svhgdn;ugjkjl;gjs

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!

Here is a nice tag cloud script with mysql database, easy to configure : http://www.ilikeyoutube.com/cloud/ Enjoy.

Great code! I used it on my essay about tag clouds. You can find it here: http://webhomework.wordpress.com