How to create a Tweet This button in a blogger blog

Inspired by 'How Bloggers Should Inspire Retweets' by Jeremiah Owyang I decided to create a 'Tweet This' button in this blog. It was actually a lot harder that I first thought.

The first step I did was to figure out the URL needed to start the Twitter Web application with prefilled information. This was easy, I just reversed engineered the ShareThis button. This gave something like:

http://twitter.com/home/?status=<url of the post=> <the url of the post >

The next step was to add some HTML to my blogger template, using the provided data tags <data:post.title> and <data:post.url>. This at first looked simple and successful, but I did run into encoding problems with post titles that containing ' (quotes). I needed a new approach.

In the <head> section of the template I created simple javascript function.
<script type='text/javascript'> function ShareTwitter(t, u) { p = "http://twitter.com/home?status=Reading: " + t + ", " + u; s = "<a class=\'stwButton\' href=\'"; s = s + p; s = s + "\' title=\'Share on Twitter\' target=\'_blank\' >Tweet This</a>"; document.write(s); } </script>

The function takes care of the correct encoding and writes the appropriate HTML for the button and Link. Copy this function just above the </head> tag in your template.

Next you need find the place in your template where you want to add the button. This is usually somewhere near <div class='post-footer'>. I put it after my ShareThis button. At the right place you copy the following:
 <span> <script type='text/javascript'> tt = escape("<data:post.title/>"); uu = "<data:post.url/>"; ShareTwitter(tt, uu); </script> </span>

.. and that is almost it.. Now it's only necessary to do the correct styling. Again I look carefully at the ShareThis button. All what was necessary is and image to show and the following styling that you put again in the <style> section of your template. Just put it just above ']]></b:skin> tag'.

First find a good image and upload in your Picasa Album linked to your Blogger blog. In the album you can find the URL to use in the style info below.
/* Twitter button -------------------- */ a.stwButton { padding:1px 5px 5px 22px; background:transparent url(<image you want to show>) no-repeat scroll 0 0 !important; }

Good Luck and success... Feel free to Tweet This post with the nice button below...

6 comments

An American in France 13 January, 2009 02:06: What about in the case that I want to add the button manually to each post or change the image?; 13 January, 2009 02:06
Sara, a rock climber girl 13 January, 2009 02:46: Thank you so much - I've looked everywhere for this functionality. I appreciate you sharing!; 13 January, 2009 02:46
Aad 't Hart 13 January, 2009 22:21: The button image can be changed in the CSS section. Just point the background url to a different image.
The button is automatically added to each blogpost.; 13 January, 2009 22:21
Marconi Poveda 23 January, 2009 09:24: Thanks, I did my own short version based of course on yours,

http://pastie.org/368556

Cheers!; 23 January, 2009 09:24
Kevin 09 February, 2009 09:20: you can use this simple script integrated with tinyurl : http://i-stuff.blogspot.com/2009/02/add-tweetthis-button-your-blog.html; 09 February, 2009 09:20
American Idols Live Tickets 20 May, 2011 12:46: Thanks Man can i add it in my blogspot blog. ?
ticketsmate.blogspot.com; 20 May, 2011 12:46