How to add Retweet Button to Blogger

8/13 04:00:00 AM Thursday, August 13 ,

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.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="..."></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.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="..."></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.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="..."></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.canonicalUrl/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="..."></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.canonicalUrl/> 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. Make sure to replace with the url whose retweet count you would like to know.

90 comments :

  1. AnonymousAugust 13 at 8:12 PM

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

  2. UnknownAugust 13 at 8:38 PM

    @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!

  3. ham1299August 14 at 8:03 AM

    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!

  4. AnonymousAugust 14 at 2:12 PM

    Thanks for the easy tutorial. Keep going.

  5. UnknownAugust 14 at 7:41 PM

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

  6. Mr. JonesAugust 15 at 5:30 PM

    This was super easy. Thanks.

  7. Rev.Joseph MaherAugust 17 at 10:12 PM

    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 ?

  8. UnknownAugust 17 at 10:24 PM

    @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.

  9. ajayAugust 19 at 8:59 PM

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

  10. UnknownAugust 19 at 9:19 PM

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

  11. Sam SallAugust 24 at 11:34 PM

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

  12. Hunting and FishingAugust 25 at 12:14 AM

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

  13. AnonymousAugust 25 at 4:01 AM

    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.

  14. janinsanfranAugust 29 at 12:02 PM

    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.

  15. Coporación YanapaquiSeptember 1 at 10:15 AM

    aaaaaaa

  16. danrySeptember 6 at 1:10 PM

    how do you make money

  17. danrySeptember 6 at 1:12 PM

    how do you make boxes

  18. WalidSeptember 15 at 6:24 PM

    This is the right place, but where I put the code

  19. UnknownSeptember 15 at 6:49 PM

    @money maker
    i liked the way you asked it..:)

  20. Kerry W AllenSeptember 21 at 2:25 AM

    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

  21. Lucas AtkinsSeptember 28 at 10:32 AM

    Is there a way to make images align to the top of the post, and not below the retweet.

    THANK YOU!!!

  22. JessicaCRBOctober 12 at 12:01 PM

    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!

  23. UnknownOctober 12 at 1:11 PM

    @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

  24. ValerieOctober 14 at 6:29 PM

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

  25. UnknownOctober 14 at 6:33 PM

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

  26. mrjackNovember 3 at 12:39 AM

    thanks Aneesh !

  27. KatyNovember 18 at 4:40 AM

    Love this! Thanks for the easy instructions!

  28. UnknownNovember 24 at 7:46 AM

    Worked GREAT! thanks

    check out the product

  29. InfoQueenbeeNovember 25 at 12:39 AM

    Thanks you made my work easy!!

  30. UnknownNovember 25 at 9:41 PM

    its really looking cool at my blog along with each post have a look

  31. SBANovember 30 at 1:52 AM

    I refer to this useful tutorial in my post about limiting the button to single pages only. Take a look:

    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).

  32. SUNovember 30 at 2:18 AM

    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!

  33. DeenDecember 12 at 2:31 PM

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

  34. Social Media NewsDecember 17 at 11:26 PM

    Thanks you made my work easy!!

  35. MissLisa1970December 20 at 12:43 PM

    AWESOMENESS! thanks sooo very much =)

  36. UCDecember 22 at 9:51 PM

    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?

  37. AnonymousDecember 28 at 10:01 PM

    very nice posting,
    Please post more like this

  38. DailySkewCoFounderDecember 30 at 3:34 AM

    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!

  39. GreatestMafiaWarsDecember 31 at 6:20 AM

    How to make retweet button below my fshare button??
    See my blog.Hope this problem will solve in a short time

  40. BLUEDIANTHUSJanuary 6 at 2:29 AM

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

  41. Straight Talking Mama!January 23 at 5:41 PM

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

  42. Victor del RosalJanuary 24 at 3:41 AM

    Awesome! It works!

  43. Victor del RosalJanuary 24 at 3:42 AM

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

  44. AiméeFebruary 1 at 10:34 PM

    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 I would put the code but the comment box is trying to apply the html hehe.

  45. AiméeFebruary 1 at 10:36 PM

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

  46. UnknownFebruary 2 at 1:17 AM

    @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).

  47. JamieFebruary 3 at 3:06 AM

    Thanks! It worked great!

  48. MysticleFebruary 5 at 12:17 PM

    Great and Easy tutorial. Can you tell me how to change the post link


    Thanks!!

  49. Jaina's MomFebruary 13 at 11:05 AM

    works great, thanks so much.

  50. UnknownFebruary 25 at 10:17 PM

    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

  51. UnknownFebruary 25 at 10:18 PM

    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

  52. MelMarch 8 at 4:28 AM

    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.

  53. Elyse OrecchioMarch 22 at 4:21 PM

    Thanks so much, this was simple even for me!

  54. BIZZNURSEMarch 23 at 4:27 PM

    Good widget, have been looking for it ;)

  55. YaweluckMarch 24 at 6:06 AM

    COOL MAN THANK YOU

  56. JoaquínMarch 29 at 3:09 PM

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

  57. Michelle-JensenMarch 31 at 7:20 PM

    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?

  58. amnaApril 4 at 12:09 PM

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

  59. UnknownApril 4 at 1:33 PM

    @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 :)

  60. Sozo's BlogApril 6 at 3:24 AM

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

  61. AnonymousApril 8 at 10:12 PM

    thanks for sharing, really like it :)

  62. Sozo's BlogApril 9 at 3:32 AM

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

  63. emilieApril 17 at 8:18 AM

    Thank you!! So helpful and simple!

  64. Louise @ Illume DesignMay 4 at 1:08 PM

    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.

  65. PaulMay 6 at 3:38 AM

    Thanks I found the information useful.

  66. Faiz SheikhMay 7 at 7:04 PM

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

  67. AnonymousMay 9 at 11:26 PM

    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?

  68. BlackBerry ExpressionsMay 12 at 12:53 PM

    Worked like a charm! Thanks a bunch.

  69. surozMay 13 at 2:48 PM

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

  70. Rosana OlaldeMay 14 at 1:59 PM

    got it! thanks

  71. IvyJune 12 at 3:46 PM

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

  72. The PadrinoJune 21 at 11:45 AM

    Nice This sites details actually works great

    Thanks

  73. Waleed AhsanJune 26 at 9:20 PM

    thanks it working like a cherry

  74. AnonymousJuly 1 at 7:14 AM

    thank for share,i found it

  75. UnknownJuly 4 at 3:56 PM

    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?

  76. MariJuly 9 at 4:35 AM

    Thanks! Works great!

  77. ArjunJuly 10 at 12:06 PM

    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

  78. Alexandre MarquesJuly 15 at 12:10 AM

    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.

  79. ZabrinahJuly 21 at 6:37 PM

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

    :)

    ~Zabrinah

  80. MonicaJuly 23 at 4:12 PM

    Thanks alot Aneesh :)

  81. Damaris @Kitchen CornersAugust 21 at 5:05 AM

    so so so useful. Thank YOU!

  82. AnonymousSeptember 11 at 5:51 AM

    thank you from blogchives! I greatly appreciate your expertise.

  83. WritnBlockNovember 18 at 1:44 AM

    I followed all directions, and although the retweet box appears next to all my posts, it does not allow me to click it!
    Can you help?

  84. KathieApril 7 at 11:16 PM

    thank you, thank you! finally a tutorial that worked on my blog :-)

  85. FriendlydocMay 2 at 8:19 AM

    HI ..i would like to use both the FB like button n the retweet icon...both floated to the right...would that create any conflict between them....
    thanks a lot.....u make using blogger widgets a walk in the park....

  86. Mina BurrowsJuly 1 at 7:45 AM

    Thanks a bunch! I was having issues with my RT button until I saw this post! :)

  87. UnknownJuly 2 at 9:12 PM

    @Mina - you can use the official twitter button instead of the tweetmemem button Refer twitter-share-buttons-for-blogger-tweet.html

  88. DolceJuly 14 at 10:13 PM

    Hi, the retweet button shows up fine, but when I tried to test it to see if it works it won't let me click on it ... anyone know why?

  89. smartphonedipzJanuary 11 at 4:32 PM

    Thank you very much for these code snippets. I recently launched a custom domained blog on blogger on Smartphone in India. I have used your code with good effect and the button is visible now. I am pretty happy as I was badly looking for Tweeter buttons in internet. However, thank you very much for your effort.I have seen many interesting widgets in your blog and may use another couple of widgets for sure.

  90. KarnasuwandaApril 4 at 8:32 PM

    Thank you Very much, This is very Help me to promote my site.