Last week I think I started to suffer from "Blog widget envy". Everywhere I looked there were location widgets, tag cloud widgets, "Today I'm feeling ...." widgets, "Listening to Genesis, Invisible Touch" widgets. Okay, so I was less envious of the latter ones but I liked the idea of a tag cloud to smarten up my blog. I searched around and found a few implementations (I even found an animated "see how your tags have developed over time" cloud). I'm sure there was one that did what I wanted. And I'm sure someone will tell me that in response to this blog entry...
Anyway, I decided to knock something up for a couple of reasons. (1) I don't have much (any) control of my blog host. I'm hosted on blogs.msdn.com so I can't modify / add pages. All I can do is play with what customisation Community Server lets you do as a user (and that's pretty good but it wont achieve what I need here). (2) I thought it might be a fun challenge...
My first "cloud" was implemented as an aspx page which I just hosted in an <iframe> element on my blog page. A call to the blogposttags query yields a result in the following format:
<?xml version="1.0" encoding="utf-8"?> <!-- generator="Technorati API version 1.0 /blogposttags" --> <!DOCTYPE tapi PUBLIC "-//Technorati, Inc.//DTD TAPI 0.02//EN" "http://api.technorati.com/dtd/tapi-002.xml"> <tapi version="1.0"> <document> <result> <querycount>8</querycount> </result> <item> <tag>Format</tag> <posts>2</posts> </item> <item> <tag>Plugin</tag> <posts>2</posts> </item> <item> <tag>Source Code</tag> <posts>2</posts> </item> </document> </tapi>
So it's pretty straightforward to parse this XML, get the querycount and then iterate through each tag getting the name and the "popularity". In order to render this as html I simply used the <em> tag to emphasize the more popular tags and came up with a "normalising" function that ensures that even if one tag has 1000 posts and the others have one or two, the scaling is kept within limits.
Add a bit of CSS to set the background to be the same as the blog page and scale the font-size of the <em> element by 110%, remove the border from the iframe element and very quickly I had something that looked like a tag cloud. No links at this stage though.
To add links I simple built a URL for the search function of my blog, passing the <tag> string as the querystring. This lists all the blog entries containing the term (and of course that includes all the blog entries that have been tagged with that term).
I'm sure there are easier / better / quicker ways to achieve the same result. Let me know...