Official Twitter Share Button (Tweet Button) for Blogger

Official-Twitter-Share-Buttons-for-Blogger
@Twitter has now officially released new Sharing Buttons with counter(Tweet Button). The button comes in three styles and has a new URL shortener(t.co).  The tweet button will show how many times your post has been shared on twitter.

The main advantage of the Tweet button is that it will let the reader to follow you(and a related account) after he tweets your post.If you have a wordpress blog, then use the Wordpress Tweet Button Plugin

To install the new tweet button on blogger, Follow these steps
1 . Configure the Tweet Button using this Simple Installer(Code and Demo will be updated according to the details that you provide here)

Demo:

Button Type:
Button Location:
Syntax of the Tweet:
Your Twitter User Name
User name of Related Twitter account
Description of the Related Account
Lanuage of the Button
Display
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='bloggerplugins:Tutorials and Widgets for Blogger' data-count='vertical' data-via='bloggerplugins'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

2.Copy the generated Code

3. Login to your Blogger Dashboard and Navigate to Design > Edit HTML 

4. Click on the Check box which says “Expand Widget Templates”

5. Now Look for

<data:post.body/>
and immediately above it paste the following code snippet(after proper editing)

6.Save your template and now you should see the twitter button near each of your blog posts.

Something more about the Tweet Button

124 comments :

  1. Thanks, the counts are not showing on your post?

    ReplyDelete
  2. yes, finally I think to add twitter button on my blog

    ReplyDelete
  3. @DarkUFO - not sure what was wrong then. its showing up fine now :)

    ReplyDelete
  4. Works perfectly and I love the ability to display the blog post title using: expr:data-text='data:post.title' <--- fantastic!

    Implemented now on http://Rich.Kavanagh.IT

    I'll copy this over to my other blog sites today too.

    Thanks again!

    ReplyDelete
  5. i wanna added it, but not compatibel with my theme :(

    ReplyDelete
  6. Is there a way to place the tweet button at the bottom of the post?

    ReplyDelete
  7. Thanks ... I have done with it...

    ReplyDelete
  8. I have done things right but once i refresh my page the tweet count comes 0 why ??

    ReplyDelete
  9. @Bobbi Lewin - place the code below instead of putting it above it.
    @Anand - seems like the tweet button is little slow in updating the real count.

    ReplyDelete
  10. Thanks so much for this post, very easy to follow.
    One suggestions for us noobies, suggest to copy the using the find function. so much simpler than looking.

    ReplyDelete
  11. Does one need tweeter account for this button,
    coz tweeter is blocked in my university

    ReplyDelete
  12. @A.J - there is no need for you to have a twitter button. If twitter is blocked at your university, you wont see the button at your university.It will be available to those who view your blog from elsewhere.

    ReplyDelete
  13. I'm having an issue where the button is appearing but not working on any browser apart from ie8. Any ideas http://diaryofaledger.blogspot.com/

    ReplyDelete
  14. Finally! this is great! thank for this one :)

    ReplyDelete
  15. hey thanks for this i used it on my blog,it looks and works cool.happy tweeting and blogging.

    ReplyDelete
  16. i put this on and it does send the tweet. But the count goes back to "0" if I log out and then go back in to check it. Any idea what I'm doing wrong so it will total the tweets?

    thanks

    ReplyDelete
  17. Thank you, this was very helpful.

    ReplyDelete
  18. Thanks a lot!
    http://cre8tivfacts.blogspot.com/

    ReplyDelete
  19. It works well, thanks for your useful articles....

    ReplyDelete
  20. Thanks, but I have a problem! The apostrophes ' and " in post titles are replaced with a / and the rest of the title gets cut off .. is there any way to correct it?

    ReplyDelete
  21. Works for me in IE8, but not in Firefox 3.6.8 - the button shows, but it doesn't highlight on mouseover and I can't click it.

    ReplyDelete
  22. Nice info. I am searching for this code for a long time.
    Have to try this in my blog stuffadda.blogspot.com

    ReplyDelete
  23. Thanks you, but it appear at the bottom of my post. I try to put it after div class='post-header-line-1' to make it appear at top of my post, but it's not functioning...is there any way to solve this?

    ReplyDelete
  24. Quantum Tiger, the tweet button doesn't work in Firefox 3.6.9 either, when you mouseover, cursor doesnt change.

    ReplyDelete
  25. hI , my twitter share button also not count, always goes back to 0, please advise how to fix it.

    ReplyDelete
  26. Finally! I've been using TweetMeme, which is a little Blogger unfriendly all this time and it lacks the ability to edit titles. I

    This button works better than I thought!

    ReplyDelete
  27. dear all,

    my tweet button always showed up in the bottom right of the page besides i setting for show up at the upper right corner of the page,
    why?? any ideas??

    ReplyDelete
  28. I love this feature and was able to use your own tweet button to tweet about something on here using Firefox 3.6.10 but for some reason it doesn't work on my own blog :(
    http://jenaissancedesign.blogspot.com/

    any ideas why I was able to use yours and not my own? (even after logging out of Google and visiting?)

    ReplyDelete
  29. hi, may i know how to add in my blog title in the tweet as well?

    "expr:data-text='data:post.title + data:blog.title' "

    but it stick together, how to seperate them ? O,o

    ReplyDelete
  30. Right! Figured it out, I needed to make sure my code was inside the div class='post-body entry-content' tag.

    :D

    ReplyDelete
  31. Awesome post! Thank you so much for sharing. This entire Blog is fantastic!
    Thanks for the great post, i continue to learn from your advice!

    ReplyDelete
  32. my tweet button goes back to zero when the page is refreshed and does not keep count. How do I fix this?

    ReplyDelete
  33. I can't get it to work- I'm pasting it directly before

    Then I save the template and view the blog, and nothing's different.

    Can anyone help me out?

    ReplyDelete
  34. anyone know why this wouldn't work in firefox and safari, but work in IE?

    ReplyDelete
  35. It didn't work for me and I followed all the directions. It doesn't show up in the latest Firefox and Safari browsers.

    ReplyDelete
  36. I love your blog, I relly do,. The way talked here is very informative and also very awesome post and thanks to share this article..
    GOOD JOB...

    ReplyDelete
  37. how to change tweet button image ?

    can you help me ? thanks

    ReplyDelete
  38. Great! Thanks for this...
    Have added it to my site: http://blatentlyblunt.blogspot.com

    ReplyDelete
  39. Where should we place the code so that it appears for each blog post in the footer? I placed it after : [div class='post-footer'] The problem is that it tweets the blog in general, not the specific post. Do I need to change part of the code, or change its location?

    Code used:
    [a class='twitter-share-button' data-count='horizontal' data-via='redfelfel' href='http://twitter.com/share']Tweet[/a][script src='http://platform.twitter.com/widgets.js' type='text/javascript'/]

    Thanks for your help!

    ReplyDelete
  40. Wow! At last a complete, simple and easy to use tutorial. Thank you very much!

    I have been trying to get the twitter button on my blog for some time now and I tried different sites that help me do this and I have to say that yours is the best!

    Congrats and keep up the good work! :)

    Thank you!

    ReplyDelete
  41. Slows down page loading ridiculously and has not been used by my readers. I do not recommend this. A blogger is better off using the new LinkedIn button, which also includes a tweet function.

    ReplyDelete
  42. the button isn't showing up. The fb share button is, but twitter isn't. I added my twitter username in the "username of related twitter account" field ... hope that isn't wrong?

    ReplyDelete
  43. everything works great except this... if I have an apostrophe ' in the title of my post, the app cuts off the title of my post when "Sharing" it to Twitter.

    example...

    Post title "It's A New Year" ends up being RT'd like this "RT @TheShitzizle It\ http://t.co/hbIpx8"

    or

    Post title "What's the Point?" ends up being RT'd like this "RT @TheShitzizle What\ http://t.co/CdCYxvi"

    How do I fix this!?

    ReplyDelete
  44. Hey Guys! I also had trouble implementing the Tweet Button! Just ignore the following beginning and ending code:

    &

    Only copy paste the rest of the code above!

    I implemented the code on my website www.musicktv.com and it looks absolutely stunning! Check it out!

    Peace!

    ReplyDelete
  45. Hi, thank you for this. I used it on my blog but the tweet count also resets back to zero, is there any workaround for this? Thank you very much and hoping for your timely response. :)

    ReplyDelete
  46. it didnt work for me also in my programming blog even after adding the code properly ...im using firefox

    what to do? there are two <data:post.body/> codes in blog, should we add the code after <data:post.body/> or after <data:post.body/></div>

    do confirm proper pls

    www.webprogrammingscripts.blogspot.com

    ReplyDelete
  47. It Worked Like a Charm For Me, Thanks A lot

    ReplyDelete
  48. you website help me find what I want, thank you for sharing helpful info.

    ReplyDelete
  49. Trying to get the button on posts only and to the bottom right. Blogger is telling me to "" the b:if and after doing that the template still will not save

    ReplyDelete
  50. aha this is what i am looking for.... thx buddy!!! good luck for ya... :D

    ReplyDelete
  51. Wonderful. Thanks for the step by step useful information. Your post makes it very easy to install a tweet button. And I also feel that this option should be available in twitter itself.

    ReplyDelete
  52. @rai - you have to immediately insert it after . First, it didn't work for me as well because I chose "display on pots pages only". Then I changed this to "display everywhere than static sites" - no it works perfectly. The share button is beeing displayed after every blog post, but not on other sites like "imprint"... Hope, this helps...

    ReplyDelete
  53. Hi Aneesh,

    I am implementing several of your codes for share buttons - the yare really great!!! But I would like to have them all in one row - side-by-side. Unfortunately, this doesn't work, they are beeing displayed beneath... Can you help? Thanks in advance!

    ReplyDelete
  54. I wrote my own html and it works fine on firefox. The code generated by twitter (http://twitter.com/about/resources/buttons) doesn't work.

    It might be that target="_blank" is missing in the code...

    ReplyDelete
  55. Thanks for this post, it helped a lot.

    ReplyDelete
  56. Thank you for this nice tool. I really need it :)

    ReplyDelete
  57. Fantastic. Works like a champ. Thank you!

    ReplyDelete
  58. hi, nice widgets..
    but the tweet seems to reset to zero when refresh. any chance to amend it? thx

    ReplyDelete
  59. Thanks for this. It makes all of us amateurs look like ninjas

    ReplyDelete
  60. Don't drop comments just to add your link here.

    ReplyDelete
  61. Hello, I tried adding the code, but nothing happens when I update the blog? How can I fix this?
    Linn

    ReplyDelete
  62. Can you help me? it doesn't show on my blog...

    ReplyDelete
  63. Hi! Your posts has been very helpful to me. But I had a problem with this twitter widget. I can't seem to find the problem. When you view the home page with several posts, each has its own share and tweet buttons. But some twitter buttons don't can't be clicked. I noticed that this usually happens when my post title is more than one line. Hope my explanation made sense. :)

    ReplyDelete
  64. I just checked it again and I think it only happens on two of my 3 blogs.. I think I messed up the codes.. not that good at codes. Maybe I'll try copying some body codes from the working blog to the other blogs

    ReplyDelete
  65. Finally I think I got it right.:) Your site is the best!

    @Nadine Klingen Hi! I encountered your problem and What I did was was put everything on a div and float the div to the right. Then the facebook iframe float it to the left.

    @Ace I also encountered the whole blog becoming so slow. But when I placed the iframe of facebook first before the twitter, It went back to normal. I don't if that's just a coincidence

    I also encountered not to be able to click the share buttons. But I switched the "like" to recommend and it seems to work fine now.

    My head hurts debugging these problems. below is my code, maybe it would be helpful to you guys..:) BTW my blog is theapplecorner.blogspot.com and gottotravel.blogspot.com. Maybe you'll find more ideas there. All of the widgets and gadgets there I learned from bloggerplugins..:)

    (div style='margin:4px;float:right;')
    (iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=box_count&show_faces=false&width=100&action=recommend&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='float:left;border:none; overflow:hidden; width:90px; height:65px;'/)

    (a class='twitter-share-button' data-count='vertical' data-lang='en' data-related=':Information Blog' data-via='gottotravel' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/)
    (b:if cond='data:post.isFirstPost')
    (script src='http://platform.twitter.com/widgets.js' type='text/javascript')
    (/script)
    (/b:if)
    (/div)

    Just change the () to <> more power!

    ReplyDelete
  66. thanks man. this was perfect. definitely solved my problem. you can see it works at my blog :) http://lifeofbenz.blogspot.com thank you!

    ReplyDelete
  67. wOw.... SUPER THANKS A LOT for this toturials, it's way much better than from twitter site itself ^_~.

    ReplyDelete
  68. it works only with the whole page. all posts have the same counter. I want each post to have it's own counter.

    ReplyDelete
  69. @a.magdy - if you have taken code from this blog, then it will show a different count for each post, provided the posts doesn't have the exact same count.

    ReplyDelete
  70. Nice! I found this somewhere else and is was not working on the home page. Tweet count would remain 0. This makes it work all all pages the post is on. Perfect!

    ReplyDelete
  71. How long should it take to update the tweet count? Everything seems to be working except that the new post I just did is showing 0 even though I can see via Twitter that it has already been re-tweeted 2 times.

    ReplyDelete
  72. Great Tweet count icon, wonderful design. Thanks mate for sharing them with us.

    ReplyDelete
  73. Great icon. Thanks :) http://realestateinvietnam.blogspot.com/

    ReplyDelete
  74. Thanks for sharing! My button wasn't working properly it would only work with the individual post. Now it works!

    ReplyDelete
  75. its not still counting. If previously was 8, after tweeting with new account it should be 9, but still showing count 8.

    ReplyDelete
  76. i dunno why but its not coming on my blog!!!!!!

    Can it be used if there is already a facebook share button?

    ReplyDelete
  77. It's working finally! Thanks a lot, mate!

    http://oralevatto.blogspot.com

    ReplyDelete
  78. thanks alot ..it worked for me

    www.chemicallibrary.blogspot.com

    ReplyDelete
  79. Nice info. Thanks!

    Please visit my blog.

    ReplyDelete
  80. Hi Aneesh, the plugin works for me but I have an issue with the post title in the tweet. The text in the tweet box has a limit of 140 characters, so when I press the tweet button the post title + my blogs title is included in the tweet which is unwanted and makes it longer than 140 characters at times. I see that your tweet button does not include your blog's title "Blogger Widgets" in the tweet.
    How do I fix this ?

    P.S. I've tried removing the parameter: [expr:data-text='data:post.title'] from the code, but it did not work for me :P

    ReplyDelete
  81. @Sagar - The Blog Title won't be included in the tweet if you are using the code mentioned here. If you remove the parameter [expr:data-text='data:post.title'], then it will use the Page's title(from the <title/> tag)and the page title will have your blog name in it.

    ReplyDelete
  82. @Aneesh: I'm using the above code but still the title is appearing, can you please have a look at this ?

    ReplyDelete
  83. @Aneesh: My Blog's URL: http://www.technetsavvy.com :)

    ReplyDelete
  84. Thanks worked for my site http://www.stuffadda.com

    ReplyDelete
  85. oh yeah it works really nice, my blog http://afterblind.blogspot.com/ now with teet button! thank you!

    ReplyDelete
  86. excellent piece of information, I had come to know about your website from my friend kishore, pune,i have read atleast 8 posts of yours by now, and let me tell you, your site gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanx a lot

    ReplyDelete
  87. Can this button (code) be put into the footer where the other share buttons are?

    ReplyDelete
  88. i followed all the steps above but the tweet share button is still not reflecting on my blog

    ReplyDelete
  89. This thing only works when it wants to.

    ReplyDelete
  90. Thanks, very helpful. I even experimented placing code on different locations to see the effects. Can you help with adding facebook widget too.

    ReplyDelete
  91. YOU FUCKING ROCK! I was adding all kinds of bullshit untill I found your blog, and easily in 2 min. solved all my problems. You are the best! Thank you very VERY much!

    ReplyDelete
  92. hello sir,
    my twitter counter is not running,it remains

    ReplyDelete
  93. how to align all share counter box, like what you have in your blog? mine's kinda messed up :( they just aligned from right to left.

    ReplyDelete
  94. I get error message like:

    Error parsing XML, line 796, column 191: The entity name must immediately follow the '&' in the entity reference.

    ReplyDelete
  95. Hi,

    How can place it next to my facebook like button on my blog
    http://FreeMP3Boy.blogspot.com ?
    Your tweet button is not appearing. I followed your instructions, but no dice. I need the tweeter button to align next to the fb like button horizontally.

    Please help. Thank you.

    ReplyDelete
  96. I want to add default share buttons of blogger..

    It is my blog www.bestshoppingdealsofindia.com

    ReplyDelete
  97. Thank you! I'm so thankful that I found your site! Definitely worth bookmarking.

    ReplyDelete
  98. What about with the new dashboard layout? I can't see any design tab. I see template, layout & settings etc.... Help!

    ReplyDelete