Blogger tag cloud

Some time ago I experimented with the Cumulus plugin for Blogger, but concluded that I had so many tags (probably a sign of ADD :-)) that the only thing it did, was to transform your computer into a heater, by keeping the processor at 100%. So, I created a Yahoo Pipe which extracts the top N tags and modified the source code for the embedding to use it.

Below you can see the pipe, which is relatively simple:

The code consumes the result of the pipe as JSON and generates the flash object. It is adapted from the original include code. If you wish to use it, you should edit the Yahoo Pipes URL (replace it with your blog URL and the number of tags you wish to show), the text color (on the line with “tcolor”) and possibly the size of the flash. The weird method for constructing the links is necessary because Blogger seems to “muck” with the code otherwise.

<div id="tagCloudContainer"></div>
<script type="text/javascript">
var tagCloud = {
  'storeCloud' : function (obj) {
    var baseUrl = location.protocol + "//" + location.host;
    var cloud = '';
    for (var i in obj.value.items) {
      cloud += "<" + "a " + "href='" + baseUrl + "/search/label/" + obj.value.items[i].title + "' style='8'>" + obj.value.items[i].title + '<' + '/a>';
    }
    cloud += '<' + '/tags>';    
    tagCloud.cloudTags = cloud;
    setTimeout(tagCloud.renderTagcloudCallback, 100);
  },
  
  'renderTagcloudCallback' : function () {  
    try {
      swfobject.embedSWF('http://hype-free.googlecode.com/svn/trunk/blog/tagcloud.swf', 'tagCloudContainer', '230', '240', '7', '',
        { 'tcolor' : '0x666633', 'mode' : 'tags', 'distr' : 'true', 'tspeed' : '100', 'tagcloud' : tagCloud.cloudTags },
        { 'wmode' : 'transparent', 'allowScriptAccess' : 'always' });      
    } catch (err) {
      alert(err);
      setTimeout(tagCloud.renderTagcloudCallback, 100);
    }
  },
  
  'init' : function () {
    var script = document.createElement('script');
    script.src = 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js';
    document.getElementsByTagName('head')[0].appendChild(script);
    
    script = document.createElement('script');
    script.src = 'http://pipes.yahoo.com/pipes/pipe.run?BlogUrl=http%3A%2F%2Fhype-free.blogspot.com%2F&Topcount=10&_id=xKTkgQsT3hGl4j3nJpREag&_render=json&_callback=tagCloud.storeCloud';
    document.getElementsByTagName('head')[0].appendChild(script);    
    return this;
  }
}.init();
</script>

If you are reading this in your RSS reader, visit the blog to see it in action.

Update: it seems that the Flash file can't interpret tag names with special symbols in them (like '). Because of this I modified the pipe so that such tags are filtered out. This will result in some top tags not being displayed (if they contain special characters), but I considered this the right solution, because even if they were displayed, clicking on them wouldn't result in anything. Credit goes to Evie for finding this issue.

Update: the S3 instance hosting the flash file and javascript (halotemplates.s3.amazonaws.com) went away (thanks to Soufiane for pointing this out). So I've downloaded the latest version of the WP-Cumulus and uploaded the SWF file from to Google Code. The SWFObject library is also served from there. So to everyone using the old version: please update to the latest code posted above to make it work again. Sorry for the disruption!

Update: The update broke the "clickability" of the links, since it seems that the new SWF file requires absolute URLs for that. This is now fixed in the script above.

Update: Yahoo pipes changed their backend and thus some adjustment was needed in the pipe which was done.