Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing With Code: How to Create a Tag Cloud

Last updated Oct 17, 2003.

By Kris Hadlock

In this column, I follow up Robert Hoekman’s Designing the Obvious Clinic on the new beta version of SlideShare. In his column, Robert measures the application against a few of the principles that are covered in his latest book, Designing the Obvious: A Common Sense Approach to Web Application Design. I pick up where Robert left off and explain how to create a tag cloud like the one on the SlideShare homepage using PHP for displaying and MySQL for storing tags.

Tag Cloud

Popularized by sites such as Flickr and Del.icio.us, tag clouds are a visual way to depict data used on a web site. Each item on a web site, such as an image, article, and so on can include one to multiple tags and they are often shared amongst items. A tag cloud visually displays a group of tags, depicting the ones that are used more often as larger hyperlinks and the ones used less often as smaller hyperlinks. They are very useful for search engines and serve as a visual way to display popular data on a web site.

The sample for this column can be viewed here and the source code can be downloaded here. The sample requires PHP 5 and MySQL. If you only have PHP 4, the code can easily be modified to work by removing the private and public visibility keywords from the class.

Tag Storage

To start, we’ll create a database table that will store all of the tags for the sample. The table will have a unique id, a name, and a count. The unique id will be the primary key, the name will be the actual tag name, such as "ajax" or "xml," and the count will be the number of times that it is used in the site. In this example, we’ll simply look at how to create the tag cloud, not how to use the database for incrementing the count, but that part can easily be added for use in any web application.

Creating the Database Table (informit_tags.sql)

CREATE TABLE ´informit_tags´ (
 ´id´ int(11) NOT NULL auto_increment,
 ´name´ varchar(50) NOT NULL default ’’,
 ´count´ int(11) NOT NULL default ’0’,
 PRIMARY KEY (´id´)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

Once the table is created, we’ll insert some tags. The sample tags in this case are all related to programming, but they can be anything.

Inserting Tags in the Database Table (tags.sql)

INSERT INTO ´informit_tags´ (´id´, ´name´, ´count´) VALUES (1, ’ajax’, 20),
(2, ’php’, 25),
(3, ’mysql’, 5),
(4, ’javascript’, 10),
(5, ’coldfusion’, 25),
(6, ’java’, 2),
(7, ’html’, 50),
(8, ’css’, 30),
(9, ’actionscript’, 20),
(10, ’c#’, 40),
(11, ’dhtml’, 10),
(12, ’xml’, 15),
(13, ’xhtml’, 30),
(14, ’visual basic’, 1),
(15, ’cfml’, 20),
(16, ’asp’, 30);

Retrieving the Tags

To begin retrieving tags, we’ll create a class called TagManager. The TagManager establishes connections to the database and retrieves tags that are stored in the tag table. The class contains five private properties; $connection, $h for host, $u for username, $p for password, and $db for the database name. Each of the properties is set in the constructor function to the values that represent your database. For the sample to work, you must change these values to correspond with your database.

The next two methods are called connect and complete, the connect method establishes a connection to the database and selects it. Both of these methods are private, so they can only be called from within the TagManager class. When the connect method is called, the $connection property is set to current connection, while the complete method is used to close the current connection. Both of these methods are used in the last and most important GetTagCloud method. This method is public and can be called from any other class or file that includes the TagManager. When we call GetTagCloud, a number of things occur:

We establish a connection to the database.

We select the name and count from the informit_tags table.

We create an array of tag objects from the results.

We close the connection.

We return the array of tag objects to the caller.

The TagManager Class (TagManager.class.php)

<?

class TagManager
{
  private $connection;
  private $h;
  private $u;
  private $p;
  private $db;
  
  public function TagManager()
  {
    $this->h = "your_host";
    $this->u = "your_username";
    $this->p = "your_password";
    $this->db = "your_database_name";
  }
  
  private function connect()
  {
    $this->connection = @mysql_connect($this->h, $this->u, $this->p) OR die(’Could not connect to MySQL: ’ . mysql_error());
    @mysql_select_db($this->db, $this->connection) OR die(’Could not select the database: ’ . mysql_error());
  }
  
  private function complete()
  {
    @mysql_close($this->connection);
  }
  
  public function GetTagCloud()
  {
    $this->connect();
    $query = "SELECT name, count FROM informit_tags";
    $result = mysql_query($query) or die(mysql_error());
    $tags = array();
    while($row = mysql_fetch_object($result))
    {
      array_push($tags, $row);
    }
    $this->complete();
    return $tags;
  }
  
}

?>

Let's see how to include this class in our site and call the GetTagCloud method to create our finished product.

Rendering the Tag Cloud

Following Robert's advice, you'll notice that I’ve added instructions that explain the significance of the tag cloud. As he stated, "something like, "Bigger = more popular | Smaller = less popular" should be sufficient." Personally, I think that it works just fine.

To render the tag cloud, we need to start by including the TagManager class and instantiating the object. With our object instance, we simply call the GetTagCloud method and set it to a local variable named $tags. Next, we decipher which tag has the highest and which has the lowest number of occurrences in order to determine how to render the popular versus the less popular tags. Once we have the $maxCount and $minCount, we iterate the tags once more to write them to the page.

While we write each tag, we determine which CSS class should be appended to it by checking the tag count against the $maxCount, a third of the $maxCount and the $minCount. If the current tag’s count is equal to the $maxCount, then it should be the largest tag; if it’s greater or equal to a third of the $maxCount, then it should be a medium tag size, otherwise it should be small. Once this determination has been made, we need to write the tag with the chosen CSS class name and wrap it in a hyperlink and a span. The hyperlinks in a tag cloud are used to link to a page with all of the items from the site that share that tag. The span is used to force the tag to wrap within the containing div that we have set to a 400px width.

Rendering the Tags (index.php)

<div class="instructions"><b>Bigger</b> = more popular   |   <b>Smaller</b> = less popular</div> 

<div style="width: 400px;">
  <?php
  
    include("classes/TagManager.class.php");
    $tManager = new TagManager();
    $tags = $tManager->GetTagCloud();
    
    $maxCount = NULL;
    $minCount = NULL;
    foreach($tags as $tag)
    {
      $maxCount = ($tag->count > $maxCount) ? $tag->count : $maxCount;
      $minCount = ($tag->count < $minCount || $minCount == NULL) ? $tag->count: $minCount;
    }
    
    foreach($tags as $tag)
    {
      if($tag->count == $maxCount) $class = ’largeTag’;
      else if($tag->count >= ($maxCount/3)) $class = ’mediumTag’;
      else $class = ’smallTag’;
      echo ’<span class="’. $class .’">

          <a href="#">’. $tag->name .’</a>
        </span>’;
    }
  ?>
</div>

The tags are now rendering in the page, but the text size is all the same. This is because we still need to add the CSS classes. The CSS classes are simple, as they set the font size according to the popularity.

Setting the Styles (index.php)

<style type="text/css">
  span { padding: 2px; }
  .smallTag { font-size: 11px; }
  .mediumTag { font-size: 16px; }
  .largeTag { font-size: 24px; }
  a:link, a:visited { color: #0000CC; }
  a:hover { color: #999; }
  .instructions { font-size: 11px; color: #999; }
</style>

Moving Forward

The significance of a tag cloud relies on how you use it and how you explain its significance to users. If you haven't done so already, I highly recommend reading Robert’s column about SlideShare’s use of tag clouds and the site overall.