Adding A Twitter “Tweet This” Button To Blog Posts

Adding a “Tweet this” button will enable your readers to share your articles with other Twitter users. This will help promote your blog and possibly increase yourTwitter followers.

The button we are making will appear at the footer area of each post.

Update Nov. 2010 
Twitter has come up with its official Tweet button. Visit Add Twitter tweet button to Blogger posts for a step by step installation instructions.

You can  see the button in action in my widget showcase blog. Click the button and see what happens. I use exactly the same code in there as I do in this tutorial.

If you like what you’ve just seen, then proceed,

1. Login to your to your Blogger account.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Find the your post footer, look for following lines in your HTML codes:

   1	<div class='post-footer-line post-footer-line-2'>

6. This is your second line of post footer section. Usually a blog has 3 lines –line 1 to line 3. You decide which footer line your want to place the button at.
7. Now copy the codes below:

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " " + data:post.url' title='Post this article on Twitter' target='_blank'><img src='yourTwitterButtonURL'/></a>

Replace yourTwitterButtonUrl with the link to your button. If you want to, you can change Reading and Tweet this article on Twitter phrases with your own phrases. Or you can remove them.
Insert (paste) the codes immediately below the line in step 5. The codes now will look like this:







1
<div class='post-footer-line post-footer-line-2'>




2
<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " " + data:post.url' title='Post this article on Twitter' target='_blank'><imgsrc='yourTwitterButtonURL'/></a>





Click PREVIEW and see if your Tweet this button appears at the footer of each post. If it does, then click SAVE TEMPLATE.
Now you can test whether the button works or not. Click the button, if Twitter page pops up and the message is somewhat similar with my Tweet this, then it works.
Enjoy!


Update: Looking for nice cute Tweet This buttons? Look no further, check this out:50+ Free “Tweet This” buttons.

Known bug: 
Readers reported an "Invalid Unicode value in one or more parameters" error pops up on Twitter when attempting to tweet posts with an apostrophe in the titles. 
So far I haven’t find any solution for that. But I did find an alternative, in the form ofTwitter’s official Tweet button and Tweetmeme’s Retweet button.