The best kittens, technology, and video games blog in the world.

Wednesday, April 04, 2007

How to add Web 2.0 buttons to Blogger Beta

YA? by spiicytuna from flickr (CC-NC-ND)
As unfortunate side effect of upgrading from the old Blogger to Blogger Beta, web 2.0 buttons stopped working. Here's a quick guide how to get them back.

Enter Dashboard, select "Template" and "Edit HTML". Select checkbox "Expand Widget Templates". Now locate the following fragment (or something like that):

<p class='post-footer-line post-footer-line-3'/>

And replace it with the following code and save:

<p class='post-footer-line post-footer-line-3'>
Add to:
<a expr:href='";amp;url=" + data:post.url + "&amp;amp;title=" + data:post.title'>
<img src="" /> digg</a>
<a expr:href='"" + data:post.url + "&amp;amp;title=" + data:post.title'>
<img src="" /> reddit</a>
<a expr:href='"" + data:post.url + "&amp;amp;title=" + data:post.title'>
<img src="" /></a>

Now you should have Digg, Reddit, and buttons below each of your posts.

Technical details

Special hacking is needed, because buttons cannot simply submit the current URL. The reader might be reading blog main page or one of archive pages, not necessarily posts' page.

The code is rather straightforward. expr:href is executed and becomes href. data:post.url is post URL, data:post.title is post title, strings are quoted, + concatenates.

It seems necessary to double-quote special characters like & to &amp;amp;.

You can put the buttons somewhere eles within <b:includable id='post' var='post'>...</b:includable>.

Support for different web 2.0 services, different images etc. should be easy. If you have any questions, don't hesitate to ask.


CND said...

Thank you for this little guide. I'd been meaning to get around to adding this to my blog, and you just made it that much easier to do so. Cheers.

Natasha Driver said...

Just implemented this on my blog. Thanks!

Chris said...

nice one, thanks mate. worked a treat.

Coco said...

Hey - brilliant, thank you!