Integrate Facebook Comments into your WordPress Site
Facebook launched a new version of their commenting system in March 2011. The Facebook Comments WordPress Plugin lets you insert the Facebook comment box below the content of any post or page within your WordPress site. The plugin also stores all the relevant moderation settings to make it even easier to manage comments made on your site.
While you’re here, why not also try one of our other WordPress plugins including Twitter Feed!
Installation:
- Download the plugin direct from the Plugin Page at WordPress.
- Upload the whole plugin folder to your /wp-content/plugins/ folder.
- Go to the Plugins page and activate the plugin
- Check all the setting in the Facebook Comments Settings area
- Hit Update
Setup:
Once you’ve installed, you will need to:
- create an app within facebook. Name it whatever you like.
- connect it all to the commenting system. Choose your App and click Edit Settings. Click on the Web Site tab on the left. Ensure you enter the Site URL (e.g. http://pleer.co.uk/) and Site domain (e.g. pleer.co.uk) and hit Save Changes
Once you have installed the plugin, you can validate everything using the Facebook URL Linter.
The shortcode:
You You can insert the comment box manually in any page or post or template by simply using the shortcode:
[fbcomments]
To enter the shortcode directly into templates using PHP, enter
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://pleer.co.uk/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://www.facebook.com/2008/fbml">
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 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>
Also…
- 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
- Make sure there are no conflicting plugins also running. We have had reports that other Facebook related plugins can cause issues
- If you have updated from 1.0 or 1.1 to 1.2, check the Number of comments in your settings. If it is set to “on” change it to a number again
The Result:
Once the plugin is installed and set up, your comment box will appear as it does below. Why not say something about this plugin…
If you need support, please read the support section of this page before commenting
Maintained by Alex Moss
Alex is a partner at Pleer. He has worked in SEO for over 5 years and has been messing with HTML since he was 13. Alex is known mostly for his WordPress plugins, and contributes to Econsultancy, 123Reg, State of Search and many more.
