Integrating WordPress Comments with Facebook

In a constant search for achieving comment nirvana for the sites I manage, I was recently looking into integrating WordPress (and a couple of other CMS engines) with Facebook. The sites are setup to only allow authenticated users to comment and it just seemed like with all of the single-sign on technology out there that it just didn’t have to be so annoying. After installing the OpenID integration it seemed like there still had to be a better way to allow even more people to authentication. How about Facebook?

Facebook has done a lot of work on making their API one of the best in the social networking world. The initial implementation of FBML was a little clunky (a client was an early adopter) but it proved to be one of the things that set them apart from the competition. And the API doesn’t just allow for embedding objects into Facebook, it allows for extending Facebook out as well. One of the best examples of this is for authentication.

Which brings us to actually making it work. The first thing to do is go grab an API key. To do so, visithttp://www.facebook.com/developers/apps.php and click on Set Up New Application (orhttp://www.facebook.com/developers/createapp.php?version=new). Provide the domain name and any other required fields and out pops an API key and a secret. The API key will be exposed but the secret will act as a password of sorts, much the same way many other key exchanges function. Copy these and do not give them out.

Once you have your key, go to your WordPress site and log into the admin page. From there, click on Plugins and then click on Add New. Search for WP-FacebookConnect. Install the one fromĀ Adam Hupp and then locate it in your sidebar (it will say Facebook Connect). Click on it and then provide the API Key and Secret and click on Update Options.

Now that it the plugin is installed and configured it’s time to add it to your theme. This part is a little more tricky than most but it can be as simple as a single paste. Copy this into your clipboard:

<?php do_action(‘fbc_display_login_button’) ?>

Now click on Appearance back in the sidebar and then click on Editor. In the Editor scroll towards the bottom (usually) and locate the form that takes in the comments, which likely begins with:

<div id=”comment-form”>

Now paste it in immediately above or somewhere inside the form, which means somewhere below the first line but above the following:

</div>

Once done, open one of your pages and you should see the Connect with your Facebook Account icon so you can authenticate using Facebook. You can also move the text around in the box by moving between areas in the comments.php file (in the themes screen). If you don’t see the Facebook icon then try accessing the site from another browser as you might still be logged into your administrative portal.

Finally, consider the strategy that you use for managing comments. You can still hold comments for approval, you can still approve once and give users unbridled commenting love and you can still scan comments for spam using one of the filters for doing so. That is according to you. But you now have an easy-to-authenticate to solution where visitors don’t have to sign up and get an email back, etc. But they can if you want, given that there are still at least 4 or 5 people (I believe they are in deep freeze somewhere) who don’t use Facebook, and you wouldn’t want to alienate them!

4 Comments

  • August 31, 2010 - 12:58 am | Permalink

    Hello – good post. Here’s a question – I have used various blogs over the years (Blogger, MovableType and now WordPress) and I have looked into the Facebook Connect comments widget (it works very well). However, the only hurdle now to implementing it is to import the comments from WordPress to Facebook Connect. Any ideas?

    • August 31, 2010 - 6:21 am | Permalink

      You mean have the comments of the poster show up on their wall? That works automatically out of the box. I haven’t seen a way to have them post to my Facebook account, but then I don’t think I’d want that in my case anyway.

  • August 31, 2010 - 1:00 am | Permalink

    Also, your comments RSS is broken :(

    • August 31, 2010 - 6:19 am | Permalink

      Turn that frown upside down as It is intentionally broken. ;)

  • Comments are closed.