A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are. Another great thing about tag-clouds is that they can be used to describe the frequency of anything; you can link to articles, blog posts, images, video, or anything else that you have in abundance on your site.
Tag-clouds are easy to do badly; whether from a design perspective or from a code perspective. Thanks to jQuery, it’s also easy to do well. We’ll be using the hot new 1.3 version of jQuery for this example and will be working with PHP and MySql to provide a JSON feed of our tags. Getting the tags into a database in the first place is beyond the scope of this tutorial, but it’s a simple enough matter to retrieve and pass them to a waiting page via AJAX.
Getting Started
Let’s make a start on the page that the tag-cloud will be shown on; in a new file in your text editor create the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="tagcloud.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Tag Cloud</title>
</head>
<body>
<div id="tagCloud">
<h2>Tag Cloud</h2>
</div>
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript">
$(function() {
//get tag feed
$.getJSON("http://localhost/jquery/tagcloud.php?callback=?", function(data) {
//process JSON object
});
});
</script>
</body>
</html>
Save this as tagcloud.html. At this stage we have almost nothing on the page, just a simple container for the tag-cloud and a 2nd-level heading within the container. Any other elements we need can be created as and when they’re required. We link to a stylesheet in the head for some styling which we’ll add later on, and at the end of the body we link to jQuery. We make the request for the JSON response in a custom script block after the reference to jQuery.
getJSON
We use the $ alias to call the getJSON jQuery method, which is a higher-level abstraction of the ajax method; normally jQuery methods are called on objects that are references to elements, but because we’re not referencing any elements yet we can use the jQuery alias instead. This also means that the jQuery object will not be returned by the method. Instead the xmlHTTPRequest is passed back. The getJSON method accepts two arguments in this example (although more can be used if necessary); the first is the URL to which we are making the request. As we’ll be receiving a JSON object, it makes sense to use getJSON. We could use the ajax method, but would then need to configure more properties of the request (such as the dataType), so using this saves us a bit of time and coding. At the end of the URL we specify a JSONP callback - ?callback=? - which will enable the browser to directly manipulate the JSON object, even if it comes from another domain, without any additional server-side processing.
The Callback Function
The second argument is the callback function that we want to execute once the object is returned to the page. We haven’t put any code in this function yet, because we don't have the JSON object to work with. We can come back to this page in a little while once we’ve written the PHP. I said a moment ago that no server-side processing is needed when working with JSONP callbacks, and yet we’re now going to go off and write some PHP. This is only because no one is providing the data we want So we have to create it ourselves. If someone were providing a JSON feed of popular tags, we could still use the same jQuery code to request and process it.
Some PHP
You’ll need to have access to a web server in order to run the file that we’re about to create, but this could be your own local web server that you use for development, or it could be the server your site or blog is hosted on. In a new page in your text editor add the following code:
<?php
//connection information
$host = "localhost";
$user = "root";
$password = "your_password_here";
$database = "tagcloud";
//make connection
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);
//query the database
$query = mysql_query("SELECT * FROM tags");
//start json object
$json = "({ tags:[";
//loop through and return results
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$row = mysql_fetch_assoc($query);
//continue json object
$json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";
//add comma if not last row, closing brackets if is
if ($x < mysql_num_rows($query) -1)
$json .= ",";
else
$json .= "]})";
}
//return JSON with GET for JSONP callback
$response = $_GET["callback"] . $json;
echo $response;
//close connection
mysql_close($server);
?>
Save this as tagcloud.php. For this example, I’m assuming you have MySql installed and configured, and have setup a database called tagcloud. Within this database I’m also assuming there is a table called tags. This table will have rows of the tags and the frequency of the occurrences of these tags. I want to stress that this isn’t production-level code because security has not been a factor in its design; we need somewhere to get our AJAX response from in this example and this code will give us that somewhere.
Let’s briefly look at what we've done.
//connection information $host = "localhost"; $user = "root"; $password = "your_password_here"; $database = "tagcloud";
First we setup the connection information that we’ll need in order to connect to the database. Make sure you replace your_password_here with the actual password you set to access MySql. We then connect to the database and set the query that we’ll use to access the data from the tags table.
//start json object
$json = "({ tags:[";
//loop through and return results
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$row = mysql_fetch_assoc($query);
//continue json object
$json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";
Next we create the string that will start the JSON object, before looping through each row in the table and performing the query. We continue to build the JSON string within the for loop, adding the data from both fields of the current row as properties and values.
//add comma if not last row, closing brackets if is
if ($x < mysql_num_rows($query) -1)
$json .= ",";
else
$json .= "]})";
}
We perform a simple check on each iteration of the loop using the for conditional to see whether we’re reading the last row in the table; if we aren’t we use a comma to separate each object, if we are we close the object. The format of the JSON object will be individual record objects within a single container array, within an outer object.
//return JSON with GET for JSONP callback $response = $_GET["callback"] . $json; echo $response; //close connection mysql_close($server);
We then echo the response back to the client using a GET request; this is needed in order to make use of the jsonp callback in our main page. We need to specify the name of the URL parameter that follows the URL of the in the JavaScript, which in this example is simply callback. We can’t tell it the name of the function that we want to pass it to however, because the function is anonymous. jQuery will handle this for us and ensure the data is passed to the correct function.
Once we’re done, we close the connection. At this stage, we still can’t see anything on the page, but if you run the run from a content-serving directory of your web-server and use the NET tab of Firebug, you can see that data that is being returned to the page:
Processing the json
Now that we have some JSON to work with, let’s go back to the HTML page and do something with it. Our fist task is to process it to extract the data; in tagcloud.html, remove the comment we left within the callback and add the following code:
//create list for tag links
$("<ul>").attr("id", "tagList").appendTo("#tagCloud");
//create tags
$.each(data.tags, function(i, val) {
//create item
var li = $("<li>");
//create link
$("<a>").text(val.tag).attr({title:"See all pages tagged with " + val.tag, href:"http://localhost/tags/" + val.tag + ".html"}).appendTo(li);
//add to list
li.appendTo("#tagList");
});
First we create a new list element, set its id attribute, and append it to our container on the page. As the data in the JSON object isn’t in any particular order, an unordered list meets our requirements. Then we use the each() jQuery method to iterate over all of the items in the array nested within our JSON object. For each iteration, we create a new list item and a new link.
We set the text of each link to the value of the tag property of the current object from our JSON object, as well as sett the title and an href. The href used will depend largely on how the pages showing the tags are going to be generated, we could generate a search results style page listing all of the pages that matched whichever tag was clicked using PHP or .NET easily enough (the results page is also beyond the scope of this tutorial). The link is then appended to the list item, and both are appended to the <ul>.
At this stage, our page should appear something like the following:
It’s certainly a list of links, but a tag cloud it isn’t. We can easily fine tune the appearance of the widget with a little CSS. Let’s do this next. In a new file in your text editor, add the following code:
#tagCloud {
width:290px; background-color:#575454; text-align:center; padding:5px;
overflow:auto; font-size:70%; font-family:arial;
}
#tagCloud h2 {
color:#ffffff; font-size:2.5em; margin:0 0 10px 0;
background:url(images/cloud.gif) no-repeat 0; padding:15px 0 15px 80px;
}
#tagList { margin:0; padding:0; }
#tagList li {
list-style-type:none; float:left; margin:0 10px; height:35px;
}
#tagList li a { text-decoration:none; color:#ffffff; }
#tagList li a:hover ( text-decoration:underline; }
Save this as tagcloud.css. The styles used are a mixture of functional and aesthetic rules, such as floating the list items, and setting their dimensions used to control how the widget functions. I’ve kept the styles as minimal as possible, as no doubt you’ll need to change most of the purely visual styles to fit in with the theme of your existing site.
One important point to note is the font-size we’ve used; a font-size of 70% is set on the outer container element; this represents the smallest text that will appear in the tag cloud. We’re going to be adjusting the font size of some tags using em units in the final part of the script. So setting a baseline font-size is important for consistency.
Now when you run the page, it should appear as follows:
Finishing the Script
One of the hallmark attributes of the tags in a tag cloud is that the individual tags are sized according to their frequency of occurrence; the more popular a tag is, the bigger it’s displayed. We can easily make use of the freq property within our JSON object to resize each link according to its popularity. In between creating the new link and appending it to the unordered list in our script, add the following code:
//set tag size
li.children().css("fontSize", (val.freq / 10 < 1) ? val.freq / 10 + 1 + "em": (val.freq / 10 > 2) ? "2em" : val.freq / 10 + "em");
In truth, the css method could easily be chained to the jQuery object directly after we set the link’s title attribute, but they’re separated here for better readability. Within the css method, we specify the fontSize style attribute and use the standard JavaScript ternary conditional to check whether the current value of the freq property divided by 10 is less than 1. If it is, we add 1 to the figure and then concatenate the string em on the end. This will ensure that none of the tags have a font-size of less than 1em, which is equal to our 70% style rule set on the container element.
However if the value of the freq property divided by 10 is not less than 1, we then check (using another ternary, the equivalent of nesting for loops) whether it is greater than 2; if it is, we simply use 2em as the value of the font-size property. Any elements with a font-size of 2em will be twice the size of our original 70% baseline, which is probably as big as any tag in this type of widget should get. Any values greater than 1 but less than 2 are used in their fractional form to set a font-weight of between 1 and 2 ems. The final page should now appear something like the following screenshot when viewed in a browser:
Summary
In this tutorial we’ve seen how "easy" it is to build a basic tag cloud which retrieves the tags to display as part of an AJAX request directly after page load. It is easy to resize each tag depending on its frequency using a sensible range of text sizes. Although the overall appearance of the widget has been left rather minimally styled, it should be easy to build on this foundation to create something that is beautiful as well as functional.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Patrik January 29th
Nice! Will try this out later.
( )Ed Baxter January 29th
Great Tutorial
( )Ronny January 29th
nice tutorial
( )Gavin January 29th
Awesome…
( )Thomas Offinga January 29th
Wow, always wanted to know how to do this!
( )DKumar M. January 29th
Nice Tutorial Dan…. I gonna try this in my next project. Thanks For sharing !!
( )dantario January 29th
thanks dan thak you very much , you help me alot.
( )Shane January 29th
Nice to see a tutorial that combines jQuery and server-side code.
Thanks for posting.
( )Saurabh Shah January 29th
wow… nice article … even good example of Json … thnx for posting….
( )Patternhead January 29th
As always, great tutorial with clear instructions.
Thanks for sharing
( )insic January 29th
Awesome! very useful. Thanks for posting
( )jhongaby_21 January 29th
Hi insic txt for the tutorial it’s great i will try this one ^_^
( )Simone January 29th
I don’t understand what are the benefits of this approach (load tags from Ajax) versus writing all the tags directly in the HTML.
( )tedeh January 29th
You should update this tutorial to use PHP function json_encode() instead. Outputting JSON ad hoc is a pretty crude solution, really.
( )Rob MacKay January 29th
excelent – and I love the way you explain each section – really good. thx.
( )Mariano January 29th
Nice, but I think the font size calculation is not ok. It will give you the same font size for tags with frequencies 5 and 15. (5 / 10 = 0.5 -> 1.5, 15/10 = 1.5).
( )What you need to do is normalize the frequency somehow to fit the desired range ([1, 2] in your case). Something like (frequency / max_frequency) + 1 will do.
Bill January 29th
I couldn’t figure out out is being passed as a value here :
$.each(data.tags, function(i, val) {
Great tut !!!
( )Dan Wellman January 29th
Hey everyone, thanks for reading and commenting, glad you enjoyed it
@bill in this example, i is equal to the index number of the current item (zero-based) and val is equal to the current object
( )RK January 29th
“for ($x = 0; $x < mysql_num_rows($query); $x++) {”
should be
“for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {”
And “if ($x < mysql_num_rows($query) -1)” should be “if ($x < ($numrows – 1))”
This method is faster – we are executing mysql_num_rows() function only once in first loop expression.
( )Jesse January 29th
Awesome tut. I always thought tag clouds would be more difficult
( )reactlab January 29th
Nice one. Looking forward to using it on an ecommerce site I’m working on.
( )Sam January 29th
The set tag size part could be refactored and simplified, allowing you do more easily define the minimum and maximum font size. 10 probably should be increased if there are a lot of tags – probably the total number of tags in use?
// min 1em, max 2.5em
li.children().css(”fontSize”, fontSize(val.freq, 1, 2.5));
function fontSize(freq, min, max)
{
var size = freq / 10;
if(size max)
{
size = max;
}
}
return size + “em”;
}
Or a more compact ‘fontSize’ function (using tertiary operators)
function fontSize(freq, min, max)
{
var size = freq / 10;
size = (size max) ? max : size;
return size + “em”;
}
Helpful tutorial, the logic could be applied to the backend as well to generate on the server side instead.
( )Brenelz January 29th
Maybe instead of creating the complex JSON string in PHP it would be easier to use the Service_JSON library to do this.
http://pear.php.net/pepr/pepr-proposal-show.php?id=198
( )Dan January 29th
Awesome, I’ve always wanted to learn to do this – as someone else said.. I thought it was much harder!
( )Bjorn January 29th
JQuery (+ Json) is so cool.
( )Glenn January 29th
Why not simply use json_encode in PHP? (http://us2.php.net/manual/en/function.json-encode.php)
( )Bryan P January 29th
That is quite a through example using jQuery. I like how it explains all the steps quite throughly.
Why was not a demo included for us to see the final product? That might help some see the jQuery part of it.
( )slacko January 29th
Thank you, very useful tutorial
( )Stefan January 29th
Hey there,
( )nice tutorial. Since PHP5 there´s is also a function called json_encode which can take care of the mysql result array to json object. Makes it a lot easier to handle the json stuff.
Sam January 29th
Code stripped.. trying again
( )http://pastebin.ws/dyctgq
Mike January 29th
Cool tut, thanks for sharing.
( )Dan Wellman January 29th
Thanks for the tips re PHP JSON functionality and JS functions, always great to get other’s opinions and code-perspectives
( )jay January 29th
Great tutorial, maybe a static “tags.json” file would have been more approachable then an SQL database but I really appreciate that you put some time into how to style these, everytime I try they look aweful!
( )Thomas Milburn January 29th
A nice tutorial and a good demonstration of how JQuery and Json can be used to display custom elements. Unfortunately as simone said JQuery is really unnecessary in this case. If you are making a tag cloud you’d be much better generating it and outputing all in php. Much nicer for those people who don’t have JavaScript enabled.
Also as a nit picky security person I would escape all output from the database using htmlentities otherwise you may open yourself up to XSS.
( )Otto January 29th
Looks Great!
( )Chris Gunther January 29th
Well done, nice tutorial.
( )Saeed Jabbar January 29th
Awesome ,just what I’ve been looking for.
( )Ralph Whitbeck January 29th
Line 14 of your CSS block you have a left paren instead of a bracket.
#tagList li a:hover ( text-decoration:underline; }
should be
#tagList li a:hover { text-decoration:underline; }
( )Kevin Martin January 30th
Nice tutorial, though more info on JSON would have been nice.
Thanks!
( )Dan Wellman January 30th
@Thomas: thanks for the advice, I don’t know enough about PHP security to provide a safe enough solution, so I thought it best that I steer clear of it entirely and add the disclaimer
@ralph: well spotted – all brackets look the same at 2am
@kevin: apologies, I’ll try and include more background info on JSON and its uses in my next article
thanks again everyone
( )Wayne January 30th
Great tutorial. Hope to see more from you.
( )James Hogan January 30th
I agree with Kevin Martin, I’d like to see more info on the json side, I’ve got the raw data from my database freq and tag but I need to know how to structure my json file,
( )Shawn McCollim January 30th
Thanks made use of it already.
( )Chris January 30th
Great Tutorial!
But why is there no ‘demo’ link like there always is next to the ‘Source’ button? I love how you usually always include it, but for some reason there haven’t been any for this and the Login tutorial following this one.
I hope you please include the Demo link again, because it really helps clarify things for me that I might not understand.
( )Dan Wellman February 1st
@James: I’ll make sure a future article includes more info on the JSON object
Until then, I’ll just clarify the object used in this example
The main JSON object is passed to the callback function, it has a single property – tags.
The value of this property is an array, where each item in the array is another object.
This object has two properties – tag and freq, where the value for each of these properties is the data pulled from the table.
If you were writing the object manually, you’d do:
{ tags: [
{ tag: "a tag", freq: "a number" },
{ etc... }
]
}
Hope this helps
( )Jon February 2nd
I’m the tutor of a web design course in London (http://www.digitalartscollege.co.uk) and I’ll be suggesting that my students check this post and use the many great tutorials on your site to help them get to grips with developing. Thanks for the great resource.
( )tutorialand February 3rd
Nice tutorial!
Click my nick.
( )BORABORA February 3rd
Amazing tutorial. I will definately try it out.
( )Regards
Saurabh Shah February 4th
very useful thnx for sharing
( )Webdesigner Depot February 4th
Outstanding tut, thanks!
( )Isra February 5th
I think it’s really stupid to make an asynchronous request to get “static” (during visit time) data like the tagcloud. It can be done simply in PHP… AJAX is cool but when it’s needed!
( )trendbender February 8th
great tutorial
( )Dan Wellman February 12th
@isra: the reason for the AJAX instead of additional server-side code is that thanks to JSONP we can process JSON objects from other domains without being subjected the the browser’s inherent xdomain restrictions. If a site was providing a JSON feed of popular tags, we could use the same jQuery code to request and process this object without needing any PHP or a database
( )nkstr February 13th
Thanks man! Really enjoyed your tutorial, will be back for sure. I also applaud your patient and far-sighted approach to us, the audience, nicely moderated. All in all this has added diversity and perspective to a great tutorial.
( )1 + 1 > 2
slow February 25th
Love it. I really appreciate your patient explanations of the code that are so often lacking in other tutorials. I hope you’ll keep posting tutorials. Thanks.
( )arma9 April 1st
I love this one . It’s so simple to read and learn!!
( )Great tut
Martyn April 1st
Great Tutorial,
Think out of some tag clouds ive seen before this looks one of the best. If I was to use one however I would probably go with the jquery tag cloud just because I’m more familiar with that.
( )Willabee April 1st
@Dan – I like the idea of bringing in the tags from any JSON endpoint and the jQuery to inject it into the markup.
However, I think you made hard work of your local JSON generator process, connecting to MySQL, parsing the result, etc.
A much easier solution that still maintains the objective of this tutorial is to forget all the DB stuff and modify the PHP file to simply this:
$response = $_GET["callback"] .
'({ tags: [
{ tag: "Ajax", freq: "10" },
{ tag: "CSS", freq: "20" },
{ tag: "XHTML", freq: "30" },
{ tag: "jQuery", freq: "30" },
{ tag: "JavaScript", freq: "5" },
{ tag: "XML", freq: "10" }
]})';
echo $response;
Because this does not gracefully degrade for accessibility. I would generate the whole #tagCloud container so that someone without JavaScript would see nothing (They won’t feel cheated) and those with JS get a nice progressive enhancement.
( )Gene Babon April 3rd
Sweet! This is my favorite tutorial. I am about to post an update to my blog listing the Top 50 Web Technologies in Boston (see link below) and I want to use this tag cloud along with it. I plan to test over the weekend.
P.S. I want to be a “Sexy Web Design” -er.
( )lar3ry April 16th
The PHP for generating the JSON object has been pointed out to be a bit less than optimal. I’ve found using arrays to construct tags like this to be the easiest way to process the data and. I can then use join() to join the pieces, allowing it to put the commas where necessary:
//start json object
$json = array();
//loop through and return results
for ($x = 0; $x < mysql_num_rows($query); $x++) {
$row = mysql_fetch_assoc($query);
//continue json object
$json[] = “{tag: ‘${row['tag']}’,freq:’${row['frequency']}’}”;
}
//return JSON with GET for JSONP callback
( )echo $_GET["callback"] . ‘({ tags:[' . join(',', $json) . ']})’;
Dana H. April 21st
Hi Dan,
Thanks for a great tutorial and thanks for not cutting corners by using PHP functions to encode the json string. It’s nice to know what the string will look like without having to view it in a 3rd party app like firefox plugins. There are many different ways to do this, like you first explained. I personally will be using this as part of a module in a cms, and putting tags in a PHP file is out of the question for users that would use my module. Your simple example will give me the basics so that I can expand the concept and add more functionality.
( )ZK@Web Marketing Blog June 20th
I have been getting familiar with jQuery recently and the more I get into it, the more I’m impressed with it. When I first heard about jQuery I was definitely intimidated by it since I had no previous background with javascript, but I soon realized once you get the basics down its not very hard to pull of some neat effects.
( )James June 22nd
Awesome! very useful. Thank you
( )Andres July 3rd
WOW excelent cloud, but, how is the aplicattion in asp.net????
( )aleksen July 9th
this gives me a lot of idea on how to create my own tag cloud. very nice tutz! thanks for this
( )çizgi film izle September 7th
very good.
( )ohaiyo September 9th
what’s add-on with “jsss” icon in the status bar of your firefox?
( )John M September 17th
Thanks so much! I wrote a Python server-side app that works with your example, now in Pastebin. http://pastebin.ws/96h31d
( )Joe October 11th
Cool
( )malia October 14th
Hi, sorry I have 2 total n00b questions.
In this tutorial do you have the files located in a folder titled “jquery” thats on the root level thus: “localhost/jquery/tagcloud.php”? if not what’s the file layout? Where do the jquery and json files go? In the jquery folder? localhost?
Also in the tagcloud database, the table is called “tags” and the columns “tag” and “frequency” right?
( )t33y October 15th
How would you integrate this in a sidebar thats made out of a list?
like this:
…
…
I tried this and several variations but the document doesn’t pick up the script.
( )Any suggestions?
mantis October 21st
Thank to this tut. I’ll be back on this really useful site.
( )