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:

top_tags_yahoo_pipes

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.

, , ,

25 responses to “Blogger tag cloud”

  1. The script will automatically fetch the tags for your blog. You only need to modify the URL of the pipe-call. More precisely replace “hype-free.blogspot.com” with the address of your blog towards the end of the example script.

  2. This is fabulous, I do love interesting gadgets! Thank you so much for sharing it.

    Trouble is, when I put this on my blog, only one or two of my tags show. Could you possibly tell me what I'm doing wrong?

    Evie

  3. @Evie: thanks for reporting the problem. It seems that the Yahoo Pipe doing the summarization had some issues with the feed from your blog. After some tweaking it seems to be alright now, although I'm not quite sure what the original problem was…

    Please let me know if it works for you now.

    Regards.

  4. Oh, cdman, that's fantastic!

    I am so pleased and grateful that you could find the problem. I am in awe!

    It works and looks fantastic now. Thank you so much.

    Kind regards,
    Evie

  5. @Hameed:

    Hello. To change the dimensions, edit the line which begins with "new SWFObject". The forth parameter is the width and the fifth parameter is the height in pixels (unfortunately my current blog design I use cuts off the line, but if you select all the code and paste it into an editor, you will see what I'm referring too).

    One word of caution: if you set these values too low, the tags won't show up. So, if you get this problem, try setting slightly higher values (anything bigger than the current values – 230×240 – should work).

  6. @vincent: I'm assuming that you have a Blogger blog (since the script only works with Blogger blogs). To put it in your sidebar, go to blogger -> Layout -> Add a gadget. Then add a "HTML/JavaScript" gadget and paste the code into the textfield (after modifying your blog name, so that it shows your tags/categories, not mine :)).

    Hope this helps.

    Best regards.

  7. @Jessica: sorry for replying so late, I had limited connectivity/time in the last couple of weeks.

    After looking at your blog (which looks nice btw), the tag cloud seems to function properly. As for tags not showing up: the yahoo pipe which "feeds" the cloud only gives back the 20 most popular (most frequently used) tags. If your tag is not in this category, it won't show up. The criteria for including / excluding tags can be changed (for example you can make it so that you get the most recent 20 tags – as opposed to the most frequent ones), however this is a little more in-depth.

    Hope this helps. If not, feel free to contact me, either by writing a comment or by email ( [email protected] ).

  8. @Soufiane: thank you for notifying me about the problem. In fact the link posted on your website doesn't work either. I've uploaded the SWF file to Google Code, which should provide a more reliable and fault-tolerant hosting.

    Best regards.

Leave a Reply

Your email address will not be published.