Add retweet button (with counter) to every post
A few days ago I have added a Tweetmeme retweet counter to this blog. I thought I would share the process with you. The button does the same thing a Tweet This or a Google Buzz button does -share you individual posts, but with an obvious difference, it comes with a counter. The counter show a live count of how many times a post has been tweeted.
Clicking the button will tweet the containing post (in which the button is in). It won’t matter if you click it in home page, in individual/post page or in any other page, it will work all the same.
Now let’s proceed with the tutorial:
- Go to Dashboard > Design > Edit HTML.
- Back up your template.
- Tick the Expand Widget Templates check box on top right of the HTML window.
- Look for this code in your HTML:
<data:post.body/>
- Paste the following codes immediately below (after) it:
<!-- Tweetmeme retweet button Start --> <b:if cond='data:blog.pageType != "static_page"'> <div style='float:left;padding:5px 5px 5px 0;'> <script type='text/javascript'> tweetmeme_url = '<data:post.url/>'; tweetmeme_style = 'BUTTON_TYPE'; tweetmeme_source = 'TWITTER_USERNAME'; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script> </div> </b:if> <!-- Tweetmeme retweet button End -->
Update July 2010: Add conditional tag to prevent button from appearing on static pages.
- Configure button
- Choose your preferred button type by replacing
BUTTON_TYPE
(in line 6) with the corresponding code below.Retweet button Code leave blank or delete line altogether compact
- Replace
TWITTER_USERNAME
in line 7 with your own Twitter username. This line will add RT @YourUsername at the beginning of each tweet to acknowledge you as the source.
If you don’t want this, just delete line 7. - To also display the button in static pages, remove the conditional tag -code line 2 and 11.
- Choose your preferred button type by replacing
- Preview, you should see the button appear at the end each post.
- If you like what you see then Save.
- Enjoy!
51 comments to "Add retweet button (with counter) to every post"
Nice placement of your twitter and facebook option.
thanks...may add this widget to my blog :-)
haha :D cool :) thanks for sharing ^___^
@Anup@Hack Tutors
Thanks
@ohmywtf
@greenteacarm
Thank for dropping by guys. For more tutorials, click "All Posts" tab under the header.
I'm going to send this post to my hubby, ummm, I mean my tech guy. We've been wanting to add this function. Blogs are a continual work in progress, eh?
@Marly
"Blogs are a continual work in progress..."
you see that tech guy? Now don't say I didn't warn you! haha
thanks for the sharing :)
http://carahidup-baru.blogspot.com/
Thanks for sharing - really helpful.
Hi, I've tried this code and I keep getting this error message:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
Can you help?
@Raph
@GWS
You're welcome guys
@Elaine
Make sure you do not leave out the < /div> tag.
Why i click it, its retweet back to me? But yours is not? I click yours and it looks like promoting the link.
@Mr K
To remove the RT@YourUsername prefix, just delete code line 6.
Good article, Thanks :)
I love your buttons off to the side... what is the code for configuring them that way? I have one blog where I would like to hang the bottons off the left and another off the right but everything I find includes it within the post.
Thank you in advance for any help you can offer!
@Everyday Kathy
A tutorial for that is coming out soon.
Hello - thanks for this - it is awesome and works just fine...apart from the fact that it moves the last line of my text in each post slightly to the right to accommodate the 'tweet this' button. I really want it only to appear after all my writing is finished, so that I can have everything lined up along the left-hand margin.
Could you please help?
Many thanks.
@BioGal
Easy...remove float:left; in code line 2.
Marvellous - it is fixed. Thanks very much; that was a very speedy reponse!
Hi, I've gotten so many helpful tips for my site here!
I added retweet and FB buttons to go to the bottom of each post, but they are also at the bottom of my static pages. How do I get them off the bottom of the static pages?
Thanks.
@Natasha
Thanks for alerting me. I revised the code. Please update yours.
Worked perfectly! Thanks.
This is fantasic! Thank you! I'm so close...yet so far away! I managed to add both the Twitter and the Facebook. Removed the float left so it wasn't interfering with my text. But, adding them has pushed my post labels and comments underneath my Linked Within widget and I have no idea how to get them back above it. Can you help me get the comments and labels back above the other widget?
http://couponconnoisseur.blogspot.com/
@The Coupon Connoisseur
Are you sure the labels were on top of linkwithin before?
Your (Aug. 4) cached page shows otherwise.
@Greenlava...I guess they weren't! I there a way to move them above it? I've tried everything I can think of but I'm afraid of making it worse!
@The Coupon Connoisseur
There is a way to move it above the post-footer, but I'm not going to write it here.
Wait for a post coming out in a few days.
how to put retweet button under facebook share button like this site?
@Anonymous
Add clear:both; to the div styling in line 3, like this:
[div style='float:left;padding:5px 5px 5px 0;clear:both;']
Hi, thanks for the this! I've installed it and everthing works fine except for the retweet button, it gives the '?' sign instead of numbers.
http://www.pigpigscorner.com/
thanks ! amongst all the ones i've tried ,only your instruction work! thanks again!
xoxo
MrsM
Great (and simple for me, in all of my technical ineptness, lol) tutorial, thanks for sharing!
how can choice the button type from where
@chris
Explained in step 6.
How can I add the facebook "like" button next to the "twet" button so that they are side-by-side, rather than on top of each other?
This post has been very helpful! Thanks!
I added your tweet button without any trouble, but how should I tweak it so that the "Tweet" button is the usual blue twitter icon (like what you have on the left) and not a green button (which is the result of your posted code)?
On the twitter website, they provided the following code, but the trouble I have with this is that it tweets the title of my blog, no the title of my post. How can I fix that?
Thanks so much for your help!!!
Code from twitter site mentioned above:
[a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="redfelfel"]Tweet[/a][script type="text/javascript" src="http://platform.twitter.com/widgets.js"][/script]
@Suzan Riazi
1. The default code for the Like button set the width (of button area) to 450px That usually occupies the entire width of post area, thus pushing itself or the next button to the next line. To fix this, you need to reduce the width (try 60px). Look at the code carefully, you'll see the width at 2 different places. Change them both.
2. Read this post: Add Twitter tweet button to Blogger posts
The instructions in your other post worked perfectly! Many thanks! For your first comment about the Like button, when I changed the width to 60, it moved the twitter button up, but covered part of the Like button (counter box). Any suggestions?
@Suzan Riazi
Increase the width. Try different values until you get it right.
Thanks a lot for posting information about the retweet button, it was really very useful.
Right now I'm having problems on how to change the colour from Green to the normal Blue like the one on this site.
@Praiz
Oh that is an official Twitter tweet button.
how to make you page show both facebook fan box and facebook share button together???? I desperately trying that..
if i install the sharer button, my fan box wont appear..
help me...
@diL
That shouldn't be a problem. Follow these tutorials:
Add a Facebook Like/Fan box to blogger and Add Facebook share button with counter.
Thanks for the information. My share buttons have shifted the title of my post to the right. How can i separate them?
@Grace Ihejiamaizu
Replace this code in Facebook Share button:
[div style='float:left;padding:5px 5px 5px 0;']
with this:
[div style='display: inline-block; height:67px; padding:5px 5px 5px 0;']
Leave the Tweet button code as it is.
Great.Great Work
thanks for sharing this.i already apply this for my low-profile Healthy Beautiful Blogi'm ur regular follower. u did a great job, keep it up.
Thank you. Very helpful instructions. Any ideas as to how I change the colour of the button from green to blue.
@Katerina
You can't change the color of Tweetmeme retweet button :( But fortunately there is another button that does the same thing -the official Twitter tweet button, and it's blue :)
You know what your site present things and make things easy :) thnx
thank you for this tips. Now I can use in my blogger.
Thanks
Thank you for sharing the tweetmeme code.
seo services
Post a Comment
We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.