@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?
yes, finally I think to add twitter button on my blog
Thanks!
@DarkUFO - not sure what was wrong then. its showing up fine now :)
nice feature :)
very nice, I added it:)
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!
i wanna added it, but not compatibel with my theme :(
Is there a way to place the tweet button at the bottom of the post?
Beautiful, thanks!
Thanks ... I have done with it...
I have done things right but once i refresh my page the tweet count comes 0 why ??
@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.
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.
Does one need tweeter account for this button,
coz 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.
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/
Finally! this is great! thank for this one :)
Thanks .. works great :)
Thanks mate.
hey thanks for this i used it on my blog,it looks and works cool.happy tweeting and blogging.
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
Thank you, this was very helpful.
Thanks a lot!
http://cre8tivfacts.blogspot.com/
It works well, thanks for your useful articles....
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?
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.
Nice info. I am searching for this code for a long time.
Have 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?
Quantum Tiger, the tweet button doesn't work in Firefox 3.6.9 either, when you mouseover, cursor doesnt change.
hI , my twitter share button also not count, always goes back to 0, please advise how to fix it.
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!
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??
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?)
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
Right! Figured it out, I needed to make sure my code was inside the div class='post-body entry-content' tag.
:D
Thanks for this useful info!
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!
my tweet button goes back to zero when the page is refreshed and does not keep count. How do I fix this?
thanks! works great!
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?
anyone know why this wouldn't work in firefox and safari, but work in IE?
It didn't work for me and I followed all the directions. It doesn't show up in the latest Firefox and Safari browsers.
Thanks a lot ^^
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...
how to change tweet button image ?
can you help me ? thanks
Great! Thanks for this...
Have 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?
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!
thanks
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!
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.
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?
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!?
thanks :)
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!
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. :)
great feature. thanks!
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
It Worked Like a Charm For Me, Thanks A lot
very good info thanks for sharing
you website help me find what I want, thank you for sharing helpful info.
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
yay! i got it too.
aha this is what i am looking for.... thx buddy!!! good luck for ya... :D
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.
@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...
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!
Thanks for this useful info...
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...
Thanks for this post, it helped a lot.
Thank you for this nice tool. I really need it :)
thank you for this post
thank you..
Fantastic. Works like a champ. Thank you!
hi, nice widgets..
but the tweet seems to reset to zero when refresh. any chance to amend it? thx
thanx dear nice
Thanks for this. It makes all of us amateurs look like ninjas
Don't drop comments just to add your link here.
Hello, I tried adding the code, but nothing happens when I update the blog? How can I fix this?
Linn
Can you help me? it doesn't show on my blog...
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. :)
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
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!
thanks man. this was perfect. definitely solved my problem. you can see it works at my blog :) http://lifeofbenz.blogspot.com thank you!
wOw.... SUPER THANKS A LOT for this toturials, it's way much better than from twitter site itself ^_~.
it works only with the whole page. all posts have the same counter. I want each post to have it's own counter.
@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.
Awesum.thanku very much.
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!
Thanks for sharing.
thank you for the tips
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.
Great Tweet count icon, wonderful design. Thanks mate for sharing them with us.
Great icon. Thanks :) http://realestateinvietnam.blogspot.com/
Thanks for sharing! My button wasn't working properly it would only work with the individual post. Now it works!
its not still counting. If previously was 8, after tweeting with new account it should be 9, but still showing count 8.
i dunno why but its not coming on my blog!!!!!!
Can it be used if there is already a facebook share button?
It's working finally! Thanks a lot, mate!
http://oralevatto.blogspot.com
thanks alot ..it worked for me
www.chemicallibrary.blogspot.com
Nice info. Thanks!
Please 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.
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
@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.
@Aneesh: I'm using the above code but still the title is appearing, can you please have a look at this ?
@Aneesh: My Blog's URL: http://www.technetsavvy.com :)
Thanks worked for my site http://www.stuffadda.com
oh yeah it works really nice, my blog http://afterblind.blogspot.com/ now with teet button! thank you!
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
Can this button (code) be put into the footer where the other share buttons are?
i followed all the steps above but the tweet share button is still not reflecting on my blog
This thing only works when it wants to.
very nice......
thanks :D
thanks , you are very cool :)
very useful. thanks!
Thanks, very helpful. I even experimented placing code on different locations to see the effects. Can you help with adding facebook widget too.
Thanks you..
works great...
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!
Post a Comment