Add a Tweet It or Retweet Button to Your Blog

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:

Add a Tweet It or Retweet Button to Your Blog

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:

Add a Tweet It or Retweet Button to Your Blog

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:

Add a Tweet It or Retweet Button to Your Blog | Add a Tweet It or Retweet Button to Your Blog | Add a Tweet It or Retweet Button to Your Blog

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>

Leave a Reply

45 Comments on "Add a Tweet It or Retweet Button to Your Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
Arham
Guest

dude i am using this in my blog but i want it on right side as it is coming on left side

u can c ur self

http://soft-tricks-by-arham.blogspot.com/

View Comment
Divya Sai
Guest

Hi Arham,
Keep the second <script> tag within span tags and with alignment = right.

Regards
Sai

View Comment
Arham
Guest

k thanx for replying

View Comment
Dav7
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
eyeshoot
Guest

Fantastic, thanks for making it so easy!

View Comment
Divya Sai
Guest

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

View Comment
Elephunk
Guest

Awesome! Thanks for explaining how to do this so clearly.

View Comment
Elephunk
Guest

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?

View Comment
Divya Sai
Guest

Hi…here’s what all i could get from their FAQ page (http://help.tweetmeme.com/2009/04/15/button-faq/)

After I click the ReTweet button, the tweet count doesn’t increaseIt can sometimes can time for a tweet to filter through Twitter to Tweetmeme, although we do try to reduce this delay as much as possible. The button is also cached (”remembered”) for a few minutes before it updates.

View Comment
Elephunk
Guest

Thanks Divya Sai. I’ll learn to be patient and wait for the retweets to load 🙂

View Comment
Bibby
Guest

I put that Tweet this button on my blog. http://www.bibby3.blogspot.com When i click tweet this button, it doesn't recognize Cyrillic Alphabet What should i do? Can u help me out?

View Comment
Gil Bouhnick
Guest

Thanks! Using it now in my blog and it seems to be working fine, just one small problem with the white back color…

http://mobilespoon.blogspot.com

View Comment
Gil Bouhnick
Guest

Sorry, here's the link:
MobileSpoon

View Comment
Divya Sai
Guest

Nice informative blog Gil, but I couldn't get your problem, can you plz rephrase your query?

View Comment
herroyalbleakness
Guest

how do i go about putting this just on script on my posts? my theme is something like my posts are organized in boxes… but when i put this nice twitter script on, it appears even on the front page… i took it down already coz it make my blog's home page "noisy". i wish i can just put it on the article page… sigh. help pls!

http://herroyalbleakness.blogspot.com/

View Comment
Divya Sai
Guest

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

View Comment
Lischer
Guest

This is good. please take a time to visit kennylischer.blogspot.com

View Comment
cadilacjax
Guest

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

View Comment
HR
Guest

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

View Comment
wpDiscuz