Tag Cloud

Tag Cloud

Build one of those popular tag clouds as found on sites such as: "Flickr", "del.icio.us" and others.

View an Example of this article before you get started.

A tag cloud is a list of tags that are sized based on keyword count. For this example we will be using a static array of tags, but this can easily be extended to a database application.

We will start off with the CSS which will provide the visual element to this tutorial.

<style type="text/css">
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link  { color: #81d601; }
.tag_cloud:visited { color: #019c05; }
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }
</style>

Next up, a function that will return an Array we will be using. As you will see it is a simple Multi-dimensional Array that stores the tag/count pairs.

function get_tag_data() {
    $arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43, 
	'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42, 
	'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30, 
	'Extract' => 28, 'Filters' => 42, 'Flash' => 32, 'Functions' => 19, 
	'Gaussian Blur' => 44, 'Grafix' => 49, 'Graphics' => 35, 'Hue' => 47, 'Illustrator' => 8, 
	'Image Ready' => 12, 'Javascript' => 47, 'Jpeg' => 15, 	'Keyboard' => 18, 'Level' => 28, 
	'Liquify' => 30, 'Listener' => 10, 'Logo' => 12, 'Loops' => 22, 'Macromedia' => 26, 
	'Method' => 28, 'MySQL' => 18, 'Obfuscation' => 13, 'Object' => 39, 'Optimize' => 25, 
	'PDF' => 37, 'PHP' => 44, 'PSD' => 17, 'Photography' => 28, 'Photoshop' => 46, 
	'Revert' => 50, 'Saturation' => 35, 'Save as' => 28, 'Scope' => 11, 'Scripting' => 9, 
	'Security' => 41, 'Sharpen' => 49, 'Switch' => 41, 'Templates' => 11, 'Texture' => 22, 
	'Tool Palette' => 30, 'Variables' => 50);
    return $arr;
}

Now that we have the array function all setup, we move on to the function that will return our cloud tag HTML

function get_tag_cloud() { ... }

Lets run through this big function and explain what is going on. First off we define the min and max font sizes.

// Default font sizes
$min_font_size = 12;
$max_font_size = 30;

Call our "get_tag_data" function to retrive an array of tags.

// Pull in tag data
$tags = get_tag_data();

We pull out the minimum and maximum count from our tags. Creating a spread to be used in our font size calculations. Check to see if we have a good spread, if not, set one.

$minimum_count = min(array_values($tags));
$maximum_count = max(array_values($tags));
$spread = $maximum_count - $minimum_count;

if($spread == 0) {
    $spread = 1;
}

Finally we start the HTML building process to display our tags. For this demo the tag simply searches Google using the provided tag. We then return the HTML code.

$cloud_html = '';
$cloud_tags = array(); // create an array to hold tag code
foreach ($tags as $tag => $count) {
	$size = $min_font_size + ($count - $minimum_count) 
		* ($max_font_size - $min_font_size) / $spread;
	$cloud_tags[] = '<a style="font-size: '. floor($size) . 'px' 
		. '" class="tag_cloud" href="http://www.google.com/search?q=' . $tag 
		. '" title="\'' . $tag  . '\' returned a count of ' . $count . '">' 
		. htmlspecialchars(stripslashes($tag)) . '</a>';
}
$cloud_html = join("\n", $cloud_tags) . "\n";
return $cloud_html;

Here is some example HTML to call this tag builder.

<h3>Sample Tag Cloud results</h3>
<div id="wrapper"
<!-- BEGIN Tag Cloud -->
<?php print get_tag_cloud(); ?>
<!-- END Tag Cloud -->
</div>

There you have it a step by step guide on how to write your very own Tag Cloud... until next time... Happy Coding.

Print It

Comments: Tag Cloud

thomas Fri Jul 7, 2006 3:39 pm

okay, well, i really like this and you did a great job. but i want to make it work with my database. so i've added a column to my "pages" table and i now have a feild to input the tags 4 that page when u make it, but how do i get the number of occurances to average out from the database. i'm a little confused. actually, do u think u can quickly add how to use it with a database. thanks in advance.

thomas Fri Jul 7, 2006 11:35 pm

please somebody help. If you do i can probably promote your site or do a custom web deign or smoething for you, please, i just really want to do this. thank you......

