Contact: (801) 853-8339 or jesse@staynalive.com
Twitter, FriendFeed, LinkedIn, or Facebook

825

Likes

ON FACEBOOK
TwitterCounter for @Jesse

FBFoundations Facebook Connect Plugin for WordPress

by Jesse Stay — published on October 10th, 2009
Share

lego bricksOne of my biggest frustrations in adapting Facebook Connect into WordPress blogging has been the fact that most plugins out there either have too much, or too little incorporated into them.  When you add more than one, you end up calling the Facebook Javascript Client libraries more than once, and often reinvent the wheel for what other people have done.  I mentioned this in a wish-list I posted earlier.  I want building blocks – I should be able to add a foundation, and add basic building blocks on top of that foundation to get what I want out of Facebook Connect on my blog.

Today I’m giving you that foundation.  I’ve written a WordPress plugin called FBFoundations which sets up the bare-bones necessities of any Facebook Connect install.  Once you have installed this plugin, the user can log in, and you have access to their login credentials from then forward to do whatever you want with. It’s a foundation – something to build a house on top of, and my hope is that many more FBFoundations-compatible plugins can emerge from this.

For instance, my next step will be to create a simple plugin for WordPress that uses the stream.publish API to post your blog to Facebook, and enable others to do so (tracking the number of comments and likes along the way if possible).  There will be no need to add a user log in to that process, nor do I have to load the XFBML init scripts to render XFBML.  It will all have already been loaded for me.

