This is a tutorial that will give you an idea of how to create a Tag Cloud and implemented it the pages of your website.

Let’s start creating the necessary files:

config.php

The $factor variable is used in the mathematical operation which calculates the importance of a tag (index.php, line 81). It calculates the average text size of the tags. Increasing this value will make the text size to increase as well. Decreasing will do reverse.

In $starting_font_size we set the minimal font size that a tag can have. This variable is also used to calculate the importance of the tag.

We need a separator that will be placed between the tags. In $tag_separator its value must be set.

Do you wish to show the tags in random order? Set $random_order to TRUE (if yes) or FALSE (if not).

<?php
// Incresing this number will make the words bigger;
// Decreasing will do reverse

$factor = 0.5;

// Smallest font size possible

$starting_font_size = 12;

// Tag Separator

$tag_separator = '&nbsp; &nbsp; &nbsp;';

// Display items in random order?

$random_order = true;
?>

functions.php

This function is used to randomly reorder the elements of an array.

<?php
function randomize_array($array)
{
$rand_items = array_rand($array, count($array));

$new_array = array();

foreach($rand_items as $value)
	{
	$new_array[$value] = $array[$value];
	}

	return $new_array;
}
?>

Let’s add some style to our tag cloud!

style.css

HTML, BODY
{
padding: 0;
border: 0px none;
font-family: Verdana;
font-weight: none;
}

.tags_div
{
padding: 3px;
border: 1px solid #A8A8C3;
background-color: white;
width: 500px;
-moz-border-radius: 5px;
}

H1
{
font-size: 16px;
font-weight: none;
}

A:link
{
color: #676F9D;
text-decoration: none;
}

A:hover
{
text-decoration: none;
background-color: #4F5AA1;
color: white;
}

index.php

For our tag cloud sample I’ve used a list of top programming languages from TIOBE Software.

The list is stored in an array ($languages) that contains the names of the programming languages (the keys of the array) and their ratings (the values of the array). The second array, $languages_wiki is used to set links for our tags (the addresses are from Wikipedia having information about the programming languages from the list).

As you can see the total sum of the values is calculated (in our case it’s 94.732). This is used in the mathematical operation that will calculate the importance of a tag. It’s obvious that JAVA (20.715), compared to Delphi (3.130), is a more important tag representing 22% from the total sum of the ratings, while Delphi only 3%.

<?php
include_once 'config.php';
include_once 'functions.php';

$languages = array('PHP'            => '9.243',
                   'Python'         => '5.012',
                   'ActionScript'   => '0.472',
                   'Lisp/Scheme'    => '0.419',
                   'Lua'            => '0.415',
                   'Pascal'         => '0.400',
                   'Java'           => '20.715',
                   'PowerShell'     => '0.384',
                   'COBOL'          => '0.360',
                   'SAS'            => '0.640',
                   'JavaScript'     => '3.130',
                   'PL/SQL'         => '0.700',
                   '(Visual) Basic' => '10.490',
                   'D'              => '1.265',
                   'Ruby'           => '2.762',
                   'Delphi'         => '3.055',
                   'C#'             => '4.334',
                   'Perl'           => '4.841',
                   'C++'            => '10.716',
                   'C'              => '15.379');

$languages_wiki = array('PHP'       => 'PHP',
                   'Python'         => 'Python_(programming_language)',
                   'ActionScript'   => 'ActionScript',
                   'Lisp/Scheme'    => 'Lisp_(programming_language)',
                   'Lua'            => 'Lua_(programming_language)',
                   'Pascal'         => 'Pascal_Programming_Language',
                   'Java'           => 'Java',
                   'PowerShell'     => 'PowerShell',
                   'COBOL'          => 'COBOL',
                   'SAS'            => 'SAS_programming_language',
                   'JavaScript'     => 'JavaScript',
                   'PL/SQL'         => 'PL/SQL',
                   '(Visual) Basic' => 'Visual_Basic',
                   'D'              => 'D_programming_language',
                   'Ruby'           => 'Ruby',
                   'Delphi'         => 'Delphi',
                   'C#'             => 'C_Sharp_(programming_language)',
                   'Perl'           => 'Perl',
                   'C++'            => 'C%2B%2B',
                   'C'              => 'C_programming');

$max_count = array_sum($languages);

if($random_order)
{
$languages = randomize_array($languages);
}
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Tag Cloud Generator </TITLE>

  <META NAME="Author" CONTENT="Bit Repository">

  <META NAME="Keywords" CONTENT="tag, cloud">
  <META NAME="Description" CONTENT="A Tag Cloud Example">

<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

 </HEAD>

 <BODY>

 </BODY>
</HTML>

<!-- Add some style to the DIV -->

<center><h1>Tag Cloud Example</h1><div align='center' class='tags_div'>

<?php
foreach($languages as $language => $rating)
{
$x = round(($rating * 100) / $max_count) * $factor;

$font_size = $starting_font_size + $x.'px';

echo "<span style='font-size: ".$font_size."; color: #676F9D;'>
<a href='http://en.wikipedia.org/wiki/".$languages_wiki[$language]."'>".$language."</a></span>".$tag_separator;
}
?>

</div></center>

Example #1 (with factor equal with 0.5)

Example #2 (with factor equal with 1 and mouse cursor over ‘Ruby’)

You can use this model to create tag clouds from arrays that are created from MySQL Selects or from Flat Files Databases.

Stay updated by subscribing to our weekly newsletter! It's free!

Name:

Email:

We respect your email privacy

What do I get as a subscriber?

• Latest posts delivered to your inbox
• Ways to make money online
• News regarding web development in general

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!