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 = &quot;http://twitter.com/home?status=Reading: &quot; + t + &quot;, &quot; + u; s = &quot;&lt;a class=\&#39;stwButton\&#39; href=\&#39;&quot;; s = s + p; s = s + &quot;\&#39; title=\&#39;Share on Twitter\&#39; target=\&#39;_blank\&#39; &gt;Tweet This&lt;/a&gt;&quot;; 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:
<!-- twitter --> <span> <script type='text/javascript'> tt = escape(&quot;<data:post.title/>&quot;); uu = &quot;<data:post.url/>&quot;; 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...

7 comments

What about in the case that I want to add the button manually to each post or change the image?

Thank you so much - I've looked everywhere for this functionality. I appreciate you sharing!

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.

Thanks, I did my own short version based of course on yours,

http://pastie.org/368556

Cheers!

you can use this simple script integrated with tinyurl : http://i-stuff.blogspot.com/2009/02/add-tweetthis-button-your-blog.html

Thanks Man can i add it in my blogspot blog. ?
ticketsmate.blogspot.com

thank you very much a very handy widget 
M.Y.B Softwares

Post a Comment