Today Facebook launched a nifty little tool enabling website owners and bloggers to allow their users to better share and track their content on Facebook. The new tool provides a piece of HTML and javascript that renders a little “Share” button. When clicked, the post is tracked by Facebook, the number of shares is shown, and via an API comments, likes, shares, and more can be tracked across all of Facebook for items shared via that button. Today I’m going to add to that by providing a WordPress plugin.
The FB Share Button WordPress plugin renders the Facebook share button of your choice on your blog. Via admin settings in WordPress you can choose which Share button you would like to display, where you want to display it, and even provide the language for the link. The plugin is based on the same Easy Retweet plugin by Sudar which you see on this blog.
To install, just download this link, untar and ungzip into your WordPress plugins directory. Activate the plugin, adjust your settings to display where you like (or you can manually add it to your template or posts – see the readme), and it will display for every post you write on your blog. You can even turn it on or off per blog post.
I’m also working to make this FBFoundations compatible so it will load as an optional XFBML tag if you like – expect that in a future revision. Now WordPress bloggers everywhere have the capability to enable and track Facebook sharing on their blog. You can download it here:
http://downloads.wordpress.org/plugin/facebook-fb-share-wordpress-plugin.zip
Stay tuned though – in the next revision I’m hoping to add Facebook API support so you can track and read the number of shares, comments, likes across all of Facebook from your WordPress admin. That will all fit in with the FB Foundations plugin I wrote earlier.
Stay N' Alive 
Looks like we had the same basic idea. I added support for the share button to Simple Facebook Connect a little while ago:
http://wordpress.org/extend/plugins/simple-facebook-connect/
Also added a User Status Widget as well. I quite like that one, seems Facebook has no real way to get the user status as an RSS feed easily anymore, so a widget like this is useful.
Awesome was waiting for this before jumping in and hacking one together myself
Looks like we had the same basic idea. I added support for the Share button to Simple Facebook Connect just a little while ago: http://wordpress.org/extend/plugins/simple-face…
I also added a User Status Widget for SFC, because I've found no really good way to get the user status out of Facebook. The RSS feed that used to be there can't be found anymore, which is a bit annoying.
test comment
Hey Jesse,
I've installed and am using it on top of my content here: http://wordpressmodder.org/secondary-html-conte…
Thanks for the plugin:)
Thats sweet Jesse. Can't wait for it to be added to the WP pluggin directory. Have no access to thework server, just the wp account. Thanks!
I'm using it on my site as well. http://thriller-michael-jackson.com.
I'm looking forward to future updates to your Facebook plugins.
Thanks for this great plugin! I have one problem: The counter is only showing up after clicking the share button. I can see the same problem on the pages of the other two users who posted here.
Any idea?
Great job man! I was looking all over for this plugin, just installed it on my site. Cheers!
Great Plugin, thank you!
This is nice but is there a way to control the badge better with css? connect.css appears to be used. Can this be adjusted? Mabye I'm misunderstanding because I don't want the badge on the left side of the blog post.
[…] Introducing the FB Share Button WordPress Plugin for Facebook … […]
Thanks Ehab – I'm still waiting for their approval. Hopefully soon!
Adam, awesome! Thanks for trying it out – let me know if I can make it any
better.
Awesome! Keep sharing your implementations guys!
Marco, that's how Facebook built it to work. I believe that's Facebook's
problem. That said, you can probably experiment with CSS and see if you can
format that how you like.
LPH, you can choose the manual option and place it where you like. You
could then wrap it in a div or span and control where you want it with CSS.
[…] den ein oder anderen von Euch interessant sein könnte, möchte ich hier dringend auf die Seite von Jesse Stay hinweisen, in der das Plugin ausführlich erklärt […]
having trouble getting it to work … it doesn't show up in a post. great idea though, hope i can get it going.
I got it to work! Thank you, it's just what I was looking for. Happy Halloween 🙂
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Great plugin…
This is what I was looking for before modifying my template. But somehow it shows on the pages but not on the posts.
Even if I have enabled it manually. Am I missing something..
Please help..
Anurag what version of WordPress are you on?
I am using WordPress 2.8.5…
I guess, FB Share was not going along with another plug-in I use for Digg. It is showing only one of them, either FB or Digg. If I activate Digg, then FB doesn't show up. Don't know why. May be it will help you in finding out the issue.
Thanks again for creating this awesome plug-in.
The only thing I want is to be able to link it to my facebook 'fan' page and not my profile. but i understand those issues seem to be happening on the facebook end and not with developers. if you can get the fan page to work, i would seriously be YOUR #1 FAN. thx.
livingnicki, it's possible, but I'd have to override the Facebook Share
functionality. Maybe in the future, but right now it's too easy to get
stats and other useful data via this means. I'm hoping Facebook just does
that for me soon.
Hi, I am trying to access the CSS to restyle the button but it seems to be on line at http://static.ak.fbcdn.net/connect.php/css/shar…
I need to apply make it float; right with a margin of 10px so it matches the Tweetmeme plugin I have also installed.
Any tips ?
Thanks,
JPh
JPH, if you select manual mode, you can probably modify your theme's css and
change it that way. I'm going to try to add other ways to style it here in
the near future though.
Jesse, what about us in Blogger?
Damond, you can manually add the code to any site by following the
instructions here:
http://wiki.developers.facebook.com/index.php/F…
Thank you, sir!
In Blogger, I would like to have it show the stats for each post, not count shares for the whole site. When I set up Tweetmeme, I used the following, “
I actually answered my own question. The correct way to write in Blogger is, “expr:share_url='data:post.url'”
So, for the benefit of your readers, the whole thing looks like this:
a expr:share_url=”data:post.url” name=”fb_share” type=”box_count” rel=”nofollow”
Be sure to add the less than and greater than symbols.
[…] FB Share – Adds a Facebook Share button to your WordPress posts, similar to the ReTweet or Twit This Plugin. […]
the new fbshare button sucks…
not showing the count on default. Will switch back to the unofficial fb button.
I've been comparing the two methods of making the share button. One is using XBFML on a Connect site, the other is generating the javascript code similar to what this page does: http://www.facebook.com/facebook-widgets/share.php
The two methods behave very differently. This may be something to keep in mind in any implementation of this.
Using XFBML, you have the following:
– Only works on FBConnect enabled sites
– Only shows count to users that are currently logged into Facebook (not into this site, just FB)
– Style as you like, it doesn't get special rules
– Way faster, as no extra code is needed to load (FB Connect is already loading XFBML)
– The “share” popup can be in a inline lightbox-like frame in the page (looks nice)
Using the FB javascript method, you get these:
– Works anywhere
– Shows count to everybody
– Has special styling built in (the thing is floated by default, getting text wrap around it)
– Slower, requires a few extra JS files to load up
– Always opens a separate window for sharing (no pretty inline framing in the page)
Something to keep in mind.
Thanks Otto – that's good to know.
sweet!
[…] Jesse Stay (@Jesse), CEO of SocialToo, has also created a Facebook Share Button. Thanks to Mark […]
[…] but works just the same.Recommendation: Jesse Stay (@Jesse), CEO of SocialToo, has also created a Facebook Share Button. Thanks to Mark […]
[…] but works just the same.Recommendation: Jesse Stay (@Jesse), CEO of SocialToo, has also created a Facebook Share Button. Thanks to Mark […]
Ok, how can I make it to display the counter by default? Just like your page. I didn't need to click on the button to the counter appear.
Thanks
Saulo, that's a Facebook limitation. Since I'm relying on their button code
I can't display the number by default. There may be a way you could add
some Javascript to prototype their code and add a number if you like. Let
me know if you do and I'll add it to the plugin.
Thanks for the answer jessestay.
I would like that. It would be nice.
My question was because I saw the number appearing by default here on your site and on that site: http://tinyurl.com/ylphl9e
Thanks.
Saulo, it's appearing there because people have already clicked on it. Once
someone shares your article numbers will start appearing.
Now I understand. Thanks jessestay 🙂
Now I understand. Thanks jessestay 🙂
I have the same problem that Flaq has and you say that Facebook made it that way but yours displays the counter the first time I came to this page. Please post the code here that you use so that we may compare what you have done to what we have done.
Sorry I meant to say Marco and I have the same problem
Pete, the counter only shows after it gets shared. On pages that no one has
shared to Facebook the counter does not display on mine. See
http://staynalive.com/articles/2009/11/18/phil-…
example.
Jesse, thanks for such a quick response. I just now looked at home page of Mashable.com and see that there are several new post that do not have a count but ONE that has count of 3, so as you say it must be that once you have one or a couple it will then display them all.
Pete
[…] Facebook Share – Add a Facebook share widget to your posts or even add more connectivity with Facebook Connect by Sociable. […]
[…] Facebook Share – Add a Facebook share widget to your posts or even add more connectivity with Facebook […]
Its works. Thx Jesse, I like it..
Look at my page http://www.bedahbuku.info
Looks great Martant!
Thanks so much for creating this plugin!
Michelle, it's my pleasure. Hoping to add a few more things to it as we
move forward, so stay tuned. Happy to hear your feedback!
I have installed this facebook share plugin. But it did not show me count. it only shows when i click on share button.
please help me to show the count
It only shows count when it has a count to show. If no one has clicked on
it it won't show anything. That is Facebook native functionality.
The button shows count only after click on the share button. Any solutions for this? i want to show the real counter when page reloads.
There I have share it 2 times. And it shows counter as 2 but only when i click on share button. But I want to show it at the time of page loads. check it here http://www.gibill.com/blog/
Uttam, that's not possible – it's a Facebook limitation unfortunately.
But i saw many sites in which counter gets displayed when page loads. and when we click on share button it will get increase. for example http://www.mashable.com
Does it show when there are 0 shares on mashable and the other sites?
Counter gets displayed when it reached to 3. But it did not display below it. Is it the limitation of facebook
It should display if it is above 0, but not if it is 0.
Good article..
can you tell me how can I have these FB and retweet buttons for WP blog..?
You may find this Plugin Written by me useful.
FBMeme plugin for WordPress to show Count of Facebook Shares and to Share
http://bijayrungta.com/fbmeme-plugin-for-wordpr…
you can Download it from
http://wordpress.org/extend/plugins/fbmeme/
@rungss on Twitter
Bijay, how is that different than this one? Why reinvent the wheel? I
could certainly use all the help I can get in improving this if you want a
better solution. Isn't that the essence of open source?
proba
very usefull tutorial, Help me a lot.
Thank You for the tool
Hi Jesse. You have given such a beautiful information.This is new and very useful for the beginners.
Thanks and keep on sharing your ideas..!!!
Nice Plugin
http://www.mobigang.net/
Thanks for the plugin! Quick question,… when I share it on facebook, in the description it feeds through code, and not actual post content. Any idea why this would be happening? (http://www.thetastefullife.com)
I deleted it for now… I'm looking into it…
Hi
I am using your FB share button. Since im using this i can share the conntent of my blogs or sites only. No pictures appears at the opened window of FB. Ive tried this on one of my test sites. There i have no problem. Little bit confused about this. something that i dont know why it is happen like this. the sites are
http://www.clubberqueen.com —> no pictures showing at share
http://www.clubberqueen.com/deneme —> Pictures showing at share
Thank you for your answer
Best Regards
Ömer
Hey! Thanks for the great plugin. After-all it was really easy to integrate and its simple and useful!
you can see it here: http://www.null.ee/blog/
thanks,
Kaspar
(L)
You might find this article useful for adding FB Like and various social share buttons with count for Blogger:
http://cwynire.blogspot.com/2010/11/how-to-put-share-buttons-and-facebook.html
The article shows how you can have a unique count for each post on the front page itself, including buttons for Facebook Share, Twitter, Digg, StumbleUpon, Reddit, Buzz, Facebook Like, etc.
Button doesn't show up on search results for me in WP v3.0.3, it works fine for categories, tags, archive. Needed to modify this:
changed
|| ($options['display-archive'] == “1” && is_archive())
to
|| ($options['display-archive'] == “1” && (is_archive() OR is_search()))
Thanks for the update – I'll get that changed.
Button doesn't show up on search results for me in WP v3.0.3, it works fine for categories, tags, archive. Needed to modify this:
changed
|| ($options['display-archive'] == “1” && is_archive())
to
|| ($options['display-archive'] == “1” && (is_archive() OR is_search()))
(L)
I deleted it for now… I'm looking into it…
[…] FB Share – Adds a Facebook Share button to your WordPress posts, similar to the ReTweet or Twit This Plugin. […]
I actually answered my own question. The correct way to write in Blogger is, “expr:share_url='data:post.url'”
So, for the benefit of your readers, the whole thing looks like this:
a expr:share_url=”data:post.url” name=”fb_share” type=”box_count” rel=”nofollow”
Be sure to add the less than and greater than symbols.
Good article..
can you tell me how can I have these FB and retweet buttons for WP blog..?
Hi, I am trying to access the CSS to restyle the button but it seems to be on line at http://static.ak.fbcdn.net/connect.php/css/shar…
I need to apply make it float; right with a margin of 10px so it matches the Tweetmeme plugin I have also installed.
Any tips ?
Thanks,
JPh
The only thing I want is to be able to link it to my facebook 'fan' page and not my profile. but i understand those issues seem to be happening on the facebook end and not with developers. if you can get the fan page to work, i would seriously be YOUR #1 FAN. thx.
I guess, FB Share was not going along with another plug-in I use for Digg. It is showing only one of them, either FB or Digg. If I activate Digg, then FB doesn't show up. Don't know why. May be it will help you in finding out the issue.
Thanks again for creating this awesome plug-in.
Great plugin…
This is what I was looking for before modifying my template. But somehow it shows on the pages but not on the posts.
Even if I have enabled it manually. Am I missing something..
Please help..
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
Glad it's working for you! Let me know if you have any improvements you'd
like to see.
[…] den ein oder anderen von Euch interessant sein könnte, möchte ich hier dringend auf die Seite von Jesse Stay hinweisen, in der das Plugin ausführlich erklärt […]