Add a Tweet It or Retweet Button to Your Blog

Along with Digg It and Stumble It, one important social networking button most people search for, is of course a Tweet It or a Retweet button.

In this tutorial you may select any or both of them.
The Retweet button is available in two different sizes, to add any of the buttons, you need to follow these instructions:

Log in to Blogger, go to “Layout” -> “Edit HTML” and mark the “Expand Widget Templates
Find (CTRL+F) this code in the template:

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

And immediately BELOW/AFTER that, paste the code for the widget (copy whichever code you like from the post below).

A bigger “Digg It” like button:

Code:

<script type=”text/javascript”>
tweetmeme_url = ‘<data:post.url/>’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”> </script>

Add a smaller one:

Code:

<script type=”text/javascript”>
tweetmeme_style = ‘compact’;
tweetmeme_url = ‘<data:post.url/>’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

Although these buttons look quite professional but when visitors use these buttons to Retweet, then the RT will belong to @TweetMeme and not to you (author of the article).
So I would prefer adding a “Tweet This” button, instead of Retweet, where you have the additional advantage of using any twitter image/icon.

Here’s the code you need to add to your template, for a Tweet This button:

<a expr:href=’&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’><img alt=’Tweet It!’ src=’http://i45.tinypic.com/2wdaoad.jpg’ width=’64’/></a>

And it will be displayed like this:

Twitter

You may change the twitter icon in the above code. You can freely use these free twitter icons:

| |

Follow @BloggerStop at Twitter for more such updates !

*UPDATE: Now there’s another Retweet button available to you which will allow your readers to tweet your posts and it will show RT @YOUR_TWITTER_PROFILE but it will also display (via @Tweetmeme)

Here’s the code for this widget:

<script type=”text/javascript”>
tweetmeme_url = ‘<data:post.url/>’;
tweetmeme_source = ‘YOUR_TWITTER_ID’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

Replace “YOUR_TWITTER_ID” with your own Twitter profile, in the code above.

UPDATE 2:
To show these widgets only in published post pages and NOT in homepage, add the code like this:

<b:if cond=’data:blog.pageType == “item”‘>
CODE FOR RETWEET or TWEET WIDGET
</b:if>

45 thoughts on “Add a Tweet It or Retweet Button to Your Blog

  1. I added this to my blog!!

    But I used div align right to align it

    I am still trying to put it right after the autor text (in the same line) :S

  2. Hi Dav7,

    I have visited your blogs, and found the tweet buttons at bottom of posts, what I suggest is to either use bigger button, or place the button at somewhere in the top area, as it is not visible at the bottom…

    Regards
    Sai

  3. Welcome buddy !

    @ Everybody,

    As mentioned by Arham,
    If you want to place the widget to the right side, then you need to modify the codes above like this:

    CODE 1:
    <script type="text/javascript">
    tweetmeme_url = '<data:post.url/>';
    </script>
    <div style="text-align: right;">
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"&gt; </script>
    </div>

    CODE 2:
    <script type="text/javascript">
    tweetmeme_style = 'compact';
    tweetmeme_url = '<data:post.url/>';
    </script>
    <div style="text-align: right;">
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script&gt;
    </div>

    CODE 3:
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><div style="text-align: right;"><img alt='Twitter' src='http://www.gigaimage.com/images/cqujmnn2s4ribveury7.gif'/></div></a&gt;

    Regards
    Sai

  4. I added the retweet button to my blog, and it looks right. But I am pretty sure it is not working properly. I know my lasted post has been retweeted @tweetmeme, but the counter still says 0. Any ideas what might be wrong?

  5. Hello,

    You need to add a small code to the above code, like this:

    <b:if cond='data:blog.pageType == "item"'>
    CODE FOR RETWEET/TWEET IT BUTTON
    </b:if>

    Add that bolded code, and the buttons will be displayed only in the articles pages and not in the homepage.

    Regards
    Sai

  6. Thanks Divya Sai,
    You Rock! I tried using Amanda's from another goole search, it didn't work. Then I found you. Thanks, it's working fine and I more than appreciate it. I understand what Gil is saying about the color/background of widget. Is white but I'll take it over nothing for now. If you need anything holler by visiting and let me know if I can do anything! Lee

  7. i got a quick question how can i get buttons like these and digg and facebook connect to come out under each other they keep coming out horizontaly and i want them to come out vertically at the right of the post thanks for your help

  8. You mean the buttons should be displayed one below the other?

    And tell me what all buttons you exactly want, like 1. twitter 2. facebook 3. digg etc. (in the exact order).

  9. If you are using the second method (custom buttons), then You cannot add a shortner.
    But if you are using the tweetmeme button, then of course they have that option to use any of the famous link-shrtners in your code.

  10. @Divya Sai
    Thanks for the post. I tried to place the button in the same line of date and notes in my Tumblr posts, but the button is aligned upwards and not on the same line. Would you give me any advice?
    Thank you very much

  11. I want to add some text like 'tweet me' with image . What change should i make in code. That will suit if i change icon to twitter bird. i also want to change its height. I saw width in code, but no height. ( i am not talking about tweetmeme)

  12. can you tell how to post tweeter button as its in your blog when i click on tweeter buton with your given codes it only create short link of the post it does not create title of the post as in your tweet button that you are using on this site.

Leave a Reply

Your email address will not be published. Required fields are marked *