The script works a lot like Richard Miller’s “What Would Seth Godin Do” plugin from a UI perspective.  At a default (you can configure this in your preferences) the first 3 times a user visits your blog they will be presented with a popup dialog box encouraging them to connect with Facebook.  After those 3 times the popup no longer appears.  There will also always be a “Connect with Facebook” login button above your comments (assuming they’re wrapped in a #commentform div) that will appear until the user clicks on it and logs in.

Using this plugin encourages each reader to log in through Facebook (remember – there are over 300 million Facebook users.  Chances are most of your readers are on Facebook), and enables you to do cool stuff with each of those readers.  Hopefully this will inspire others to make other FBFoundations-compatible plugins so we’re not re-inventing the wheel any more.  Stay tuned for more plugins from me – what will you build with this as your foundation?

You can download the plugin here.  Just download it and unzip it into your plugins directory in WordPress, activate it, and then add the API key for your website.  (You’ll need to go to http://developers.facebook.com to add the developer app and add an app for your website if you haven’t done so already)

Or click here to download:

http://downloads.wordpress.org/plugin/fbfoundations-facebook-connect-plugin.zip

Please let me know in the comments if you see any issues.  This is 100% GPL so please make your own adjustments and let me know if I can fix mine!

UPDATE – v0.4 – 10/26/2009: The popup is no longer default and can be turned on/off. Also added meta tag support and better compatibility with 3rd-party comment systems.  See this blog post for more info on 0.4.

Here are some screenshots:

Screen shot 2009-10-10 at 6.21.49 PM

Screen shot 2009-10-10 at 6.19.47 PM

Screen shot 2009-10-10 at 6.19.13 PM

Posted on Saturday, October 10th, 2009 at 8:03 pm. Filed under Downloads, Facebook, Geeky, Howtos, Social Coding, Technology, wordpress. 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.

  • zenepay
    I got a problem it doesn't work on min. could you please more detail how i get API key for this particualr app
  • This won't conflict with Disqus?
  • Eric, it should work just fine with Disqus. I'm using it on my blog with no
    issues.
  • Martin
    Your instructions presume far too much prior knowledge. RG - where is the plugin page on my Wordpress? I've looked everywhere, and I can't find any mention or, or link to, a Plugin directory.
    "...and then add the API key for your website."
    Huh? Add WHAT? To WHERE?

    "You’ll need to go to http://developers.facebook.com to add the developer app and add an app for your website if you haven’t done so already..."

    Lost me completely. Which developer app? Where do I get it? How do I upload t?

    You have NO IDEA how annoying and frustrating it is to read instructions that assume prior knowledge, written by someone who knows all about it and forgets that other people know little or nothing about it.
  • Martin, have you installed a Wordpress plugin before? If not, Wordpress.com
    may be a better option for you. This only works with self-hosted Wordpress
    blogs.
  • its cool
  • I've installed this plugin, but I'm having trouble getting the button to show in the comments section. Can you explain a little more about how to ensure the comments are wrapped in a #commentform tagged div?

    Thanks for any help.
  • The tagged div must be with the id "commentform" (note it's not plural). I
    believe this is standard in most common templates, but you'll want to be
    sure your comments are wrapped in a tag with that id.
  • Nice plug-in
  • have to say the requirement to connect with facebook dialog is a deal breaker for me. I would not know myself where to begin to change this in the code so I will wait til the option to turn it off is part of the plugin to install it on my site
  • I'm looking for something similar to this but you'd only get the facebook connect as an option when you're leaving a comment.
  • I have rpx (look in the Wordpress.org plugins) running on my site in the comments - it was a pretty quick, painless install and gives users the opportunity to log in to comment using many other social sites as well.
  • Jessica, the problem with that is if you want to add any other Facebook
    Connect functionality it gets ugly fast. This let's you add things one at a
    time so your plugins aren't all conflicting with each other and you get
    exactly what you want.
  • What Jesse says is true - FB doesnt seem to like different FB apps running on a page all at once - I'm actually a bit surprised I was able to add the RPX Facebook Connect WP plugin and run a Fan Box on the page at the same time. When I tried Jesse's plugin I disabled RPX first. Jesse's plugin went in very easily and worked but I couldnt deal with the "this site requires Facebook Connect" dialog so I removed it and reactivated RPX.
  • rrhobbs, no worries - I'm working on enabling you to disable that. FWIW
    I've disabled it on here as well until I can get that fixed. I'm still open
    to anyone helping get that into the code though as my time's limited.
  • Thanks Jesse - we all appreciate your hard work - wish I knew enough code and had the time to work on it myself. FBML and integrating it into a php framework like WP is tough to someone like me who is hardly more than a hobby coder. Facebook is just in its infancy - imagine what using a telephone was like at first LOL.
  • Otto, thanks for the tips! I'm just getting familiar with Wordpress development so any tips are very appreciated. I'll get that in for a future release.
  • Thanks Pete - I got the URL wrong. I'll correct that.
  • Fair enough. Here's a couple of actual code problems with it then:

    First, the method you use to load the FeatureLoader is error prone. You're hooking to wp_footer and then echoing a script tag. Another script could potentially interfere with this, and try to load it twice. A standardized approach would be better. Here's my suggestion:


    add_action('wp_enqueue_scripts','fbfoundations_featureloader');
    function fbfoundations_featureloader() {
    wp_enqueue_script( 'fb-featureloader', 'http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php', array(), '0.4', true );
    }

    By using the standardized handle name (fb-featureloader), if another script were to enqueue it as well, then it wouldn't make the thing try to load in the page twice. This reduces plugin interference. The "true" at the end of the call makes it load the script in the footer instead of the head.

    Second: Same basic problem with jQuery. You hook to wp_head and then echo a script tag. Try this instead:

    add_action('wp_enqueue_scripts','fbfoundations_jquery');
    function fbfoundations_jquery() {
    wp_enqueue_script( 'jquery');
    }


    Much simpler, no?

    Third, options pages have nicer, easier ways of making them since 2.7: http://codex.wordpress.org/Settings_API . These let you put the settings on existing admin pages (instead of making your own), which makes a bit more sense for simple settings areas like these. No need to create an entire page when you can just make it a section on the General page (or wherever makes the most sense).
  • pete bratach
    Good stuff Jesse.

    Actually, a quicker way to get a Facebook API key is to go to http://www.facebook.com/developers/ and click Set Up New Application.
  • Otto, it was Jeremy you were agreeing with - see my response to him. Submit some code that turns this off if you don't like it. This is GPL'd code, a service to the community. I'm making nothing off of it - contribute or forever hold your peace.
  • Very much have to agree with Chris on this one. An FBConnect popup on the blog loading will make me close the blog, never visit it again, and start to badmouth it on other sites as well. It's a terrible, terrible practice, and a very large privacy intrusion.

    If you want to integrate FB Connect, then that's fine. But integrate it at the time of necessity, when you actually need to connect the user to Facebook to perform some action. Don't try to pre-emptively connect them, just in case you want to do something during their interaction later.

    Sorry, but no. Epic Fail for this behavior, can't recommend it to anybody because of this.
  • Jeremy, it goes away the minute you log into Facebook Connect, and it only appears the first 3 times you visit the blog and you never see it again. This isn't a popup advertising anything or anything like that - it's something intended to give you something much more useful than you had before if you use it. In that regard, I don't see it as a problem.

    That said, if you don't like it, it's GPL'd code, add in an admin option to turn off the popup and add the button into the body and send me the diff. I'd love to have that as an option for those that don't want the dialog on their blog.
  • Chris, I'm working to get it over there. I've never done it before so trying to figure out what I need to do right now.
  • Jeremy Franklin
    Popups upon arrival to a blog suck.
  • chris foster
    Would it be possible to upload to the repository at http://svn.wp-plugins.org/ I don't experiment with any plugins that are not in the repository, as it's just too much work to maintain uploads and updates for multiple sites. Thanks for taking the time in trying to make the Facebook - Wordpress integration a better one...Cheers
blog comments powered by Disqus