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.
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>";
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:
<!-- twitter -->
tt = escape("<data:post.title/>");
uu = "<data:post.url/>";
.. 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
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...