Introducing the FB Share Button WordPress Plugin for Facebook Share – Stay N Alive

Introducing the FB Share Button WordPress Plugin for Facebook Share

FacebookToday 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.

130 thoughts on “Introducing the FB Share Button WordPress Plugin for Facebook Share

  1. 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.

  2. 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?

  3. 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.

  4. 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.

  5. having trouble getting it to work … it doesn't show up in a post. great idea though, hope i can get it going.

  6. 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..

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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, “.” However, when I try to use that in the place of share_url, I get “” and not the actual URL. What am I missing? How does this work in WordPress?

  12. 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.

  13. 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.

  14. 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

  15. 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.

  16. 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.

  17. 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

  18. 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

  19. 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.

  20. 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?

  21. 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..!!!

  22. 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

  23. 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()))

  24. 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()))

  25. 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.

  26. 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.

  27. 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.

  28. 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..

Leave a Reply

Your email address will not be published. Required fields are marked *