FBFoundations Facebook Connect Plugin for WordPress – Stay N Alive

FBFoundations Facebook Connect Plugin for WordPress

Posted on by jessestay

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

33 thoughts on “FBFoundations Facebook Connect Plugin for WordPress”

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

  25. 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 #commentsform tagged div?

    Thanks for any help.

    Reply

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

    Reply

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

    Reply

  36. FBFoundations Facebook Connect Plugin for WordPress | Stay N' Alive…

    One 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…

    Reply

  38. […] Chicklet I saw this morning that Jesse Stay had created a rather neat little chicklet for his FBFoundations plugin. I thought it was a clever idea, so naturally I stole it and added it to Simple Facebook […]

    Reply

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

    Reply

  45. I got a problem it doesn't work on min. could you please more detail how i get API key for this particualr app

    Reply

Leave a Reply

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