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>

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

45 comments

Write comments
April 20, 2009 1:11 AM delete

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/

Reply
avatar
April 20, 2009 5:38 AM delete

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

Regards
Sai

Reply
avatar
April 21, 2009 8:25 AM delete

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

Reply
avatar
Divya Sai
April 21, 2009 11:48 AM delete

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

Reply
avatar
April 29, 2009 12:00 PM delete

Fantastic, thanks for making it so easy!

Reply
avatar
April 29, 2009 12:15 PM delete

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"> </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>
</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>

Regards
Sai

Reply
avatar
April 29, 2009 3:46 PM delete

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

Reply
avatar
April 30, 2009 2:12 PM delete

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?

Reply
avatar
April 30, 2009 2:42 PM delete

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.

Reply
avatar
April 30, 2009 4:35 PM delete

Thanks Divya Sai. I'll learn to be patient and wait for the retweets to load :)

Reply
avatar
July 20, 2009 3:58 AM delete

I put that Tweet this button on my blog. 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?

Reply
avatar
August 01, 2009 4:50 PM delete

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

Reply
avatar
August 02, 2009 5:37 AM delete

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

Reply
avatar
August 08, 2009 3:15 PM delete

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/

Reply
avatar
August 08, 2009 3:37 PM delete

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

Reply
avatar
Lischer
August 26, 2009 3:05 AM delete

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

Reply
avatar
November 21, 2009 3:38 PM delete

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

Reply
avatar
HR
February 02, 2010 1:03 AM delete

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

Reply
avatar
February 02, 2010 7:27 AM delete

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

Reply
avatar
April 21, 2010 3:04 PM delete

hey how to add buttons in 1 line (my buttons coming 1 below another)

Reply
avatar
April 21, 2010 3:06 PM delete

not on my this blog ragnarokonlinehome

but on this blog right corner check it Good Jokes

Reply
avatar
April 21, 2010 11:15 PM delete

If you are talking about that green drop-down menu in your blog, then just drag and place that widget either below your header image or above the body-posts widget. That's it.

Reply
avatar
April 22, 2010 10:19 AM delete

about that green widget... i dont have any place there given to drop..

but i was talking about another blog Good Jokes

there you can see twitter button and feed burner button in left side bar ..its one below another ..how arrange it in 1 single line instead of one below another.

Please reply my another comment in your

http://bloggerstop.net/2009/01/create-customized-side-menu-in-your.html

btw i am Animal Eater

Reply
avatar
April 22, 2010 10:23 AM delete

ok that green widget problem i solved

but that button problem mentioned above still not solved...help to solve it

check blog goodjokesonly.blogspot.com

Reply
avatar
April 28, 2010 7:58 PM delete

thank you nice post =) it's so easy to follow

Reply
avatar
June 01, 2010 5:58 AM delete

super cool! thanks!

BTW, drop by http://daydreamstars.blogspot.com/ anytime! ;)

Reply
avatar
June 08, 2010 3:36 PM delete

Thanks for sharing this. I'm using it on http://splashofcola.blogspot.com

Reply
avatar
June 10, 2010 1:42 PM delete

Great code! Is there anything I can add to or change about it so that when the url appears in twitter it will have been made shorter?

Reply
avatar
June 10, 2010 2:14 PM delete

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.

Reply
avatar
June 12, 2010 5:50 AM delete

hi there. my name is david.

it seems I can't add the "retweet button" on my blog: http://imagipod.blogspot.com

I am using the new Template Designer feature of blogger, but I can't find: div class='post-header-line-1' or even the data:post.body. I hope you can help me.

Thank you in advance. Warm regards to you. =)

Reply
avatar
June 12, 2010 8:31 AM delete

Make sure that you have marked the "Expand Widget Templates" tick box, and you'll find that code in your template.

Reply
avatar
June 13, 2010 12:15 AM delete

it works! thank you very much! =)

Reply
avatar
June 20, 2010 6:28 AM delete

@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

Reply
avatar
June 20, 2010 6:54 AM delete

Just now replied to a similar query, hope it will solve your query too:
http://bloggerstop.net/2010/04/add-stumbleupon-buttons-with-counter-to.html#c4120144178627868196

Reply
avatar
July 07, 2010 2:46 AM delete

Hi, I paste the script for tweet button. take a look...

http://justimaginnow.blogspot.com/

but i want to add below/left the comments or right after the sharing button means i don't want to show below the sharing button can you tell me how it'll work

Reply
avatar
July 10, 2010 3:11 PM delete

Couldn't get your query.....where exactly do you want the button to be placed? is it after the post?

Reply
avatar
July 30, 2010 10:09 AM delete

I can't add the "retweet button" on my blog: http://fahadkalis.blogspot.com

I am using the new Template Designer feature of blogger, but I can't find: div class='post-header-line-1'
It search till (div class=')
I also check the expand widget template.

Reply
avatar
July 30, 2010 10:13 AM delete

Find this code in your blog:
<data:post.body/>

And add the new code immediately ABOVE it (or BELOW it, if you want the retweet button BELOW all posts).

Reply
avatar
August 04, 2010 12:10 AM delete

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)

Reply
avatar
August 04, 2010 10:34 AM delete

Simply replace the word "width" with "height" and put its value in the code.
And to add your text, change this code:
<img alt='Tweet It!' src='http://i45.tinypic.com/2wdaoad.jpg' width='64'/></a>

to something like this:
<img alt='Tweet It!' src='http://i45.tinypic.com/2wdaoad.jpg' width='64'/><br/>Tweet Me</a>

Reply
avatar
October 04, 2010 4:04 AM delete

thank you, it work to my blog as i need it

Reply
avatar
November 15, 2010 3:14 AM delete

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.

Reply
avatar
March 20, 2012 1:22 PM delete

Hi,

I just used the tweet buttons on my blog.. thank you for this post. :)

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon