Facebook launched a new version of their commenting system in March 2011. The Facebook Comments WordPress Plugin lets you easily integrate Facebook Comment below the content of any post or page within your WordPress site.

Installation:

  1. Download the plugin direct from the Plugin Page at WordPress.
  2. Upload the whole plugin folder to your /wp-content/plugins/ folder.
  3. Go to the Plugins page and activate the plugin
  4. Check all the setting in the Facebook Comments Settings area
  5. Hit Update

Setup:

Once you’ve installed, you will need to:

  • Create an App so that you can handle within Facebook. Click + Create New App to the top right of the page. Name the App something memorable e.g. “Comments” and give it an app namespace.
  • Choose your App and click Edit Settings. Ensure you enter your domain in both “App Domains” and as the “Website with Facebook Login” URL. Hit Save Changes

Facebook Comments can be validated by URL using the URL Debug Tool.

The shortcode:

As well as having Facebook Comments insert automatically, you can also insert the comment box manually within any page, post or template by simply using the following shortcode:

[fbcomments]

To enter the shortcode directly into templates using PHP, enter

echo do_shortcode('[fbcomments]');

or if you want to, for example, not include Facebook Comments within post IDs 123, 345 and 456 then simply enter this code:

if (!is_single(array(123,345,456))) {echo do_shortcode('[fbcomments]');}

You can also use the options below to override the the settings above.

  • url – leave blank for current URL
  • width – minimum must be 350
  • title
  • num – on/off
  • count – on/off
  • countmsg

An example using these options is

[fbcomments url="http://peadig.com/wordpress-plugins/facebook-comments/" width="375" count="off" countmsg="wonderful comments!"]

Support

There are a few issues that the plugin has, which mainly has to do with theme limitations. If the plugin doesn’t appear, you may have to check that all the Facebook elements are loaded into the theme:

Facebook and Open Graph Protocol Namespace

The following should be inserted to replace the current <html> tag:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">

Facebook App ID Meta

The following should be inserted within <head> tag, changing YOUR_APP_ID to your App ID:

<meta property="fb:app_id" content="YOUR_APP_ID"/>

Facebook App ID Meta

By default, all admins to the App ID can moderate comments. To add moderators, enter each Facebook Profile ID by a comma without spaces. To find your Facebook User ID, click here where you will see your own. To view someone else’s, replace “me” with their username in the input provided. Enter this information within

<head>

:

<meta property="fb:admins" content="ID_1,ID_2,ID_3"/>

Facebook Javascript SDK:

In the plugin, this is inserted just before </body>. Technically, it is best to insert this directly after <body>, changing YOUR_APP_ID to your App ID:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>ent.getElementById('fb-root').appendChild(e);
}());
</script>

Need a Facebook App ID. How to generate a Facebook App ID.

Is this SEO Friendly?

The author Alex Moss, who also runs online marketing agency FireCask, has looked into whether having comments will help when it comes to SEO. Facebook has stated that “the Facebook comments box is rendered in an iframe on your page, and most search engines will not crawl content within an iframe”, however, Alex’s experience has shown that Google is able to crawl content within iframes. Thinking naturally, the content of your page is more important than the comments within the page itself so we’d advise not to worry too much about it :)

Not working in IE?

If the plugin is working in all browsers except for Internet Explorer, check the above. There is also a solved support thread within WordPress support.

Alex Moss

Developed by

As well as being the co-founder of Peadig, Alex is also a Director of the online marketing company FireCask. He also develops many WordPress plugins with over 500,000 combined downloads.