Blogger Linking Widgets

I spent a few hours today figuring out how to add a few linking widgets to my posts. At first I thought I'd have to do it manually, but the 'new' widget architecture for Blogger is pretty cool and easy to use!

I wanted to create links to Digg, del.icio.us, and Technorati on each of my posts and have the links be generated automatically for me. It seemed like a straightforward thing to do, but as usual, syntax issues caused me to take a bit more time than I planned.

So, rather than have someone go through the crap I went through getting this little bit of code right, I'll post it for you here:

<!-- digg post link -->
<span class='item-action'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' title='Digg This!'>
<img alt='Digg!' height='16' src='http://digg.com/img/badges/16x16-digg-guy.png' width='16'/>
</a>
</span>

<!-- del.icio.us link -->
<span class='item-action'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Bookmark This to del.icio.us'><img src='http://images.del.icio.us/static/img/delicious.med.gif'/>
</a>
</span>

<!-- technorati favs -->
<span class='item-action'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' title='Add to Technorati Favorites'><img alt='Technorati' height='16' src='[ PUT THE SOURCE TO A TECHNORATI LOGO IN HERE ]' width='16'/>
</a>
</span>

You can place this bit of code in your template in Blogger wherever you feel it suits you. Please note that you'll need to find a Technorati logo and point to it. Be sure to check the "expand widget templates" checkbox in the template > edit html tab. This will give you more visibility to where you can place this code. I placed it immediately after the <div class='post-footer'> tag - about half way down the page. You can see that placing it there will cause the link buttons to show up at the 'top' of my footers for each post. Enjoy!