» Birthday Bundle - Over $400 worth of Envato files for just $20

PHP: How to create a Tag Cloud

Posted on October 3, 2008, Filled under PHP,  Bookmark it

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.

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

Get our RSS Feed!

Related Posts

10 Replies to "PHP: How to create a Tag Cloud"

  1. [...] – Creating a Tag Cloud saved by fergal2008-10-13 – How do I concatentate two arrays? saved by nmrmusic2008-10-08 – [...]

  2. thanks dude.

    great tutorial…

  3. Thank you very much for this …

  4. good work man….

  5. Hi,

    I do see the tag cloud, but the random order does not seem to work. Any clue what’s going wrong?

    see http://www.mkb-backup.co.nl for the testsite.

  6. Do you have the code you would use to generate this from a mysql database?

    1. No, I do not have such a code. However, I can modify the script to integrate it with a database. If you want to hire me for this job, let me know by sending me a mail to support { @ } bitrepository [ dot ] com.

  7. This is the most comprehensive tag cloud tutorial in google^^

Leave a Reply


* = required fields

  (will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: If you want to post CODE Snippets, please make them postable first!
(e.g. <br /> should be converted to &lt;br /&gt;)