Adding a Twitter “Tweet this” button to blog posts

by Greenlava

twitter cartoon

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,

  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: 
     <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.
  8. 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>
  9. Click PREVIEW and see if your Tweet this button appears at the footer of each post. If it does, then click SAVE TEMPLATE.
  10. 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.
  11. 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 of Twitter’s official Tweet button and Tweetmeme’s Retweet button.

 

Technorati Tags: ,,

41 comments to "Adding a Twitter “Tweet this” button to blog posts"

Josh,  April 29, 2009 at 2:15 PM    

what's yourtwitterimageurl? is it your twitter url?

Greenlava,  April 29, 2009 at 6:50 PM    

@Josh,
It's the image you want to display in your post (so you readers can click on it). In my case the image is the TWEET THIS button on the left of ADD THIS button. I keep this image in Photobucket, and I use the URL (link) to that image in my code.

Thanks for stopping by.

Greenlava,  April 29, 2009 at 6:55 PM    

To make more sense, I'm changing yourTwitterImageurl to yourTwitterButtonURL since the title use "Button" not "image".

Josh,  April 30, 2009 at 9:36 AM    

Thanks Greenlava!

Greenlava,  April 30, 2009 at 10:06 AM    

You're welcome.

Josh,  May 2, 2009 at 10:32 AM    

Sorry to post again, but I'm unable to get this to work. Should I be replacing or deleting any of the quotation marks around "yourTwitterButtonURL"? Maybe it's not working because I'm using my flickr photostream page and there's an @ in the url?

This is my flickr url: http://www.flickr.com/photos/37587854@N07/3493109976/

Greenlava,  May 2, 2009 at 12:01 PM    

@Josh,
I think this is your correct link: http://farm4.static.flickr.com/3373/3493109976_71d0aa024f_m.jpg
don't forget the quotation marks.
Thanks and enjoy.

Batman,  May 22, 2009 at 11:25 AM    

Ok, this works if I want to put the button @ the bottom of every post, however, what if I wish to put it in the upper left....

Greenlava,  May 22, 2009 at 4:14 PM    

Hi Batman,
You mean just below post title?
If that's the case, look for post-header. I see your blog has post-header-line-1 empty. Put the code in there.
Thanks for flappin' by :)

Unknown,  June 25, 2009 at 10:21 PM    

hi there,
I am trying to do this and can only find the footer1 line ,not footer2. also where do i get the url for my botton? I chose a free tweet this button and saved it in my documents.

Greenlava,  June 25, 2009 at 11:09 PM    

Go to Layout>Edit HTML, and tick the Expand Widget Templates check box. Use Ctrl+F to find this code in the code window:

< div class='post-footer-line post-footer-line-3' >
< span class='post-location' >
< /span >
< /div >
(I put spaces after "<" and before ">" t prevent error in comments)

Insert Tweet This code immediately after < span class='post-location' > line.
Thanks

Moms For Life,  July 18, 2009 at 12:32 AM    

Thanks of rthis post! I was able to install it, but, when I tested it, it posts the full URL. How can I install bit.ly or tinyurl into the tweet this code to make it automatically shorten the URL of my post? Thanks much, Georgia

Greenlava,  July 18, 2009 at 3:25 PM    

Hi Moms For Life,
In order to do that you have to incorporate bit.ly's Tweet & Track Chicklet into the code. I haven't reach there just yet :). For the time being I suggest you try this one by Blogger Buster.

raj,  August 14, 2009 at 6:05 PM    

well how do i add tecnorati button link between each post and what is the step even for stumbleupon button adding i m facing big problems, the problem is that even after adding the code its not working proper showing close {tag} properly when it is closed, wht to do reply soon

Deepak,  August 15, 2009 at 7:14 PM    

I have Added this Tool To My blog. It is great , thank for sharing it.
My blog is http://hollywoodmoviestodownload.blogspot.com

Greenlava,  August 15, 2009 at 9:29 PM    

raj,
To add Technorati button go here

Deepak,
My pleasure

Angela [YourEverydayMama],  September 8, 2009 at 11:23 AM    

Finally, a code that works, thank you so much!

Greenlava,  September 8, 2009 at 11:32 PM    

Angela,
Glad you like it.

प्रवीण त्रिवेदी,  October 4, 2009 at 11:26 PM    

thanks!!

Greenlava,  October 5, 2009 at 12:38 AM    

You're welcome प्रवीण त्रिवेदी...प्राइमरी का मास्टर.

CHANGE YOURSELF!!!,  October 18, 2009 at 11:38 PM    

Hi, this is great. But a problem arises with me. When i click on tweet me button it takes me to twitter home where it shows whole url and not short one and after i update it, it shows short url. Is there any way by which in twitter box it shows short url??

here is my blog : businessaround.blogspot.com

Greenlava,  October 19, 2009 at 9:44 PM    

CHANGE YOURSELF!!!,
Welcome to Blogger Sentral. Similar question was answered in comment no.13.

pelirojo,  November 22, 2009 at 4:21 PM    

Fantastico!
easy peasy
muchas gracias

Greenlava,  November 22, 2009 at 9:16 PM    

pelirojo,
De nada

Jessie Nikole,  December 3, 2009 at 10:09 AM    

It installed perfectly and works for most of my blog posts but I've noticed if any of my Blog post titles have an apostrophe in them then a "Invalid Unicode value in one or more parameters" pops up on twitter.

Greenlava,  December 4, 2009 at 10:22 PM    

Jessie Gray,
Been trying, but I still can't find a solution. I'll update this post when I comes up with one.

clare,  December 23, 2009 at 8:28 AM    

perfect :D

Remodelaholic,  January 3, 2010 at 2:02 AM    

I absolutely love your site! Whenever I want to do anything I come here, and you've got instructions for it! Thanks

Bob Sorensen,  January 20, 2010 at 8:51 AM    

Add me to the list of satisfied customers. I came here on a search for this very thing.

At first, I was thinking, "Should I hotlink? Nah. Where do I store my Twitter button?" Picasa Web. Duh!

Anyway, I'm going to be checking out your work in the future. Thanks!

Greenlava,  January 22, 2010 at 4:18 PM    

@claza
@Remodelaholic
Thank you and do come back...

@Stormbringer
My pleasure.
"Are You a Real Cowboy?" <-- good one :)

Leo Group India,  March 3, 2010 at 4:27 PM    

dear Greenlava i cont able add twitter buttun in my blog. i followed as per u r guidelines but by templete not supporting. plz help me

Greenlava,  March 3, 2010 at 10:58 PM    

@Pharmajobsindia
Whoa! that's a lot of blogs in your profile :) Can you tell me which one are you referring to?

Mockus info,  May 13, 2010 at 6:55 AM    

Hi, im having the same problem as Jessie Gray, when strange characters are used i get the Invalid Unicode value in one or more parameters.
any solutions..?

Greenlava,  May 14, 2010 at 7:12 AM    

@Mockus info
I'm afraid there is none so far :(

Anonymous,  May 28, 2010 at 6:34 PM    

it seems that there is a problem with the encoder,
you can send your url encoded, you have an url encoder here: http://www.hypergurl.com/urlencode.html

use UTF-8 and you will be able to share it with strange characters

Greenlava,  May 28, 2010 at 7:25 PM    

@Anonymous
Thank you for your suggestion, but I think in this case it's not possible. If the url was a static url, you can url-encode it but this tweet-this code uses a dynamic url. There are two variables -data:post.title and data:post.url. The trouble comes from data:post.title.

Waqar Shaikh,  June 17, 2010 at 2:28 AM    

Thanks for the post. I waz looking for it..;)
http://shaikhwaqar.blogspot.com/

James,  July 7, 2010 at 2:36 PM    

Hi, what's the process if i want to add below the post title as I paste the code for Sharing button below the post...plz take a look

http://justimaginnow.blogspot.com/

Greenlava,  July 8, 2010 at 2:30 AM    

@James
Find this code: [data:post.body/]
Paste the tweet this code (in step 7) right below (after) it.

mkp,  November 18, 2010 at 9:24 PM    

James,

Were you ever able to find a solution for this problem? I've currently run into it and need to find a way to fix it for my application to be functional. Please let me know if you've figured anything out! Thanks.

Greenlava,  December 3, 2010 at 4:57 AM    

@mkp
Try Adding the official Twitter tweet button.

Comments on this post are closed.