HOW TO: Facebook Share Count Button For Blogs
No debate on the topic that Twitter has grown breaking all boundaries. And Facebook has never missed out any chance to try to copy Twitter’s features. Well you haven’t heard of the TweetMeme Retweet button for blogs? You can see it live on chethstudios Blog. And Backtweets also introduced a rival twitter retweet button and it was impressive too. NO before you start accusing Facebook that It’s stolen this idea again let me tell you about fbshare.me These guys have come up with a Facebook share button with a counter! You can see the share button yourself, let me tell you how you can put it up on your blog.
The Facebook sharecount button displays the number of times the current page has been shared on Facebook and allows visitors to share it themselves. Inspired by the popular Retweet buttons, it was built by us folks behind awe.sm
Update: Now there is an Official Facebook Share counter. Suggest you to use the new counter here.
Main Features:
Displays the number of shares and on hover the total number of clicks for those shares (displays Facebook logo when 0 shares)
Track the shares from the button using your awe.sm API Key or fbshare.me links
Add Google Analytics parameters to fbshare.me links
WordPress users, can easily get the plugin. Otherwise, get the embed code.
Blogger / Blogspot users Login to your Dashboard > Layout > Edit HTML and check the “Expand Widget Templates” option. Don’t Forget to backup before you try changing any codes.
Firstly Locate this code in your blogger template.
<data:post.body/>
And then copy and paste the below code just above the <data:post.body/> tag.
<script src=”http://widgets.fbshare.me/files/fbshare.js”></script>
</div>
Now the customization part:
1.<div style=’float:right; aligns the button to the right. set it as left if you want it on the left hand side of the post.
2.the above code was pasted above the <data:post.body/> tag. So if you want the retweet button in the bottom section of your post. Place the code below <data:post.body/>
3.size – The size of the button: ‘large’ OR ‘small’ (if not specified, defaults to ‘large’)
4.url – The URL of the page you want shared on Facebook (if not specified, defaults to that of the page on which the button is displayed)
5.title – The name of the page you want shared on Facebook (if not specified, defaults to that of the page on which the button is displayed)
6.google_analytics – If no awesm_api_key specified, sets whether fbshare.me links have Google Analytics parameters added: true OR false (if not specified, defaults to false)
7.awesm_api_key – For existing awe.sm customers only (if not specified, will use fbshare.me links)
For example a customised Small facebook share count button code looks like.
<script>var fbShare = {
url: ‘http://chethstudios.blgospot.com/’,
size: ‘small’,
google_analytics: ‘true’
}</script>
<script src=”http://widgets.fbshare.me/files/fbshare.js”></script>
</div>
You can also get a free subscription to Chethstudios updates. We will be back with more useful content. Get latest hacks and updates on your email
Download the testking 642-691 design tutorials and testking 642-262 guide to learn how to create user friendly web layouts. Become expert using testking JN0-331 free resources.
1919
71340
1626
50 Comments
Alter Dimension
09.22.2009
ur blog is wonderful
gautam
09.22.2009
I so needed this. thanx
Had seen it on mashable was trying to look for it
cheth
09.22.2009
@Gautam,
Same here bro, I've seen the mashable site they use an image and not exactly a counter right? This one has a nice counter updated realtime using the API
Rahul Jadhav
09.22.2009
Thats nice buddy. It looks great
DarkUFO
09.23.2009
Thanks very much, very useful.
Free Blog Templates
09.23.2009
Thanks, It's helpful for my template…
manikandan
09.23.2009
hi cheth this one is looking gud.Thanks for sharing
raj
09.23.2009
hey cheth there is no such code in my blog data:post.body, well i also did expand widget templates but could not find the code there, now what should i do friend its for my blog http://www.webprogrammingscripts.blogspot.com. plss reply soon
gautam
09.23.2009
@cheth i like the counter but when i share it doesn't show any image plus it just shows feedshare.me which might not be good for sharing
kirsty aka seventysangel75
09.23.2009
great work this is one thing that we all need to know thanks for sharing
Average Joe
09.23.2009
Love it! Been looking for something similar.
@gautam I got the option for an image on my share. Try it again?
cheth
09.23.2009
@Gautam
I think I too got an image when i shared it on FB.. you saw my status right? it had that facebook leaf.
@Average Joe
Yes.
Average Joe
09.23.2009
Hmmm, I can't get the code to work in my wordpress theme (I prefer not ot use plugins if possible).
And if I try to download the plugin your site times out? Is it struggling with the load?
@stuartflatt
cheth
09.23.2009
@Stuartflatt
I think their website is down due to heavy traffic.. hope to be fine soon.
FAQPAL
09.24.2009
I use something similar, but handed coded. I prefer to use sharer.php as opposed to what these guys are using share.php.
Good post.
Courtney Engle
09.25.2009
I'm using wordpress – and like your layout, would like to have it display below the tweetmeme button. How can I adjust it to do so?
http://odcblog.com = wpmu 2.8.4, thesis 1.5.1
cheth
09.26.2009
@Courtney Engle
Use a br tag to seperate the tweetmeme button and facebook share count button
Technobuzz.net
09.27.2009
THanks Cheth for this. looking for this for my Blog rom Long Time
Ivan
09.27.2009
This is sweet! It actually shows the number of shares on FB facebook. Thanks chethstudios
E
09.29.2009
If I have more than two thumbs I'd be happy to "up" them! Props to you man!
VISHAL
09.29.2009
Hi, I’m glad that I came across your blog. You have some very useful and interesting posts there. I will put a link to your blog from my site, if this is okay with you.
I am also running a blog with technical stuffs out there, have a look to ma blog.
Link : http://www.techbucket.org
If you could possibly place a small link of my site, that would be really great. Have a great day and hope to hear from you.
Happy Blogging.
Thanks & Regards:
VISHAL S GAIKAR | http://www.techbucket.org
Jason Yormark
09.30.2009
What do you have to edit to make it so that the this button appears below the tweetmeme button if you are using the wordpress plugins?
Beautytipsvilla.com
09.30.2009
Thanks for the tutoorial
Anne Fox
09.30.2009
LOL Facebook is threatened by twitter's features? Well, twitter is undeniably very useful to all people. Best proven with most webmasters out there. I'm not surprised if FB did soemthing about this. FB must protect their interest in their market, especially there are other popular sites competing with them.
manS
10.02.2009
I actually first saw it on mashable.com
will be in my blog soon…
cheth
10.02.2009
@manS
Everybody saw that plugin on mashable first. But nobody knew how to install it. We were one of the first people to write a tutorial on this. FYI
Shurandy Thode
10.04.2009
Thanks for sharing.
Christine
10.07.2009
I'm using WordPress and I actually asked the developer about how to adjust it so it appears right below the Tweetmeme button. You need to adjust the Wrapper style to this:
bottom:-65px; float:left; left:-62px; margin-bottom:65px; margin-right:-52px; position:relative;
Now does anyone know how to tweak it so it appears only on posts, not pages? Developer said plugin could be tweaked to do it but didn't say how…thanks!
web design company
10.10.2009
How facebook will better perform on blog in future?Can any one say pls..
Anonymous
10.11.2009
Hi there!
I proceeded according your instructions and the button shows real nice, but there is a problem, it doesn't show the URL of the page I want shared on Facebook.
Will appreciate any suggestion as to solving this issue.
Aryeh
cheth
10.11.2009
in the code remove the
url:'http://chethstudios.blogspot.com'
it will tweet post pages as you need it. let me know if this doesnt work for you!
Wesley Soccer
10.12.2009
I use blogger and would like to get the facebook button underneath my tweet this botton…please help and great post.
http://www.wesleysoccerblog.com
The M & M Team
10.16.2009
I have a problem…
When people click on the share button, it opens the facebook share screen. Shows the title of my post, but the description is from someplace else on my blog. I can edit it, but most people want to just click share and share again.
I noticed that this is happening on this post too!
cheth
10.16.2009
we know that, but as far as this plugin is posting the title and part of the blog post we are happy with this plugin.
why bother until it posts some text from your blog post? i didn't get your question.
The M & M Team
10.16.2009
Yes it posts the title, but the problem is that it is not posting part of my blog post. It's posting part of the Home Page text.
On this post, it looks like its posting text from another post that you wrote:
"Not Just a Design Blog. Its much more! Filled with pure awesomeness from design to coding to Social media scraps"
Click the share button on this post. You'll see what I mean.
cheth
10.16.2009
it isn't posting text from another blog post. that is the text from meta description. it posts the meta description in your case too, i guess.
The M & M Team
10.16.2009
Nope… don't have any meta tags set up… The share button is pulling the description from my home page content. See for yourself:
http://www.themmteam.com/2009/10/gap-between-list-price-and-sales-price_15.html
Thanks
cheth
10.16.2009
Hmmm… but in my case its posting the meta description from the template header.
Michael de`Oz
10.16.2009
Thanks!
TheFamousMillionaire
10.17.2009
Great Tuts! Than you
———————————————
http://greatsalesstrategy.blogspot.com
robert pattinson
10.17.2009
Thanks for the info.. i'm still figuring it out coz when i tried to place the script, the facebook share is not the same as yours..
api for sms
10.18.2009
So great a resource. No wonder more followers tend to click just like the process in sending bulk messaging: in a jiffy.
PeterK
11.05.2009
Are more people having the issue of the share count not showing upon page refresh? Even on this site, when I load this page, the share count doesn't show until I press the fb button.
cheth
11.05.2009
@PeterK The facebook share counter used in my blog is the official facebook share counter. http://www.chethstudios.net/2009/01/official-facebook-share-counter-blogger.html
Yes the offcial facebook counters are designed so that they are hidden on page refresh.. try http://www.chethstudios.net/2009/09/facebook-share-count-button-blogger.html this doesnt hide. but its not the official share button by facebook.
Bloodpantha
12.25.2009
thats cool! I knew how to put a facebook add as a friend button but this is new for me. Thnx for the know-how
Dainis
04.23.2010
How to Add Facebook Like Plugin widget Blogger and WordPress
Dainis
04.23.2010
I would like to see a tutorial on how to add Facebook "Like" buttons like you have added in your blog. Thanks!
cory
05.08.2010
I like this alot. Can you tell me how you created your left sidebar (with the tweetmeme, facebook, etc buttons in it?) It looks like it is dynamic per post as well. How did you do that?
cheth
05.08.2010
@ cory
You can get the official facebook share counter here > http://www.chethstudios.net/2009/01/official-facebook-share-counter-blogger.html
and to create the social icons to float on the left you can use this guide created by one of our readers
http://www.techpupil.com/2010/05/add-floating-share-widget-to-blogger.html
zul
08.08.2010
thanks very much…
HOW TO: Official Facebook Share Counters for Blogs chethstudios Design Magazine
03.04.2011
[...] lesson and now the Official Facebook Share counters are rolled out. Last week I had shown you guys how to implement a third part Facebook Share Counter on your Blogs. But Now since the Official Share counter has appeared I would suggest you to use this [...]
There are no trackbacks to display at this time.