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 your Twitter 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,
- Login to your to your Blogger account.
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Tick the Expand Widget Templates check box on top right of the HTML window.
- Find the your post footer, look for following lines in your HTML codes:
<div class='post-footer-line post-footer-line-2'>
- 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.
- 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
yourTwitterButtonUrlwith the link to your button. If you want to, you can change
Tweet this article on Twitterphrases 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:
<div class='post-footer-line post-footer-line-2'> <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>
- 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.
Update: Looking for nice cute Tweet This buttons? Look no further, check this out: 50+ Free “Tweet This” buttons.
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 of Twitter’s official Tweet button and Tweetmeme’s Retweet button.