Tagcloud Update

Since my original review of Tagcloud, they have implemented a number of features.

1. new weighting algorithm
2. a stop words list – helpful in preventing irrelevant tags
3. caching – yeah! – the tag cloud results are cached, meaning speedier performance! This is a great improvement.
4. Control the number of tags – want only 10? want 100? The number of tags displayed can now be set. The maximum number displayed is 250.
5. Custom presentation via XML. The Tagcloud feed is now available in a XML file which means it can now be presented anyway possible by a web developer. Though a user has to be aware of some pitfalls which I describe below.

The last three features are very cool and were very important to the future development of Tagcloud. Now Tagcloud is much easier to implement and less weighter on speed.

Pitfalls to customization:

For beginners, implementing the XML file into a webpage might be a little daunting. A XSL file (think of it as CSS for XML files) will have to be created.

There is a Javacript, PHP and ASP solution.

ASP developers can find the ASP XML implementation here.

PHP users have to verify first whether XSLT functions were installed with the PHP installation. If not, write your web hosting company and see if it is possible to get them installed. If the XSLT functions are installed then this PHP XML implementation code might work. (see the section “Using XSLT from within PHP”)

It is ideal to use the ASP or PHP solution since they both avoid cross-browser problems. If neither is available then some implementation of Javascript will have to be employed. The problem with using Javascript is the code is different for IE and Mozilla based browsers. Code will have to be implemented to determine which browser is being used, etc. This seems sorta messy for implementing something so simple.

The simplest solution is to use the provided Javascript file from Tagcloud and use CSS to reformat it. This avoids having to deal with any XML file implementation.

You can see my implementation of Tagcloud in the Left Sidebar. Below is my code and css file.

<div id="whatshot">
<div class="whatshottext">
What's Hot on the RWT Blog
</div>
<script language="JavaScript" type="text/javascript" src="http://www.tagcloud.com/cloud/js/RWT/default/30"></script>
</div>


#whatshot{
padding: 5px;
border:1px solid #003366;
width: 200px;
}

.whatshottext{
font-weight: bold;
font-size:12px;
text-align:center;}

.tagcloud {text-align: left; padding:10px; position:relative; }
.tagcloud span a {line-height: 25px; margin: 0 2px;}

.tagcloud span.level1 a {font-size: 11px; line-height: 15px;}
.tagcloud span.level2 a {font-size: 12px; line-height: 17px;}
.tagcloud span.level3 a {font-size: 14px; line-height: 19px;}
.tagcloud span.level4 a {font-size: 16px; line-height: 21px;}
.tagcloud span.level5 a {font-size: 18px; line-height: 23px;}
.tagcloud span.level6 a {font-size: 20px; line-height: 25px;}
.tagcloud span.level7 a {font-size: 22px; line-height: 27px;}
.tagcloud span.level8 a {font-size: 24px; line-height: 29px;}
.tagcloud span.level9 a {font-size: 26px; line-height: 31px;}

.tagcloud span.level1 a {color:#668AA8;}
.tagcloud span.level2 a {color:#003366;}
.tagcloud span.level3 a {color:#003366;}
.tagcloud span.level4 a {color:#003366;}
.tagcloud span.level5 a {color:#003366;}
.tagcloud span.level6 a {color:#003366;}
.tagcloud span.level7 a {color:#003366;}
.tagcloud span.level8 a {color:#003366;}
.tagcloud span.level9 a {color:#003366; font-weight: bold; padding: 0 4px;}

.tagcloud span a:hover, .tagcloud span.level1 a:hover, .tagcloud span.level2 a:hover, .tagcloud span.level3 a:hover {color: white; background-color: #668AA8;}