Contact: (801) 853-8339 or jesse@staynalive.com
Twitter, FriendFeed, LinkedIn, or Facebook
Like StayNAlive.com on Facebook!:
TwitterCounter for @Jesse

Introducing the FB Share Button WordPress Plugin for Facebook Share

by Jesse Stay — published on October 26th, 2009

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.

Posted on Monday, October 26th, 2009 at 2:54 pm. Filed under Downloads, Facebook, Geeky, Howtos, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • Kaspar
    Hey! Thanks for the great plugin. After-all it was really easy to integrate and its simple and useful!
    you can see it here: www.null.ee/blog/
    thanks,
    Kaspar
  • 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
    www.clubberqueen.com ---> no pictures showing at share
    www.clubberqueen.com/deneme ---> Pictures showing at share

    Thank you for your answer

    Best Regards
    Ömer
  • Marla
    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? (www.thetastefullife.com)
  • Marla
    I deleted it for now... I'm looking into it...
  • Salmanaslam_663
  • Hi Jesse. Facebook is being used by most bloggers in these days, This is new and very useful for the beginners.
  • Thank You for the tool
  • sawangpong
    very usefull tutorial, Help me a lot.
  • 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-wordpress-to-show-count-of-facebook-shares-and-to-share

    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?
  • Good article..
    can you tell me how can I have these FB and retweet buttons for WP blog..?
  • uttam
    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.
  • 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!
  • uttamtakalkar
    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.
  • uttam
    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.
  • uttam
    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 www.mashable.com
  • Does it show when there are 0 shares on mashable and the other sites?
  • uttam
    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.
  • Its works. Thx Jesse, I like it..
    Look at my page http://www.bedahbuku.info
  • Looks great Martant!
  • Saulo Benigno
    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.
  • Saulo Benigno
    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.
  • Saulo Benigno
    Now I understand. Thanks jessestay :)
  • sweet
    sweet!
  • 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.
  • Rob
    the new fbshare button sucks...

    not showing the count on default. Will switch back to the unofficial fb button.
  • 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/Facebook_Share
  • 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, "<data:post.url>." However, when I try to use that in the place of share_url, I get "<data:post.url>" and not the actual URL. What am I missing? How does this work in WordPress?</data:post.url></data:post.url>
  • 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.
  • Thank you, sir!
  • dieljph
    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/share-button-css

    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.
  • livingnicki
    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.
  • livingnicki
    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.
  • 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.
  • livingnicki
    having trouble getting it to work ... it doesn't show up in a post. great idea though, hope i can get it going.
  • LPH
    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.
  • 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.
  • Great Plugin, thank you!
  • Great job man! I was looking all over for this plugin, just installed it on my site. Cheers!
  • Marco
    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?
  • 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.
  • Sorry I meant to say Marco and I have the same problem
  • 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.
  • 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-windley-cto-and-co-founder-kynetx/for
    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
  • 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.
  • Awesome! Keep sharing your implementations guys!
  • 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!
  • Thanks Ehab - I'm still waiting for their approval. Hopefully soon!
  • Hey Jesse,

    I've installed and am using it on top of my content here: http://wordpressmodder.org/secondary-html-content-plugin-video-overview-728.html

    Thanks for the plugin:)
  • Adam, awesome! Thanks for trying it out - let me know if I can make it any
    better.
  • test comment
  • 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-facebook-connect/

    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.
  • Awesome was waiting for this before jumping in and hacking one together myself
blog comments powered by Disqus