HOW TO: Facebook Share Count Button For Blogs
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.
<div style='float:right; margin-left:10px;'>
<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.
<div style='float:right; margin-left:10px;'>
<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
50 COMMENTS:
ur blog is wonderful
I so needed this. thanx
Had seen it on mashable was trying to look for it
@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 :)
Thats nice buddy. It looks great
Thanks very much, very useful.
Thanks, It's helpful for my template... :)
hi cheth this one is looking gud.Thanks for sharing
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 www.webprogrammingscripts.blogspot.com. plss reply soon
@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
great work this is one thing that we all need to know thanks for sharing :D
Love it! Been looking for something similar.
@gautam I got the option for an image on my share. Try it again?
@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.
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
@Stuartflatt
I think their website is down due to heavy traffic.. hope to be fine soon.
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.
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
@Courtney Engle
Use a br tag to seperate the tweetmeme button and facebook share count button
THanks Cheth for this. looking for this for my Blog rom Long Time
This is sweet! It actually shows the number of shares on FB facebook. Thanks chethstudios
If I have more than two thumbs I'd be happy to "up" them! Props to you man!
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
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?
Thanks for the tutoorial
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.
I actually first saw it on mashable.com
will be in my blog soon...
@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
Thanks for sharing.
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!
How facebook will better perform on blog in future?Can any one say pls..
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
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!
I use blogger and would like to get the facebook button underneath my tweet this botton...please help and great post.
www.wesleysoccerblog.com
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!
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.
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.
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.
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
Hmmm... but in my case its posting the meta description from the template header.
Thanks!
Great Tuts! Than you :)
---------------------------------------------
http://greatsalesstrategy.blogspot.com
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..
So great a resource. No wonder more followers tend to click just like the process in sending bulk messaging: in a jiffy.
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.
@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.
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
How to Add Facebook Like Plugin widget Blogger and WordPress
I would like to see a tutorial on how to add Facebook "Like" buttons like you have added in your blog. Thanks!
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?
@ 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
thanks very much...
Post a Comment
Please Don't Spam that's all. Grab our RSS Feed and we would Love to see you in our comments section more often.