April 19, 2009

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 comments:

Arham said...

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/

Divya Sai said...

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

Regards
Sai

Arham said...

k thanx for replying

Dav7 said...

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

Divya Sai said...

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

eyeshoot said...

Fantastic, thanks for making it so easy!

Divya Sai said...

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

Elephunk said...

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

Elephunk said...

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?

Divya Sai said...

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.

Elephunk said...

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

Bibby said...

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?

Gil Bouhnick said...

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

Gil Bouhnick said...

Sorry, here's the link:
MobileSpoon

Divya Sai said...

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

herroyalbleakness said...

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/

Divya Sai said...

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

Lischer said...

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

cadilacjax said...

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

HR said...

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

Divya Sai said...

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

Animal Eater said...

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

Animal Eater said...

not on my this blog ragnarokonlinehome

but on this blog right corner check it Good Jokes

Sai - Blogger Widgets said...

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.

Good Jokes said...

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

Animal Eater said...

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

honeyloumay said...

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

Ethel Grace said...

super cool! thanks!

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

Cola said...

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

Jarrett Bellini said...

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?

Sai - Blogger Help said...

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.

dabo (or david) said...

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

Sai - Blogger Widgets said...

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

dabo (or david) said...

it works! thank you very much! =)

Citizentoni said...

@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

Divya Sai said...

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

James said...

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

Divya Sai said...

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

Fahadkalis said...

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.

Sai - Blogger Widgets said...

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

Riyas said...

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)

Sai - Blogger Widgets said...

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>

matcargo said...

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

samey said...

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.

Surabhi Surendra said...

Hi,

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

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy