While WordPress comments are fine for communicating with readers of your blog they suffer from one great downfall… while they can keep current readers engaged, they don’t do a great deal to help attract new visitors to your site.
This issue is solved with Facebook’s new development tools that allow you to harness the social networking power of facebook right from your wordpress blog. While there are a number of apps available for immediate use (or to be refined into your own customized apps), probably the best of the bunch is the Facebook Comments App. This allows you to let visitors who are signed into Facebook, comment right on your blog post… and their comments show up on their own activity list within Facebook itself. This allows that visitor’s entire friend list to see what they have said, along with a link to the page on your Blog they are referencing.
Needless to say, this is a very big deal.
Here’s how to integrate facebook comments in your blog:
**Based on some feedback from users I should add the following point:
-When you copy and paste the code from this page to your site editor there is a chance that some characters will not copy as intended. Specifically, some people have had problems with the quotation marks. When you paste the code into your site editor, make sure the quotations transfer as intended. If they don’t, then replace them with in-code quotations (‘ and “)
****
1. Sign into your Facebook Account (hopefully you don’t need more instructions for this item)
2. Sign up to create a Facebook App here: http://developers.facebook.com/setup/
Don’t use the http:// with your site url. Just use the format www.websiteurl.com/ (include the trailing slash)
3. Once the application is approved you will see your Create an Application Page. Note application ID and Secret ID (you will need the App ID later)
4. Click on Developer Dashboard link. Allow Facebook Permission when it asks.
5.Now go to this url: http://graph.facebook.com/your-username (user your facebook username here… if you don`t have one, go into your facebook account settings and set one)
You will see your Facebook user ID that you will soon need.
6. Go to your current wordpress theme folder on your system and for steps 7 – 9 edit the header.php file.
7. Change the <html> tag to the following:
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” xml:lang=”en” lang=”en”>
8. Add the following between the <head> and</head> tags
<meta property=”fb:admins” content=”USER_ID”/>
<meta property=”og:title” content=”<?php wp_title(‘ ‘,true,’right’); ?>”/>
<meta property=”og:site_name” content=”YOUR SITE NAME”/>
<meta property=”og:type” content=”blog” />
<meta property=”og:image” content=”URL TO YOUR THUMBNAIL IMAGE”/>
<meta property=”og:description” content=”<?php bloginfo(‘description’); ?>”/>
9.Add the following right after the body tag
<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘YOUR APP ID’, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
(replace APP ID with your own app id that you found on the developer page a minute ago)
10. Go the Facebook Social Plugin page http://developers.facebook.com/plugins
11. Select the Comments Plugin
12. Select the number of comments you would like to show up on the page at any time.
Do NOT enter informatino into the unique identifier field (unless you know what you’re doing.) Leaving this blank will make the id the page url by default. 99% of you want it this way unless you are
including blog comments from a single post across multiple pages.
13. Click the get code button.
14. Place the snippet of code exactly on the page you want it on. This will generally be in single.php directly above or below the default comment code.
If you want to remove wordpress comments entirely, you can do so be editing comments.php to be a single line break in place of the existing code (hint: make a copy of comments.php first in case you change
your mind.
Keep in mind that this same process can be done to integrate facebook comments into any website page you wish. Allow comments on product pages, site homepages and more.
Sounds good but you’d rather have us do it for you? We’d be happy to. Click the link below and we’ll take care of this for you.
**** UPDATE JULY 2011 ****
Facebook continues to drive us all mad by no longer allowing the functionality they originally gave us. They are getting rid of this method of integrated facebook functionality.
For the time being you can use a migration snippet to keep it alive if you experience errors. To do so, add: migrated=1 to the fb comment code. example:
<fb:comments numposts=”15″ migrated=1></fb:comments>