How To Add Facebook’s New Commenting Plugin To WordPress Blogs

Since yesterday, bloggers have buzzing about Facebook’s new commenting plugin that will, in my humble opinion, redefine the way comments flow throughout the web.

One defining comment from Facebook in their write up was this:

The upgraded Comments Box is easy for sites to implement and requires just one line of code:

I would say this is true with one huge exception – WordPress blogs.

If you want to integrate your comments plugin into a WordPress blog, AND take advantage of all of the features that the new Facebook commenting system offers, then you’ll have to do a bit more than add just one line of code to a page.

How to implement Facebook comments plugin into WordPress

First, let me tell you all of the benefits you’ll get if you implement the comment’s plugin properly into your WordPress blog:

1. Massive exposure and traffic to your articles – this will happen when someone leaves a comment and the title of your blog article is actually a link in the comment that people can click – click = more traffic to your blog, especially considering the fact that each time someone comments via Facebook, that comment syndicates out to all of the their friend’s walls.
2. Monitoring, aggregating all of the comments in one “administrator’s dashboard”.  If implemented properly on WordPress, you’ll be able to see every comment made throughout your entire blog, all in one location. This will help you ensure that you never miss an opportunity to engage and continue a conversation on any of your articles.  This happens on the Comment Moderation Tool.

There are more benefits to be sure, but these two are biggies for someone wanting to integrate Facebook comments into their WordPress blog.

So after hours of tweaking and testing, and trying to get all functions to work properly, I figured out one method that is working beautifully – I’m able to monitor all comments throughout my blog, comment as my Facebook page, and make sure I never miss an opportunity to engage with a Facebook commentor, which helps keep the conversation moving and getting more people involved.

A)  Install the Facebook Comments for WordPress plugin

Simply go to your “plugins” section in the dashboard of your WordPress blog and search for “Facebook Comments for WordPress”.

B) Setup the Facebook Comments plugin

After you install and activate that plugin, you’ll have to setup a new Facebook plugin so that you can enter the “application ID” and the “application secret”.

If you haven’t already, quickly setup your app here

Then make sure the first four settings are checked.  This will ensure that the proper code for the Facebook comments plugin is properly installed through your WordPress database.

Finally, ensure that all of the “Application Settings” are unchecked. There’s three application settings, and you want to ensure that all three are unchecked.

You do not want to use this plugin to display the Facebook comment’s box. This plugin has not been updated yet to present the latest commenting plugin. We only want to use this plugin for the first four settings, which sets up your WordPress blog to work with the new Facebook comment’s plugin.

C)  Embed the Facebook plugin into your single.php

Now you want to get the code for the new Facebook comment’s plugin and embed it into your single.php file in your WordPress blog.

Get the code for your Facebook comment’s plugin here.

Leave the “example.com” URL (or whatever is showing) in the “URL to comment” field for now.

Change the number of comments to something like “10” or more.  Remember, you want people to see a lot of comments and discussion happening on your articles – I’m using “10” on my blog.

Leave width at “500” unless your blog requires a shorter width px.

Now click “Get Code” and paste the entire piece of code in your single.php file.

Or just copy and paste the code below:

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=149712681755876&amp;xfbml=1″></script><fb:comments href=”example.com” num_posts=”3″ width=”500″></fb:comments>

D)  Customize your code to work properly in WordPress

#1 – you need to replace the appId number above with the appId you got when you setup your Facebook application.

If you don’t have an appId yet > click here to get one – then go back to “Step B” can complete setting up the plugin.

#2 – you need to replace the “href=” field with your WordPress URL php code which is this:

<?php the_permalink(); ?>

So the complete piece of code that you embed into your “single.php” file looks like this (replace the “x” with your own app ID):

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxxxxx&amp;xfbml=1″></script><fb:comments href=”<?php the_permalink(); ?>” num_posts=”10″ width=”500″></fb:comments>

The <?php the_permalink(); ?> element is the piece of code that tells the Facebook comment’s plugin what URL and TITLE to display in the comments that get distributed throughout Facebook.

And that’s it.

Make sure you visit your Comments Moderation Tool to track the comments that are being made throughout all of your articles on your WordPress blog.

And of course, post your questions in the comments below if you need help!