Matthew Keefe Sat Jul 8, 2006 2:01 am

Hey Thomas,

Thanks, that is a great idea.

I added a new tutorial extending this one to use a MySQL database instead of the static array.

<a href="http://www.scriptplayground.com/tutorials/php/Tag-Cloud-with-Database/">Tag Cloud with Database</a>

Matt

thomas Sat Jul 8, 2006 2:58 am

well, i actually wrote it my self based on a bunch of other tutorials and then put them all together, but i really appreciate you writing the new one jsut for me, thank you so much. you can email me at thrasher.basher@gmail.com if you'd like to talk about advertising or whatever. and i'm on aim at iplayguitar214 if u ever just want to chat. Thank you so much matt. Ur a lifesaver.
And i don't think your comment capacha uses random strings because it's been the same everytime.

Matthew Keefe Sat Jul 8, 2006 8:19 am

Glad to hear you got it worked out and thanks again for the idea. That is how this site works, the reader suggests it and we write it.

In regards to the anti-spam measures, I am aware of that and also know the cause but am going to let it stay until the new site is launched. Thanks for the heads up though.

Matt

cem Thu Nov 23, 2006 10:59 am

Does this skript count the klicks on the tags and changes them in the database? Please help me...

Matthew Thu Nov 23, 2006 1:35 pm

No, it is used to display the popularity of a tag. However if you wanted to use it to track a tag then you would set up a function to increment (update) the database entry whenever it is clicked.

Bill Mon Dec 11, 2006 3:50 pm

Newbie here so please excuse me... is there an example PHP file of this code to view so that I can see it "constructed" correctly?

Matthew Mon Dec 11, 2006 4:27 pm

Not a problem, here is the example PHP file. <a href="http://www.scriptplayground.com/article_files/Tag-Cloud/TagCloud-source.phps">TagCloud-source</a>

Bill Thu Dec 14, 2006 5:48 am

Cheers, Thanks very much Matthew ;)

Akash Takyar Tue Feb 20, 2007 4:28 pm

Thats a perfect job. Thank you Matthew.

mkeefe Sun Feb 25, 2007 12:19 am

Not a problem, this has been a popular one.

FP Images Thu Mar 22, 2007 1:42 pm

You can employ more than one color with discretion.
One way to use colors in your cloud tag:
- select a main color, assign it to the biggest font;
- "blend" this color for smaller fonts.
A "coloring" example at
<a href="http://www.featurepics.com/editorial/tag-cloud.aspx">Tag cloud. Key words visualization</a>

anita Sat Apr 14, 2007 12:22 pm

can anyone please help me.. how to make this work...i mean i have to paste all code in html files or have to make sepreate css, js php n html file

please help me out
Thanks

mkeefe Sat Apr 14, 2007 2:11 pm

I am on the road at the moment so putting an extended usage together would take some time, however I have posted 1 file that has everything you need to recreate the static array version (seen on this page).

http://www.scriptplayground.com/article_files/Tag-Cloud/TagCloud-source.phps

Hope this helps.

anita Sat Apr 14, 2007 7:22 pm

Thanks alot now i m tryiing to make it database version .. lets see if i can paste if correctly..
will need again help if anything goes wrong..

Gerald Fri Apr 27, 2007 10:29 am

Hi,

Forgive my apparent retardation but I get an error in line 8 when I copy and paste the original.

It's the

function get_tag_data() {

line

mkeefe Fri Apr 27, 2007 10:55 am

What error do you get?

Gerald Fri Apr 27, 2007 10:56 am

Parse error: syntax error, unexpected T_STRING in blah/blah/blah/test/index.php on line 8

mkeefe Fri Apr 27, 2007 12:49 pm

Hmm, make sure you have an opening and closing <strong>'</strong> on all of your tag words. Also make sure you have a closing <strong>]</strong> at the end of the array.

Hope that helps and fixes it.

Let me know

Gerald Fri Apr 27, 2007 1:56 pm

Hi,

Actually, it's really copied and pasted correctly. No ] anywhere around array section, though.

It seems to work for others - so no worries. I'll check it out when there's more time. Thanks.

Do not know if this is possible but could you php a tutorial for a script that would search a webpage for the category name or a css tag and then produce the cloud from that?

Thanks,

Gerald

Main | Tutorials | Articles

Name:
Website: