Creating a Tag Cloud with a database

November 17th, 2007

Today we will be making a tag cloud, these have been very popular lately in the whole Web 2.0 scene. An example of what we are going to make can be found by visiting any one of numerous sites out today. A tag cloud is broken down into 2 parts, the tags and the cloud. The tags are keywords given to certain elements of a site, usually a news item, article or tutorial. A cloud then grabs all the tags and sorts them; during this sorting any tag that is found or used multiple times will have a bigger font size to stand out against the ones that are not used alot. The bigger the font size, the more this tag is used widely.

So lets start off by assuming you have a table within the database and that each row will have a "tags" column. For my database I set the tags column as "varchar (100)" and each tag is seperated by a comma with no space (tag,tag,two words). By removing any white space between tags and commas, it removes the error of margin and also allows tags to be multiple words (we replace the space with a - for urls). So lets start off by creating the function and passing it 2 arguments: $minFont would be the smallest font size you would see, and $maxFont would be the largest font size within the tag cloud. We place 2 arrays within the function that will be used later on.

// Create the tag function
function getTags($minFont = 10, $maxFont = 35) {
	$tags  = array();
	$cloud = array();
}

Next we will create a MySQL query that grabs all tags from the database and returns them. First off it selects the "tag" column from your "table" that you specified (You can use or not use RAND()). It then puts the tags within an array; we need it within in an array to sort through the tags at a later time. Secondly, the while loop then sorts all the tags into its own unique array. By doing this it creates an array with incremental values. Each tag has a value of 1, and each additional tag with the same tag name, increases the value by 1. Which means, each tag that is used more often then others will have a higher number returned, and will then generate a bigger font size.

Note: Within the explode function below, it seperates tags by "," (A comma). If you insert your tags into the database differently, then you will have to change that value in the explode(), or create a different work around to grab your tags correctly.

	// Grab the tags from the database
	$query = mysql_query("SELECT tags FROM news ORDER BY RAND()"); 
 
	while ($t = mysql_fetch_array($query)) {
		$db = explode(",", $t[0]); 
 
		while (list($key, $value) = each($db)){
			$tags[$value] += 1;
		}
	}

Now lets move on to the variables part of the function. We create the minimum and maximum font sizes according to the returned tags. This adds the maximum value of the highest number tag, and the minimum value (Usually 1) to the showTags function. We create a fix to even out the count at a later time. Now we open up the for loop which will go through each tag in the array, create a font size, add it to a new array, and then we implode them to together. After we join the arrays, we then return the array to be used by the script.

// Create the tag function
function getTags($minFont = 10, $maxFont = 35) {
	$tags  = array();
	$cloud = array(); 
 
	// Grab the tags from the database
	$query = mysql_query("SELECT tags FROM news ORDER BY RAND()"); 
 
	while ($t = mysql_fetch_array($query)) {
		$db = explode(",", $t[0]); 
 
		while (list($key, $value) = each($db)){
			$tags[$value] += 1;
		}
	} 
 
	// Get totals to use for font size
	$min = min(array_values($tags));
	$max = max(array_values($tags));
	$fix = ($max - $min == 0) ? 1 : $max - $min; 
 
	// Display the tags
	foreach ($tags as $tag => $count) {
		$size = $minFont + ($count - $min) * ($maxFont - $minFont) / $fix;
		$tagWord = strtolower(str_replace(" ", "-", $tag));
		$cloud[] = '<a href="tags/'. $tagWord .'/" class="cloud" title="Tag: '. ucfirst($tag) .' was used '. $count .' times!" style="font-size: '. floor($size) .'px">'. ucwords($tag) .'</a>';
	} 
 
	$shown = implode("\n", $cloud) . "\n";
	return $shown;
}

To call the script, all you would do is echo the function onto the page where you want the tag cloud to be. Make sure you call the font sizes within the function, or the default will be set. Now for the part of the code that styles it accordingly, the CSS. This will make the tags look like an actual tag, I have provided the following CSS For your use. I hope this function has been helpful to you, enjoy!

<style type="text/css"> 
#cloud { padding: 0px 15px; } 
.cloud { padding: 3px; text-decoration: none; line-height: 60%; } 
.cloud:link { color: #94B3C5; } 
.cloud:active { color: #94B3C5; } 
.cloud:visited { color: #B5B4A0; } 
.cloud:hover { color: #ffffff; background: #091a1a; } 
.cloud:focus { color: #ffffff; background: #93C644; } 
</style>
<div id="cloud">< ?php echo getTags(10, 30); ?></div>

You can leave a comment, or trackback from your own site.

4 Comments

  1. 1

    e-lias December 3rd, 2007 12:04 am

    This is what i’ve searching for. Thank you!

  2. 2

    JuanmaMP December 7th, 2007 1:22 pm

    Hello,
    I am trying to do an editions cloud action patch for revisions in an usemod wiki.
    That implies to use something inspired in your post like this:
    print $q->a({-href => “$ScriptName?” . $page,-style => ‘font-size:’ . ( 10 + ($count - $min) * (75 - 10) / (($max - 1 == 0) ? 1 : $max - 1)) . “px”}, $page), (’ … ‘);
    Can I reuse with atrribution but with GNU General Public License?
    Thanks for advance.

  3. 3

    H.L. Johnson, Sr December 8th, 2007 9:49 pm

    Important words like “separate” need to be spelled correctly.

    If you like the contracted form of “Let us”, you must use an apostrophe(Let’s do it!)

    Interesting that this impressive(to me) presentation begins with a run-on problem and ends with one.

  4. 4

    eZakto February 24th, 2008 3:30 pm

    I hate tag clouds :P
    Nice blog.
    Regards.

Leave a Reply

Comment