Display Your Technorati Rank

Recently I noticed that Technorati added a link count widget which is pretty cool... but what I really wanted was a widget to display my Technorati rank.

Not finding one, I began poking around the Technorati API, and created my own widget.

Its output looks something like:

PurpleMoggy's Blog
Rank: 271,017 (17 links from 13 blogs)

Basically, the blog name followed by the actual ranking, and a link to your blog's Technorati page.

If anyone else wants to use this then add the following to your page:

<!--
     Technorati Rank (technorati.com)
     Ducksoup Technorati PHP API Library (kailashnadh.name/ducksoup/)
     Created by: PurpleMoggy (purplemoggy.blogspot.com)
-->
<script type="text/javascript" src="http://purplemoggy.clawsorpaws.com/technorati/rank.php?u=*.blogspot.com"></script>

You'll need to replace the part in bold with your blog's url.

The actual HTML output will be something like:

<div class="tec_wrap">
  <div class="tec_name">
    <a href="http://technorati.com/blogs/http%3A%2F%2Fpurplemoggy.blogspot.com">
      PurpleMoggy's Blog
    </a>
  </div>
  <div class="tec_rank">
    <a href="http://technorati.com/blogs/http%3A%2F%2Fpurplemoggy.blogspot.com">
      Rank: 271,017 (17 links from 13 blogs)
    </a>
  </div>
</div>

This should let you style it however you want... like I did in my sidebar :)

Finally, I'd like to thank Kailash Nadh for creating Duck Soup, a wonderful Technorati PHP API Library (which basically just meant that I didn't have to parse any XML myself)

Update:
As an example of what you can do with styling rules you could add the following css to your page's header:

div.tec_name {
  display:none;
}
div.tec_rank {
  background: url(http://static.technorati.com/static/css/img/icn/talkbubble.png) 0 2px no-repeat;
  padding-left: 16px;
  border:0;
}
div.tec_rank a:link, div.tec_rank a:visited {
  color: #390;
  text-decoration:none;
}
div.tec_rank a:hover {
  border-bottom:1px dotted #390;
}

which would hide the blog name line, and render the Rank line to look very similar to how it's displayed at Technorati.com

Update #2:
I included a small link back to this post. Normally I don't like adding any sort of branding, but I just added a small question mark (?) after the rank which is actually how it's displayed at Technorati anyway. I also wrapped it in a span with a class of tec_link so it is possible to hide if you really want to.