How to add Retweet button to blogger
71 COMMENTS
|
|
|
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:
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='<data:post.url/>';
</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='<data:post.url/>';
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='<data:post.url/>';
tweetmeme_source ='Your User Account';
</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='<data:post.url/>';
tweetmeme_source ='Your_Twitter_Account';
tweetmeme_service = 'Your-url-shortener';
</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!!
- Everything you ever wanted to know about Twitter | Charles Curle Design
- La madre de todas las listas de aplicaciones Twitter « Camyna.com
- 50+ Awesome Twitter Tips to become a Pro | Blog Godown
- La madre de todas las listas de aplicaciones Twitter « ENRIQUE SAAVEDRA
- La madre de todas las listas de aplicaciones Twitter (parte 1) « ENRIQUE SAAVEDRA
- How to add a Backtype retweet button to Blogger
- Twitter Tips Ultimate Guide | The Social Media Guide











May 3, 2009 - 12:15 pm
nice tuto.. maybe I will try it because.. you know I not really get into this when it involving coding
May 24, 2009 - 5:19 pm
EXELLENt! It was the easiest way to add a button .
THANX a lot!
May 30, 2009 - 10:15 am
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!
June 1, 2009 - 4:02 pm
Awesome…Thank you very much.
Just implemented this code on my blog
http://learnitfast.blogspot.com
Thanks again.
June 4, 2009 - 6:48 am
Thanks a bunch for the update on changing the @tweetmeme to @EricUngs.
Much appreciation!!
June 4, 2009 - 2:52 pm
@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.
June 6, 2009 - 10:36 pm
Is there a way to modify this to work with an old Blogger.com template which doesn't have the widget thing?
June 7, 2009 - 10:17 am
@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
June 8, 2009 - 2:15 pm
this is awesome. thanks for the code!
June 30, 2009 - 7:48 pm
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/
June 30, 2009 - 8:26 pm
@samfunPic ya i've tried to make it as easy as possible
June 30, 2009 - 8:52 pm
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!
July 2, 2009 - 1:42 am
Thanks! This is awesome and very useful – especially the bit about changing the default @username
July 4, 2009 - 12:07 pm
Thanks for the code. This was extremely helpful.
July 9, 2009 - 10:28 pm
Do you save or run when you download full template??? I tried running and I got an XML error. Any help??
Thanks,
Mignon
July 10, 2009 - 7:53 am
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
July 21, 2009 - 12:58 am
Thanks ^^ Nice Stuff this Widget
Ps. it worked great
July 21, 2009 - 2:00 am
Thank you so much! It worked perfectly, better instructions than the tweetmeme site.
July 29, 2009 - 2:28 am
I agree with Raptia.
August 3, 2009 - 4:04 pm
best tutorial with all updates…thankyou so much friend…
I have implemented in my blog
http://www.freedownloads-arunenigma.blogspot.com
August 4, 2009 - 4:15 pm
Thanks all. I will update it when there are updates from tweetmeme
August 5, 2009 - 1:40 am
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
August 5, 2009 - 10:02 pm
Great and useful post, Gautam. Thank you.
August 7, 2009 - 10:45 am
My button doesn't seem to be counting the retweets properly. Anybody else have this problem?
August 19, 2009 - 4:47 am
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!
August 19, 2009 - 11:26 am
Can you cite the problem with an image because i can't see a retweet button in your site.
August 22, 2009 - 1:01 am
Sorry… the URL I'm referring to is at http://marketing-expert.blogspot.com. Thanks Gautam!!!
August 23, 2009 - 5:47 pm
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)
August 23, 2009 - 11:47 pm
@lauren: Lauren i am too having this same problem, but i think this is an internal problem of tweetmeme.
August 26, 2009 - 12:55 am
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
August 26, 2009 - 1:56 pm
@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
September 3, 2009 - 9:03 am
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
September 5, 2009 - 12:52 am
@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.
September 5, 2009 - 2:56 am
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
September 6, 2009 - 5:24 am
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
September 6, 2009 - 7:03 pm
@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.
September 6, 2009 - 7:33 pm
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
September 6, 2009 - 11:14 pm
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
September 8, 2009 - 12:26 am
@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
September 10, 2009 - 6:35 am
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
September 10, 2009 - 7:29 pm
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
September 21, 2009 - 11:20 pm
I'm having the same problem as Clueless_mama
September 21, 2009 - 11:26 pm
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
September 22, 2009 - 7:39 am
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
September 23, 2009 - 12:11 pm
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
September 27, 2009 - 9:02 pm
AWESOME! just added it! Thanks!
September 29, 2009 - 5:17 am
Pretty simple! tweetmeme.com seems to be the easy way to go just need to go learn how to do the digg one next
October 15, 2009 - 11:40 pm
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!
October 23, 2009 - 12:19 am
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!
October 23, 2009 - 10:01 pm
just putt a <br/> after the tweetmeme code and it will work really well.