Tag Cloud in PHP

code :-


// connect to database at some point

// In the SQL below, change these three things:
// thing is the column name that you are making a tag cloud for
// id is the primary key
// my_table is the name of the database table

$query = "SELECT thing AS tag, COUNT(id) AS quantity
FROM my_table
GROUP BY thing
ORDER BY thing ASC";

$result = mysql_query($query);

// here we loop through the results and put them into a simple array:
// $tag['thing1'] = 12;
// $tag['thing2'] = 25;
// etc. so we can use all the nifty array functions
// to calculate the font-size of each tag
while ($row = mysql_fetch_array($result)) {
    $tags[$row['tag']] = $row['quantity'];

// change these font sizes if you will
$max_size = 250; // max font size in %
$min_size = 100; // min font size in %

// get the largest and smallest array values
$max_qty = max(array_values($tags));
$min_qty = min(array_values($tags));

// find the range of values
$spread = $max_qty - $min_qty;
if (0 == $spread) { // we don't want to divide by zero
    $spread = 1;

// determine the font-size increment
// this is the increase per tag quantity (times used)
$step = ($max_size - $min_size)/($spread);

// loop through our tag array
foreach ($tags as $key => $value) {

    // calculate CSS font-size
    // find the $value in excess of $min_qty
    // multiply by the font-size increment ($size)
    // and add the $min_size set above
    $size = $min_size + (($value - $min_qty) * $step);
    // uncomment if you want sizes in whole %:
    // $size = ceil($size);

    // you'll need to put the link destination in place of the #
    // (assuming your tag links to some sort of details page)
    echo ''.$key.' ';
    // notice the space at the end of the link


Should give you something that looks like this (but as links if you so choose):

Thing 1 Thing 2 Thing 3 Thing 4 Thing 5 Thing 6 Thing 7 Thing 8

Hope someone finds this useful—I think it’s a really good way to visualize the popularity of any sort of categories: blog post tags, membership per country, songs per artist in your favorite playlist, etc.

Edit 2006-10-07:

After a few of the questions I’ve received, here’s a bit of an expansion on this technique. (A few others are answered in the comments, so be sure to read those, too!)

If you need more parameters than just the tag name to build your links, you can add anything else you need to an auxiliary array with the same index (e.g., the tag name. You could also use the primary key for your tag/category if your database is structured that way. The important thing is to have all the related data using the same index—you’re basically building a relational database in your array(s).)

while ($row = mysql_fetch_array($result)) {
    $tags[$row['tag']] = $row['quantity'];
    // same index as tags array
    $category_id[$row['tag']] = $row['category_id'];

Then, when you’re actually building the tag link within the for loop, you can access your other data with $key as the array index:

foreach ($tags as $key => $value) {

    $size = $min_size + (($value - $min_qty) * $step);

    echo ''
      .$key.' ';

Edit 2008-08-04:

Here’s how I style my tag cloud:
tag cloud

echo '
    ‘; foreach ($uses as $key => $value) { $size = $min_size + (($value – $min_qty) * $step_size); echo ‘

  • ‘.$key.’‘; echo ‘ (‘.$value.)
  • ‘; } echo ‘

‘; ul.tagcloud { list-style-type: none; padding: 0; line-height: 2em; } ul.tagcloud li { display: inline; line-height: 3em; white-space: nowrap; } ul.tagcloud li:after { content: “,”; } ul.tagcloud li:last-child:after { content: “”; } ul.tagcloud .count { font-size: 0.875em; line-height: 1.714em; color: #888; }

links:- http://prism-perfect.net/archive/php-tag-cloud-tutorial/ http://www.stevenyork.com/tutorial/creating_accessible_tag_cloud_in_php_css_mysql



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: