How to add Retweet Button to Blogger


Update: Twitter has now Released its own Retweet Buttons - So check it out at  Official Tweet Button from Twitter With Counter

How to add retweet button to Blogger ?

Twitter is getting more and more famous and so is retweet  Most of you might be knowing of both of this.Still i will give a brief into on both :P
Twitter – Twitter is  a free social networking site that enables users to send short notices of 140 characters. :P
Retweet – This one enables to repost some interesting tweets on twitter.The retweet button can act more like a tweet counter
Adding a retweet button will show a neat count of how many times,your post has been tweeted about,and will also allow your readers to retweet it

Retweet Button Style 1

retweet-button-for-blogger-style-1
Code for retweet button style 1 
<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Retweet Button Style 2

retweet-button-for-blogger-style-2
Code for retweet button style 2 
<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Retweet button Compact Style 1

compact-retweet-button-for-blogger-style-1
Code for compact button style 1
<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Retweet Button Compact Style 2

compact-retweet-button-for-blogger-style-2
Code for compact button style 2
<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

How to install the Retweet Button on your blog?

1.Select any of these four retweet button styles,and copy the corresponding code into a text file.
2.Now in this code replace your_twitter_username with your actual twitter username
3.Now we have got the final retweet code.Now login to your blogger dashboard and navigate to Layout > Edit Html and expand the widget templates
4.Find this piece of code
<div class='post-header-line-1'/>
and immediately after that place our retweet code(from our text file).and you are done :)
If you were unable to find this code in your template,then look for the first occurance of
<data:post.body/>
and immediately before that, place our retweet code(from our text file)
5.Save the template.
Now you should have a  retweet button near each of your blog posts.

Retweet Button for Blogger classic Templates

This is not for the blogger XML templates that we normally use.If you are using a blogger classic template,these four code styles can't be directly used in your template.You will have to modify any of these four code styles for it to work on the classic template.In any of these four code styles change <data:post.url/> to <$BlogItemPermalinkUrl$>
Now you have got the code for the classic template!

Where to place the code for classic blogger template?

Place the code just above <$BlogItemBody$> and save the template.Now you should have the retweet buttons on your classic blog.

If you liked this post, why not help me by retweeting it.. :)
Additional Note: How to check the retweet count of any url?
To check the retweet count of any url,just go to this url in your browser. http://api.tweetmeme.com/imagebutton.gif?url=http://twitter.com .Make sure to replace http://twitter.com with the url whose retweet count you would like to know.
81 comments: Add Comment
Anonymous said...

i think your code placement is wrong it must be placed with <div class='post-header-line-1'/> ti see it above :)

Aneesh said...

@Anonymous,
<data:post.body/> is the actual post content.So it will surely work properly if you place this code before that.. :)

and yea if you place it after <div class='post-header-line-1'/> then also it would work.. :)
the latter may be in some modified form in some templates.That is why i opted to tell about the other one.. :)
Now i have included both according to your suggestion! :)
thanks for the heads up!

ham1299 said...

I had to click "Expand Widget Templates" to find the proper spot to paste the code. Once I figured that out, it worked very nicely. Thanks!

Anonymous said...

Thanks for the easy tutorial. Keep going.

Aneesh said...

@ham1299
i forgot to mention it..now updated the post :)
thanks..

Mr. Jones said...

This was super easy. Thanks.

Rev.Joseph Maher said...

one of my students, told me, that my blog has a wrong message at the end of the home page paper ,I could not accept that, because it seems to me very will on my computer,today ,I went to him and told him to show it to me, I found it , it told the user, that this page can not be displayed, although it displayed it actually, where is the error ?

Aneesh said...

@Rev.Joseph Maher
i don't see any error on your blog..
BTW i think that you added my recent posts gadget.If you want to display your recent posts in that gadget ,then you should give your url in the gadget options instead of mine.

ajay said...

I am still using blogger classic.Could you please explain how to add retweet button for classic blogger?

Aneesh said...

@ajay
i have updated the post with the code for classic template also! :)

Sam Sall said...

love it .you are genius you bring us the most usful tips and you make it very east to do.
thank you

Hunting and Fishing said...

Please help. The retweet button puts the name of my blog in twitter instead of the title of the post. Hope this makes sense.

Anonymous said...

Please, could you tell us the trick for having de comment form above de comments in blogger?

I´ll be really happy if you could help me whith the trick!

have a nice day.

janinsanfran said...

For the marginally Blogger html literate among us, the key to this is to check "expand widgets" in the html view.

Thanks for your help. I made it work.

Coporación Yanapaqui said...

aaaaaaa

danry said...

how do you make money

danry said...

how do you make boxes

money maker said...

This is the right place, but where I put the code
As in the picture :
http://img103.herosh.com/2009/09/15/770716192.gif

Aneesh said...

@money maker
i liked the way you asked it..:)
and here is the answer http://i28.tinypic.com/28rjmur.gif

Kerry Allen, skipper of "Three Ladies" said...

I'm kinda new but love this. My question is this seems to retweet the Blog post address but the text displayed is just the name of the blog. I would like it to be the title of the post. which line affects this.

Thanks

LuUkizZ said...

Is there a way to make images align to the top of the post, and not below the retweet. Please see http://www.bbleaks.com/2009/09/blackberry-mr-t-touchscreen-keyboard.html Whereas text automatically wraps around the retweet button.

THANK YOU!!!

JessicaCRB said...

This is great...but I of course have to make it complicated.

I created an extra "About Me" page that can be clicked on using the blog editor so its considered a post, is there anyway I can get the "Tweet This" icon to disappear on JUST that post?

Thanks, LOVE all the great stuff you have here!

Aneesh said...

@JessicaCRB ,
yea you can surely hide or display something on particular pages.. you will get a better idea by checking out Selective Display on Some pages

Valerie said...

I would like to get the HTML language for a blogroll. Thanks

Aneesh said...

@Valerie ,
just use a linklist gadget.if you want the html code, then contact me at the Forums

mrjack said...

thanks Aneesh !

Katy said...

Love this! Thanks for the easy instructions!

Bryan said...

Worked GREAT! thanks

check out the product

http://reservationforsix.com

InfoQueenbee said...

Thanks you made my work easy!!

_AK47_ said...

its really looking cool at my blog along with each post have a look http://rapidmoviesdown.blogspot.com/

SBA said...

I refer to this useful tutorial in my post about limiting the button to single pages only. Take a look:
http://bpwebnews.blogspot.com/2009/11/adding-retweet-button-to-single-posts.html

Thanks for the many options you provided! I have a 'retweet this post' mixed in with other social icons at the end of each article. Until now I suspected it was not used much. Now with the counter on each post, I was surprised a few articles were tweeted! (still very small numbers... lol).

SU said...

Is there any place to put the retweet in the HTML that would place it above the post title so it doesn't realign the post? Thanks!

a1zudd1n said...

thnx a lot..
the tutorial also easy..
keep it up

AMZMP3 said...

Thanks you made my work easy!!

MissLisa1970 said...

AWESOMENESS! thanks sooo very much =)

UC said...

If used from the home page, this retweets only the blog address. But if used from the single post page, it retweets the post correctly. Is there any code that will allow my readers to retweet a particular post from the home page?

Anonymous said...

very nice posting,
Please post more like this

DailySkewCoFounder said...

Thanks for the great instructions for the classic blogger template! Worked good ... I ended up putting it at the end of the title, since the text did not wrap around the button.

Thanks again!

GreatestMafiaWars said...

How to make retweet button below my fshare button??
See my blog here http://greatestmafiawars.blogspot.com .Hope this problem will solve in a short time

: bluedianthus : said...

thank you for this info..:)
i already made it..:)

Straight Talking Mama! said...

Thanks for this, I'm a total blogging novice and it worked straight away, GREAT!

Victor del Rosal said...

Awesome! It works!

Victor del Rosal said...

Thank you for the easy and EFFECTIVE tutorial, thumbs up! @victordelrosal

AimƩe said...

I have used both this tutorial as well as your facebook share count tutorial (they are the best I have found, thanks!) and I have a couple problems- my tweet button defaults on every post with 1 tweet even though no one has tweeted it. I don't think it is showing the right number if people try to use the button. Also, the layout of the two buttons are not in line with my text, instead they are above the text leaving a large empty space. I can't figure either of these problems out. Any ideas? Here is my website (http://oneofakindgiftideas.blogspot.com) I would put the code but the comment box is trying to apply the html hehe.

AimƩe said...

It also appears that the numbers on my facebook count aren't showing up at all! Please help! Thanks :)

Aneesh said...

@AimƩe,
the tweet count depends on the tweetmeme api which scans the tweets and determines the count. The FB share buttons will display the counts only when the post gets share more than a couple of time. (they dont show small counts like 1 and 2).

Jamie said...

Thanks! It worked great!

Mysticle said...

Great and Easy tutorial. Can you tell me how to change the post link from owl.ly to bit.ly

http://mysticle.blogspot.com/

Thanks!!

Jaina's Mom said...

works great, thanks so much.

Lorin K Mask, M.A., C.P.L.P. said...

You've had a million people say thanks and I'm going to, too. I'm such a novice and this was so easy! Many, many thanks.

Cheers, Lorin

Lorin K Mask, M.A., C.P.L.P. said...

Ton's have already said thanks. I'm going to, too. Will bookmark in case anyone every asks.

I'm such a novice and this was easy!
Cheers,
Lorin

Mel's Box of Chocolates said...

I had the same question about it saying that I tweeted, but I'm wondering if it is because I automatically have it set up to twitter a new post??? Will keep an eye out to see if this is the case.
Thanks so much for the easy instructions.

Elyse Orecchio said...

Thanks so much, this was simple even for me!

BIZZNURSE said...

Good widget, have been looking for it ;)

movies said...

COOL MAN THANK YOU

JoaquĆ­n said...

Thank you soooo much.
Tried to get it from another site and didn´t work. This one did! thanks

Michelle-Jensen said...

i managed to changed it to fit my classic template but what does this mean? <$BlogItemPermalinkUrl$>
coz it seems to be my blog's url instead of my blog entry's title.
can i changed to be able to tweet every blog entry instead?
if yes, what's the code for the classic template?

Nags said...

Hi, thanks a ton for this tutorial. I see that the RT goes to @tweetmeme instead of my username. can we fix this?

Aneesh said...

@Nags - nice to see that you fixed it. .you have to add tweetmeme_source = 'your_twitter_user_name'; as you have done now in your blog :)

Sozo's Blog.com said...

Mine shows the same count number for every post. Annoying!! Is there away to correct that...or have no counter at all?

samm said...

thanks for sharing, really like it :)

Sozo's Blog.com said...

My is still showing the same number of tweets for every post. How do I fix that?

emilie inc. said...

Thank you!! So helpful and simple!

Louise @ Illume Design said...

This is great, thanks so much for this I have just added both facebook & tweet button.

Just wanted to ask is there any way of having the two buttons underneath each other rather than side by side?

Thanks again.

Paul said...

Thanks I found the information useful.

Faiz Sheikh said...

Wow! this is so helpful, I use to wonder always how do people do this. thanks a lot buddy

Keith a.k.a. K j A M said...

I'll jump in on the bandwagon and say thank you so much for this and the Facebook tutorial.

However (you know there had to be one) both the Tweetme and FB share buttons only display my homepage address and not the actual post. In fact, it's picking up the meta data description for my site when it's shared. How do you go about setting it up so that when a person shares a post, the title of that post appears on their FB or Twitter page?

I see there are several questions regarding this same issue, but they have gone unanswered. Anyone have a solution?

WesWare Online said...

Worked like a charm! Thanks a bunch.

suroz said...

Nice tips. I'll install your code into my blog. Thanks.

Rosana Olalde said...

got it! thanks

Ivy said...

Thanks for your tutorial.It works perfectly for my blog :D

The Padrino said...

Nice This sites details actually works great

Thanks

Waleed Ahsan said...

thanks it working like a cherry

Anonymous said...

thank for share,i found it

Dave said...

I've tried to put your code in my blog. When I check preview its great but as soon as I click save template the code vanishes! Any idea why this might be?

Mari said...

Thanks! Works great!

Arjun said...

Hi,i tried it and the tweet option is not working for me,only the tweet counter details that is above the tweet option is working,what to do??Please give a solution

Alexandre Marques said...

HI thanks so much for all the information you've made available. Would it be possible to choose a different design for the twitter button? what if I wanted it to look different, how can I replace the current design of the button with one that I designed. Would appreciate your help.

Zabrinah said...

Thanks!! After expanding the widget, it worked!!

:)

~Zabrinah

Monica said...

Thanks alot Aneesh :)

Damaris said...

so so so useful. Thank YOU!

Post a Comment

Please don't spam on here..