@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)
<b:if cond='data:blog.pageType == "item"'><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=' '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.
Thanks, the counts are not showing on your post?
ReplyDeleteyes, finally I think to add twitter button on my blog
ReplyDelete@DarkUFO - not sure what was wrong then. its showing up fine now :)
ReplyDeletenice feature :)
ReplyDeletevery nice, I added it:)
ReplyDeleteWorks perfectly and I love the ability to display the blog post title using: expr:data-text='data:post.title' <--- fantastic!
ReplyDeleteImplemented now on http://Rich.Kavanagh.IT
I'll copy this over to my other blog sites today too.
Thanks again!
i wanna added it, but not compatibel with my theme :(
ReplyDeleteIs there a way to place the tweet button at the bottom of the post?
ReplyDeleteBeautiful, thanks!
ReplyDeleteThanks ... I have done with it...
ReplyDeleteI have done things right but once i refresh my page the tweet count comes 0 why ??
ReplyDelete@Bobbi Lewin - place the code below instead of putting it above it.
ReplyDelete@Anand - seems like the tweet button is little slow in updating the real count.
Thanks so much for this post, very easy to follow.
ReplyDeleteOne suggestions for us noobies, suggest to copy the using the find function. so much simpler than looking.
Does one need tweeter account for this button,
ReplyDeletecoz tweeter is blocked in my university
@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.
ReplyDeleteI'm having an issue where the button is appearing but not working on any browser apart from ie8. Any ideas http://diaryofaledger.blogspot.com/
ReplyDeleteFinally! this is great! thank for this one :)
ReplyDeleteThanks .. works great :)
ReplyDeleteThanks mate.
ReplyDeletehey thanks for this i used it on my blog,it looks and works cool.happy tweeting and blogging.
ReplyDeletei 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?
ReplyDeletethanks
Thank you, this was very helpful.
ReplyDeleteThanks a lot!
ReplyDeletehttp://cre8tivfacts.blogspot.com/
It works well, thanks for your useful articles....
ReplyDeleteThanks, 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?
ReplyDeleteWorks 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.
ReplyDeleteNice info. I am searching for this code for a long time.
ReplyDeleteHave to try this in my blog stuffadda.blogspot.com
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?
ReplyDeleteQuantum Tiger, the tweet button doesn't work in Firefox 3.6.9 either, when you mouseover, cursor doesnt change.
ReplyDeletehI , my twitter share button also not count, always goes back to 0, please advise how to fix it.
ReplyDeleteFinally! I've been using TweetMeme, which is a little Blogger unfriendly all this time and it lacks the ability to edit titles. I
ReplyDeleteThis button works better than I thought!
dear all,
ReplyDeletemy 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??
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 :(
ReplyDeletehttp://jenaissancedesign.blogspot.com/
any ideas why I was able to use yours and not my own? (even after logging out of Google and visiting?)
hi, may i know how to add in my blog title in the tweet as well?
ReplyDelete"expr:data-text='data:post.title + data:blog.title' "
but it stick together, how to seperate them ? O,o
Right! Figured it out, I needed to make sure my code was inside the div class='post-body entry-content' tag.
ReplyDelete:D
Thanks for this useful info!
ReplyDeleteAwesome post! Thank you so much for sharing. This entire Blog is fantastic!
ReplyDeleteThanks for the great post, i continue to learn from your advice!
my tweet button goes back to zero when the page is refreshed and does not keep count. How do I fix this?
ReplyDeletethanks! works great!
ReplyDeleteI can't get it to work- I'm pasting it directly before
ReplyDeleteThen I save the template and view the blog, and nothing's different.
Can anyone help me out?
anyone know why this wouldn't work in firefox and safari, but work in IE?
ReplyDeleteIt didn't work for me and I followed all the directions. It doesn't show up in the latest Firefox and Safari browsers.
ReplyDeleteThanks a lot ^^
ReplyDeleteI love your blog, I relly do,. The way talked here is very informative and also very awesome post and thanks to share this article..
ReplyDeleteGOOD JOB...
how to change tweet button image ?
ReplyDeletecan you help me ? thanks
Great! Thanks for this...
ReplyDeleteHave added it to my site: http://blatentlyblunt.blogspot.com
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?
ReplyDeleteCode 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!
thanks
ReplyDeleteWow! At last a complete, simple and easy to use tutorial. Thank you very much!
ReplyDeleteI 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!
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?
ReplyDeleteeverything 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.
ReplyDeleteexample...
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!?
thanks :)
ReplyDeleteHey Guys! I also had trouble implementing the Tweet Button! Just ignore the following beginning and ending code:
ReplyDelete&
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!
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. :)
ReplyDeletegreat feature. thanks!
ReplyDeleteit didnt work for me also in my programming blog even after adding the code properly ...im using firefox
ReplyDeletewhat 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
It Worked Like a Charm For Me, Thanks A lot
ReplyDeletevery good info thanks for sharing
ReplyDeleteyou website help me find what I want, thank you for sharing helpful info.
ReplyDeleteTrying 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
ReplyDeleteyay! i got it too.
ReplyDeleteaha this is what i am looking for.... thx buddy!!! good luck for ya... :D
ReplyDeleteWonderful. 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@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...
ReplyDeleteHi Aneesh,
ReplyDeleteI 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!
Thanks for this useful info...
ReplyDeleteI wrote my own html and it works fine on firefox. The code generated by twitter (http://twitter.com/about/resources/buttons) doesn't work.
ReplyDeleteIt might be that target="_blank" is missing in the code...
Thanks for this post, it helped a lot.
ReplyDeleteThank you for this nice tool. I really need it :)
ReplyDeletethank you for this post
ReplyDeletethank you..
ReplyDeleteFantastic. Works like a champ. Thank you!
ReplyDeletehi, nice widgets..
ReplyDeletebut the tweet seems to reset to zero when refresh. any chance to amend it? thx
thanx dear nice
ReplyDeleteThanks for this. It makes all of us amateurs look like ninjas
ReplyDeleteHello, I tried adding the code, but nothing happens when I update the blog? How can I fix this?
ReplyDeleteLinn
Can you help me? it doesn't show on my blog...
ReplyDeleteHi! 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. :)
ReplyDeleteI 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
ReplyDeleteFinally I think I got it right.:) Your site is the best!
ReplyDelete@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!
thanks man. this was perfect. definitely solved my problem. you can see it works at my blog :) http://lifeofbenz.blogspot.com thank you!
ReplyDeletewOw.... SUPER THANKS A LOT for this toturials, it's way much better than from twitter site itself ^_~.
ReplyDeleteit works only with the whole page. all posts have the same counter. I want each post to have it's own counter.
ReplyDelete@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.
ReplyDeleteAwesum.thanku very much.
ReplyDeleteNice! 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!
ReplyDeletethank you for the tips
ReplyDeleteHow 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.
ReplyDeleteGreat Tweet count icon, wonderful design. Thanks mate for sharing them with us.
ReplyDeleteGreat icon. Thanks :) http://realestateinvietnam.blogspot.com/
ReplyDeleteThanks for sharing! My button wasn't working properly it would only work with the individual post. Now it works!
ReplyDeleteits not still counting. If previously was 8, after tweeting with new account it should be 9, but still showing count 8.
ReplyDeletei dunno why but its not coming on my blog!!!!!!
ReplyDeleteCan it be used if there is already a facebook share button?
It's working finally! Thanks a lot, mate!
ReplyDeletehttp://oralevatto.blogspot.com
thanks alot ..it worked for me
ReplyDeletewww.chemicallibrary.blogspot.com
Nice info. Thanks!
ReplyDeletePlease visit my blog.
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.
ReplyDeleteHow 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
@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@Aneesh: I'm using the above code but still the title is appearing, can you please have a look at this ?
ReplyDeleteThanks worked for my site http://www.stuffadda.com
ReplyDeleteexcellent 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
ReplyDeletei followed all the steps above but the tweet share button is still not reflecting on my blog
ReplyDeleteThis thing only works when it wants to.
ReplyDeletevery nice......
ReplyDeletethanks :D
ReplyDeletethanks , you are very cool :)
ReplyDeletevery useful. thanks!
ReplyDeleteThanks, very helpful. I even experimented placing code on different locations to see the effects. Can you help with adding facebook widget too.
ReplyDeleteThanks you..
ReplyDeleteworks great...
hello sir,
ReplyDeletemy twitter counter is not running,it remains
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.
ReplyDeleteI get error message like:
ReplyDeleteError parsing XML, line 796, column 191: The entity name must immediately follow the '&' in the entity reference.
Hi,
ReplyDeleteHow 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.
I want to add default share buttons of blogger..
ReplyDeleteIt is my blog www.bestshoppingdealsofindia.com
Thank you! I'm so thankful that I found your site! Definitely worth bookmarking.
ReplyDeleteWhat about with the new dashboard layout? I can't see any design tab. I see template, layout & settings etc.... Help!
ReplyDeleteDoesn't show up, let alone work.
ReplyDelete