How to add Retweet button to blogger

Twitter also known as micro blogging is spreading among people like flu. With increase in its popularity, twitter has become a very good media for social marketing. Tweetmeme is a free service which makes twitting about blog posts very easy. The Retweet Button along with the option to retweet, also displays the number of tweets made about the post.

Here is how the Retweet Button looks like this:

tweetmeme, How to add Retweet button to blogger

Full and Compact Retweet Buttons

Plugins to add the button are available for wordpress,joomla and drupal but there is none available for blogger, so i will show you how to add the retweet button to your blogger blog.

Follow these simple steps:

1. Go to Layout->Edit Html

2. Download Full Template

3. Check the Expand Widget Templates

4. Search for the code below:

<div class=’post-header-line-1′/>

a. For the full retweet button place the following code below the above code:

<div style=’float:right; padding: 5px 5px 5px 5px’>

<script type=’text/javascript’>

tweetmeme_url=&#39;<data:post.url/>&#39;;

</script>

<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’>

</script> </div>

This will display the button on the right side of the blog post. To place the button on the left side just replace float:right in the code to float:left.

b. For the compact button instead of the code above place the following code:

<div style=’float:right; padding: 5px 5px 5px 5px’>

<script type=’text/javascript’>

tweetmeme_url=&#39;<data:post.url/>&#39;;

tweetmeme_style = ‘compact‘;

</script>

<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’>

</script> </div>

5. Save the Template and you’re done!

UPDATE:

Tweetmeme Announced that:

By default the retweet button will be like this “RT @tweetmeme “. You can, however change the button to retweet your user account. By specifying the “tweetmeme_source” parameter in the JavaScript you can change the format to “RT @yourname (via @tweetmeme)”.

So now you can add your twitter user account by adding the code below:

<div style=’float:right; padding: 5px 5px 5px 5px’>

<script type=’text/javascript’>

tweetmeme_url=&#39;<data:post.url/>&#39;;

tweetmeme_source =&#39;Your User Account&#39;;

</script>

<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’>

</script> </div>

Replace “Your Twitter Account” by your twitter Account

Update #2:

Twitter announced:

Using your own URL shortener

TweetMeme now lets you specify a URL shortening service which you would prefer to use.

* bit.ly,

* awe.sm (API support),

* cli.gs,

* digg.com (API support),

* is.gd,

* TinyURL.com

* tr.im,

* su.pr (API support),

* ow.ly,

* lopurls.us,

* twurl.nl

This means you can use any url shortener of your choice which will be great and when the API support comes you could also many more features.

Here’s how you can add your choice of url shortener.

<div style=’float:right; padding: 5px 5px 5px 5px’>

<script type=’text/javascript’>

tweetmeme_url=&#39;<data:post.url/>&#39;;

tweetmeme_source =&#39;Your_Twitter_Account&#39;;

tweetmeme_service = &#39;Your-url-shortener&#39;;

</script>

<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’>

</script></div>

Replace Your-twitter-account with your twitter account(eg. for me virtuosoblogger)

Replace Your-url-shortener with your choice of url shortener (eg. bit.ly)

Problems? Tell me!!

  • newbiesblogger

    nice tuto.. maybe I will try it because.. you know I not really get into this when it involving coding

  • Neil adit

    EXELLENt! It was the easiest way to add a button .
    THANX a lot!

  • Mike Figliuolo

    Outstanding little piece of code. Thanks for the clear explanation. Any way to modify the post title that gets tweeted? When I RT it adds both the title of the blog as well as the post title. Any way to mod that?

    To see an example of the problem see http://thoughtleadersllc.blogspot.com and tweet one of the posts there. Thanks again!

  • sharpmind

    Awesome…Thank you very much.
    Just implemented this code on my blog :)

    http://learnitfast.blogspot.com

    Thanks again.

  • Eric Ungs

    Thanks a bunch for the update on changing the @tweetmeme to @EricUngs.

    Much appreciation!!

  • gautam

    @Mike Figliuolo: Till now there is no way to change the title and post title for tweetmeme widget but you can always remove the name of the blog from the title of individual pages using a blogger hack.

  • Ray Beckerman

    Is there a way to modify this to work with an old Blogger.com template which doesn't have the widget thing?

  • gautam

    @Ray Beckerman: I don't have access to any old blogger blog but you can convert to the new blogger by going to http://www.blogger.com/legacy-claim.g

  • Trent Rampage

    this is awesome. thanks for the code!

  • SamFunPic

    It's working! Thx a lot. I Tried code from official help page, but it didn't work. http://help.tweetmeme.com/2009/04/07/integrating-the-tweetmeme-button-into-blogger/

  • gautam

    @samfunPic ya i've tried to make it as easy as possible

  • Suzanne

    Thanks so much! This worked perfect! I had tried installing another code from elsewhere and it wasn't working- comparing codes it looks like 'they' forgot the most important part! Am following now!

  • Joe

    Thanks! This is awesome and very useful – especially the bit about changing the default @username :)

  • chi-town fashionista

    Thanks for the code. This was extremely helpful.

  • Mignon

    Do you save or run when you download full template??? I tried running and I got an XML error. Any help??

    Thanks,

    Mignon

  • gautam

    No saving is done. First you download the full template, add the codes mentioned above and save the template. It will work. You might get an XML error if you didn't copy the code correctly

  • Christian Schnitt (Stulles Weblog)

    Thanks ^^ Nice Stuff this Widget :-) Ps. it worked great

  • Raptia

    Thank you so much! It worked perfectly, better instructions than the tweetmeme site.

  • Tanuj Lakhina

    I agree with Raptia.

  • arunenigma

    best tutorial with all updates…thankyou so much friend…
    I have implemented in my blog

    http://www.freedownloads-arunenigma.blogspot.com

  • gautam

    Thanks all. I will update it when there are updates from tweetmeme

  • Ramarao

    Well, very nice article. I did apply the same to Digg this too. But i want to have a count of diggs on the icon. How can i do this. You can see my blog, for how i applied this at windows technology blog

  • Joe Ndzulo

    Great and useful post, Gautam. Thank you.

  • Nerdote

    My button doesn't seem to be counting the retweets properly. Anybody else have this problem?

  • SEO training

    Hoping you can help…I added the code as you said but when I "tweet" it only lists the title of my blog. Can you suggest a way to fix this?

    Thanks so much!

  • gautam

    Can you cite the problem with an image because i can't see a retweet button in your site.

  • Mike

    Sorry… the URL I'm referring to is at http://marketing-expert.blogspot.com. Thanks Gautam!!!

  • Lauren

    My tweet counts are not updating :( I tweeted my blogger templaets post and it was retweeted by others as well. Any ideas whats the problem? Thanks for all your help! (@nymphont)

  • gautam

    @lauren: Lauren i am too having this same problem, but i think this is an internal problem of tweetmeme.

  • Melissa Paulik

    Gautam,

    Thanks for coming to the rescue with clear instructions. Clear as they are, I apparently did something wrong. I tested my tweet button and it still gives the @tweetmeme id even though I replaced the text "Your_Twitter_Account" with my Twitter account. Any ideas?

    Also, do you know how I can get it to give the name of my post in the retweet instead of the name of my blog?

    Melissa Paulik
    http://www.themarketingsurvivalist.blogspot.com

  • gautam

    @Melissa Paulik: I am happy to help. You might have done something with the code. Verify it and make sure you have done it all right and then see the preview

    You migt have to add something to your template. You might have to add the code below post.body tag try it and tell me

  • Hendersonville Epicurean

    Thank you so much for the code. I've been struggling with this button. Do you know of anyway to change this: RT @HvilleEpicurean Hendersonville Epicurean http://bit.ly/HHRQO (what I'm getting now) to this: RT @HvilleEpicurean (Title of post) http://bit.ly/HHRQO???

    Any help you can give would be appreciated!

    Laura

  • gautam

    @Hendersonville Epicurean: Place this code just below post.body and i think it should work. You might have a problem where you are adding the code because maybe it is showing the title of the blog instead of the post.

  • Hendersonville Epicurean

    Thanks gautam.
    I first put the code right under: div class='post-header-line-1'/ and got RT @HvilleEpicurean Hendersonville Epicurean http://bit.ly/HHRQO.

    Then directly under: div class='post-body entry-content' and got the same thing.

    Then tried directly under: p data:post.body/ /p and still got the same thing.

    (Had to remove the <> for comment to publish)

    Any other suggestions? I'd love to get it working with the Post Title. Don't think I'll get many retweets with just the Blog Title.

    Thanks again for your help

  • Faye @ "GreenOrganicMama.com"

    Hi Gautam!

    I love your tips and tricks here. Just awesome! You are truly brilliant :)

    Gautam, if you have a moment, would you have a look at what happened on my blog, when I installed this piece of Retweet code?

    GreenOrganicMama.com

    Not a HUGE issue, but do you see how the images in my posts that are supposed to be right-aligned, suddenly got shifted away from the right margin, the exact width of the Retweet button?

    Not a big deal, and I can live with it, but if you can help me figure out how to get my right-aligned pictures flush with the right margin again, I would be very much appreciative!

    Thanks a bunch!

    Faye @ GreenOrganicMama.com

  • gautam

    @Hendersonville Epicurean:
    The problem is not with the retweet button but the title of each blog post of your blog is the same as the blog title and that is why you are getting the same text in the retweet button. This article will help you change the title: Optimizing Title For Search Engine Optimization in Blogger.

    @Faye @ "GreenOrganicMama.com": I think you should try editing the padding in the code.

  • Faye @ "GreenOrganicMama.com"

    Hi Gautam!

    Thanks for the prompt reply.

    I did try adjusting the padding (even taking it out completely), but it still affects the picture below (and subsequently, any other right-aligned pictures in the same post).

    What did seem to sort of work was to change the code from a "float:right" to "text-align:right". HOWEVER, that put the Retweet button on it's own line at the top of the post, instead of inline with the Post Date.

    HELP PLEASE! LOL! Much appreciated.

    Faye @ GreenOrganicMama.com

  • Faye @ "GreenOrganicMama.com"

    Hi Gautam! I think I figured out a work-around for this right-alignment issue.

    I noticed that Blogger is now offering a "new and improved" post editor, which I am now using. The post I made today works just fine.

    Thanks again for sharing this Retweet code :)

    Faye @ GreenOrganicMama.com

  • gautam

    @Faye @ "GreenOrganicMama.com": Great you got it right on your own and you're right about the new post editor. I have already posted about.
    New Blogger Post Editor

  • Clueless_Mama

    I added this, but it is showing tweet and tweeted on the button. It will not let me retweet??? Any idea what is wrong? I would love your help. Thanks

  • gautam

    I think there may be problem with twitter because when you click on the retweet button you are redirected to twitter.com. Pls check again and tell me if it occurs again

    Recent blog:=- How to create a Facebook Page for your Blog/Website

  • Jamericanspice

    I'm having the same problem as Clueless_mama

  • gautam

    I am not getting you. what is the exact problem, i don't see any retweet button on your blog. Make sure you copy the code right.

    Recent blog:=- Win 100$ by leaving comments at TechZoomIn

  • Jamericanspice

    I try things out on my test blog before putting it on my regular blog, hence why you don't see it on my blog. It sends me to the tweetmeme error page each time I put the code in.
    TweetMeme Button Error – Redirect
    A TweetMeme button
    with an error
    This TweetMeme button is pointing at a website that is performing a
    redirect. The TweetMeme button doesn't support this behaviour; the URL
    it points to must be the final URL. (This can often be the cause of
    sites which require a login before viewing the website.)
    * If you are the administrator of the website, advice on fixing this issue can be found in our support FAQ.
    * If you are a visitor to the site, please contact the website's administrator to notify them of the problem.
    Click here to return to the website.
    Colette
    Mom Blogger
    calliemist@yahoo.com
    Blog: http://jamericanspice.blogspot.com/
    Twitter: http://twitter.com/Jamericanspice
    Keep praying, but be thankful that God's answers are wiser than your prayers!
    William Culbertson

  • gautam

    If you are getting a message like this, then i think there is some problem at tweetmeme's side, so you should contact @talktweetmeme so that they can help you out on this

    Recent blog:=- Win 100$ by leaving comments at TechZoomIn

  • TidyMom

    AWESOME! just added it! Thanks!

  • Brandon Hollenbeck

    Pretty simple! tweetmeme.com seems to be the easy way to go just need to go learn how to do the digg one next

  • Rohit S Prasad

    Brilliant! You've got it working on my page! Kudos to you considering i wouldve miserably failed at it!

    And I just love it when I see fellow Indians doing some good work out there!

  • Tjongolongo

    Thanks for the post. I'm new to blogging and am still fine tuning my blog with all kinds of interesting things. I've added the retweet button to my blog. It all works fine, I just have a problem with the placing of the button. It's aligned on the right, as I want it, however, I also have a Digg button on the right and now they are next to each other. I would like to see the Retweet button underneath the Digg button though. I'm sure there's an easy way to do this, but I don't know how. Do you know how I can add the retweet button underneath the Digg button on my blog? – Thanks!

  • gautam

    just putt a <br/> after the tweetmeme code and it will work really well.

  • bibzee

    Thank you!! This works great!!

    Recent blog:=- Amazing Leg Tattoo 2

  • Ashik

    HI thanks so much. I digged this on google. I got it great post.

    but added the retweet button fine, but i change the button to retweet my twitter user account. its NOT showing me my user accout RT useraccount. Still its showing me RT tweetmeme plz help

  • gautam

    Check out the update section, it will help you add your twitter username

  • Tjongolongo

    I tried that, but it pushes down my text as well as my buttons :(
    It aligns the buttons underneath each other but leaves a big gap underneath my blog title before the text begins. The text begins after the second button instead of underneath the title and inline with the buttons on the right.

  • gautam

    Make sure you are using float:right and padding, these will wrap the text around the buttons .

    Recent blog:=- Browser Toolbars for Blog communities

  • Seedbox

    Excellent, thanks for this :)

  • Pingback: Everything you ever wanted to know about Twitter | Charles Curle Design

  • http://thehomeofwine.blogspot.com Gen

    Trying to use this very helpful blog entry but can’t find the within my HTML code – even when expanded widgets.

    I’m using blogger and havent modfied the theme other than using one of the preset themes… is there another piece of code I should look for to place the retweet code?

    Thanks so much – great blog!

    • Gautam

      you can try out the retweet plugin

  • Pingback: La madre de todas las listas de aplicaciones Twitter « Camyna.com

  • http://news-world.us/pics arslion

    Hi..

    How are you ..i am unable to save template when i put this code in html..it gives this error

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

    • http://www.bloggodown.com Gautam


      arslion:

      Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
      XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

      This error occurs if you don’t copy the code properly and check whether corrected or not, you can also convert the code in xml ready format by using the Ad Code Converter for Blogger

  • Pingback: 50+ Awesome Twitter Tips to become a Pro | Blog Godown

  • http://smashdesign.blogspot.com SmashDesign

    Thanks for this post
    .-= SmashDesign´s last blog ..Hello world ! =-.

  • Pingback: La madre de todas las listas de aplicaciones Twitter « ENRIQUE SAAVEDRA

  • Pingback: La madre de todas las listas de aplicaciones Twitter (parte 1) « ENRIQUE SAAVEDRA

  • http://thebookinn.blogspot.com/ Natalie

    Well I keep trying to do this but I can’t get it to work.
    I use Blogger and tried the Ad Code Converter but my posts are blank. There is no tweet me button, nothing. What am i doing wrong?
    Thanks!
    .-= Natalie´s last blog ..Book Review : Giv The Story of a Dog and America =-.

    • http://www.bloggodown.com Gautam

      It may be because the font was italicized, try the same code and use it in your template. You don’t need to use the AD code converter.

      I have fixed it. It should work by now.

  • Pingback: How to add a Backtype retweet button to Blogger

  • http://www.chroniclesofdementia.blogspot.com Chuck

    Problem is, I used another template and I can’t find the piece of code. Possible to help?

    Otherwise, a very nicely outlined tutorial. Thanks a ton, buddy!

  • Pingback: Twitter Tips Ultimate Guide | The Social Media Guide

  • http://virtulobjeq.blogspot.com pcd2k

    Yes I’d like to try this trick since the present location only works on single page views, but I’d be much happier if could so twitch the code in its present location ?

    Many of these blogger tricks are difficult to carry out when the hint location can’t be found by we blogger’s, as Gen comments above. Possibly since the code technicians’ experience only ever shows him, ‘a clean tray of best validator results’ ?

    “Trying to use this very helpful blog entry but can’t find the correct place within my HTML code – even when expanded widgets.”
    .-= pcd2k´s last blog ..Nature by Numbers =-.

  • http://holadesign.blogspot.com/ monica of hola!design

    I keep getting this:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.

    How do I fix that?
    .-= monica of hola!design´s last blog ..New York through my lens =-.

  • http://promo-direct.blogspot.com Andy Mutt

    Thanks a lot, I was tired of finding this twitter button solution for my blog :)
    .-= Andy Mutt´s last blog ..Using drinkware products for Brand Advertising =-.

  • Andy

    the float right option: is not working in blogger draft as the retweet button is not clickable.

    I’ve narrowed it down to this line, but sure how to fix it. Align right works, but looks terrible. Float right means a button not working – see http://www.digitalurban.blogspot.com

    Any help would be great!

    Andy

  • http://ctips4u.blogspot.com Sudeep Acharya

    Ok thanks for your help i will keep small compact button on my blog.

  • http://awesome-tech.blogspot.com/ Hariharakumar

    there are some errors in “Update 2″ code in this post. See this post for more details http://aext.net/2010/06/quick-tip-gain-more-traffic-for-your-blog-using-tweetmeme-su-pr/

  • http://learnhackstuff.blogspot.com vikas ruhil

    when i do all your above given steps i done everthing as per your tutorial but i am getting this error & unable to save the error shown is “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “style”.”please help me what to i do

  • http://www.cashptc.cz.cc/ abhishek

    How To Use The Retweet using Adl.ly
    Please Reply Me back On my mail.

  • http://www.pclives.blogspot.com good

    nice trick and your blog is very good

  • http://cruisesurfingz.com Roy

    Brilliant, thank you!!

  • http://alightheartedtalk.blogspot.com Ranjith (SR) | A light hearted talk

    How do we add the tweet button that floats down as the users scrools down?

    • http://www.bloggodown.com Gautam

      That is a wordpress plugin, but I am sure that a person might have a workaround to install it into blogger

  • http://www.neverthelessnation.com pcd2k

    This button has never worked properly for my nevertheless blog. The gadget behaves incorrectly. I really need to remove it from my template, but get seriously lost every time I try to find the code in my template. Any suggestions would be mighty appreciated. Thank you.

    • http://www.bloggodown.com Gautam

      try to search using the keyword “tweetmeme”. You will be able to identify the script code

      • http://www.neverthelessnation.com pcd2k

        Thank you, Gautam, that helped and since I couldn’t find anyone to correct the code I have successfully located and deleted the widget.

  • http://www.ways-to-workathome.com Kathleen

    Perfect timing on this post. I have a blog that I’m trying to bring back to life, unfortunately I’m not too tech savvy. Sure hope I can get this re-tweet up.

  • rndtechnologies786

    Good blog.