Tumblr hack: A real tag cloud

Tumblr may come up with "real" tag browsing soon, but meanwhile, here's a tag cloud that -- unlike third party services -- uses the actual tags that you assign to your posts.

Basically, the script calls the Tumblr JSON API and processes the posts, 50 at a time (the maximum allowable; configurable). It saves the tags, URLs, and a bit of the content. If there are any remaining posts, it keeps on doing this until it retrieves all of them, or reaches a preset maximum (150 by default, or thrice). It then renders the tags in varying font sizes depending on the total number of times each tag was used.

By default, links are created for each of the tags. Clicking on a tag will generate a list of posts with that particular tag. [ Hey Tumblr! A /tags/<tagname> path that only shows posts with that tag would be nice. :-) ]

I used Jason Levitt's Dynamic Script Tag class to call the Tumblr API as many times as required.

Here's*** the quick-and-dirty demo script showing the tags from my scifaiku site (again). If you do use it, please send me your URL via a comment. :-)

*** Update: The original one didn't use the titles (I had no titles in scifAI, originally) but instead parsed the content up to the first HTML tag. Here is a more generic one, using post titles.

more > | full >>

< less | full >>

Firebug and CSS Specificity

I was trying to get my Twitter widget (adapted from the Twitter Fan Wiki) to show a profile icon beside my own updates.

My original code was:

<style type="text/css">
.twitter_self {
background-image: url("http://www.blogblog.com/rounders3/icon_profile.gif");
}
</style>

I used it like so inside the widget code:

<ul id="twitter_list">
<li class="twitter_self">my update message</li>
</ul>

But what was this? The original arrow icons kept showing up!

After a little googling, I discovered Firebug, an amazing, free Firefox* plugin that, IMHO, all web developers should install. It allowed me to inspect Javascript-generated elements, among other things (like single-stepping through Javascript and live code/CSS editing), and I was able to confirm that my code was being overridden by the main skin style.

(* "Lite" version available for other browsers)



So I googled some more and found the wacky CSS: Specificity Wars page, which let me know that the spec says

ID selectors have a higher specificity than attribute selectors.

Aha! So I fixed the code like so:

<style type="text/css">
#twitter_list .twitter_self {
background-image: url("http://www.blogblog.com/rounders3/icon_profile.gif");
}
</style>

... and all was well. An easy problem to solve, but I learned something new.

more > | full >>

< less | full >>