You can always use the official Facebook plugin for WordPress to integrate Facebook comments into your WordPress blog. But be aware that this plugin has not been actively maintained or updated for over 2 years now. In-fact Facebook has declared that it no longer actively supports this plugin by adding the plugin to its deprecated plugins page. Instead, consider this Facebook comments plugin by Alex Moss. Or, if you want to add comments without a plugin, continue reading this article.
I am going to show you how you can add Facebook comments to your wordpress blog without using a plugin. Here's what I will be covering in this tutorial:
- Adding Facebook comments to WordPress.
- Making the Facebook comment box fully responsive.
- Moderating Facebook comments.
This step by step tutorial is for WordPress users but you can apply it to other platforms as well.
So let's get started.
1: Creating a Facebook App
The first step is to create a Facebook App. Here's how you can create an App.
Step 1: Login to your Facebook account and then visit the Facebook Apps URL which is as follows: https://developers.facebook.com/apps
Step 2: Click on Add a New App button.
Step 3: Click on the Basic Setup link.
Step 4: In the form that follows, fill in the App Name, Contact Email, Choose a Category and then click on Create App ID.
This will take you to the App Dashboard where you can see your App ID. Make a note of this ID.
Step 5: Now we need to add your website URL to the App. To do this, click on settings from the left panel of your App Dashboard and then click on the +Add Platform button. Select Website as the platform.
Now, in the website field that appears, enter the URL of your website and click Save Changes.
Step 6: Now we need to make the App publicly available. To do this, click App Review from the left panel of your App Dashboard and make the App public by sliding the bar to Yes as shown in the image below.
Now your App is all set-up and you can go to the next step.
2: Adding Facebook SDK and Plugin Code to Your WordPress Blog
This next step involves generating Facebook code and adding the code to your website.
Step 1: Visit the following URL to generate the Facebook Comments Plugin Code to add to your website.
https://developers.facebook.com/docs/plugins/comments
Step 2: In the Code Generator form that follows, add your website URL, an appox number for width and number of posts and click on the Get Code button.
Step 3: A pop-up with your code will follow. As shown in the image below, from the drop down menu, select the App that you just created (Make sure that you are still logged into Facebook for this to work).
Now open your WordPress theme's header.php page and add the Javascript SDK code (represented by Code 1 in the image above) right after the body tags.
Next, add the plugin code . Open your wordpress theme's single.php page and add the plugin code (represented by Code 2 in the image above) above the WordPress comments code.
While doing so, make sure that the data-href="" field is changed as follows so it automatically gets the URL of the current page.
<div class="fb-comments" data-href="<?php echo esc_url(the_permalink()) ?>" data-width="100%" data-numposts="10"></div>
- Change the value of width to 100% to make the comment box fully responsive.
- Codes of different WordPress themes look different. This is just a example to show you what you need to do to get the code working.
- If you want to remove WordPress comment box, then add this code to your blog's single.php page.
3: Adding OG Tags to WordPress Header
If you wish to moderate your blog's Facebook comments, then it is important that you add all important Facebook OG tags to your blog's header.php page.
The important OG tags to add are og:url, og:title, og:description, og:type, fb:app_id and fb:admins.
To do this, just add the following code to your theme's functions.php page:
function og_metatags() {
global $post;
if(! is_single() ) return;
/** Make necessary edits here as indicated **/
$og_type_homepage = "website";
$og_type = "article";
$fb_admin = ""; //Add your facebook ID between quotes.
$app_id = ""; //Enter your App ID here.
?>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:type" content="<?php echo $og_type; ?>" />
<meta property="og:site_name" content="<?php bloginfo(); ?>" />
<meta property="fb:admin" content="<?php echo trim($fb_admin); ?>" />
<meta property="fb:app_id" content="<?php echo trim($app_id); ?>" />
<?php
}
add_action('wp_head', 'og_metatags', 4);
Make sure to add your Facebook Admin ID and App ID in the code.
This code will add OG tags to all your single post pages.
Here is an in-depth article on adding social media tags to wordpress: How to Add Facebook OG tags and twitter cards to WordPress without a plugin
4: Moderating Facebook Comments
Now all we need to do is moderate the comments. Here are the steps to do this.
Step 1: The first step is to visit the Facebook Comments Moderation Tool. To reach this tool, click on the Tools & Support link and then Click on the Comments Moderation Tool from the left panel. Or you can simply click on the following link to reach the tool:
https://developers.facebook.com/tools/comments/
Step 2: Once you have reached this tool, select your App from the drop down menu as shown in the image below:
You should now be able to view all your comments under the Public tab. All comments under moderation will appear under the Review tab. To set moderation rules, click on the settings tab.
So this is how simple it is to add Facebook comments to your WordPress blog. If you have a query, feel free to leave it in the comments below.
Hello, I followed your tutorial and it worked but my problems is why is that all my post are having the same facebook comment ?
Thanks as you reply to my request.
Hi Frimpong, make sure that in the code you added to your single.php or comments.php page, data-href="" is left blank. Refer, step 3 again under the heading "Adding Code to Your WordPress Blog". I have made the necessary correction.
Any idea why, after adding the code in functions.php, this appears at the top of my page?
"/>
I can't make it go away.
Christen, I have edited the code. Please try again using this new code.
Will this only work for a static page/url or will it also work in articles, which have different urls? I'm not able to get it to work in articles :(
Hi John, this should work on all single posts. All you need to do is add the facebook code to your theme's single.php page. Make sure that the 'data-href' field is left blank as follows:
Wow God Bless You!!!, all worked fine for me, but i have a little "problem" with the moderation tools, before, i had installed a worpress plugin for Facebook comments, called "Facebook comments" and the moderations tools, was how you showed in guide with the app ID: http://orbitingweb.com/wp-content/uploads/comment-moderation.png, but now it show with the permanent links, http://imgur.com/iI4e0oH, I will really like if was with the app ID and not with the permanent links, if you can help me, I would really, really apreciate it, thanks a lot, excelent post.
Hello,
After days of trying options, your advice has gotten me very close to success, but I still do not see the moderation tool. So frustrating! My comments are all displaying on the post, but I see no Moderation link, and there are no comments to moderate in facebook developers.
I plugged my url into https://developers.facebook.com/tools/debug/ to reset and try again to connect. I got the warning:
---------------------------------------------------
Object at URL 'http://www.balletforadults.com/' of type 'website' is invalid because it specifies multiple 'og:url' values: http://www.balletforadults.com/, URL.
------------------------------------------------------
I feel like there must be some simple adjustment to make, and I can't figure it out.
1. In the div code, I have made sure that the data-href="" field is blank and does not contain a URL.
2. In functions.php I have:
--------------------------------------------------------
function og_metatags() {
global $post;
if(! is_single() ) return;
/** Make necessary edits here: Note: the only things I have inserted here are my two id numbers **/
$og_type_homepage = "website"; //Content type of the homepage.
$og_type = "article"; //You can change this to use a different a content type if needed. Eg: profile.
$fb_admin = "inserted my id here"; //Add your facebook ID between quotes.
$app_id = "inserted my app id here"; //Enter your App ID here.
?>
<meta property="og:url" content=""/>
<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:site_name" content="" />
<meta property="fb:admin" content="" />
<meta property="fb:app_id" content="" />
<?php
}
add_action('wp_head', 'og_metatags', 4);
------------------------------------------------------------
Any advice for me?
Thanks for a great, specific, easy to follow tutorial.
Hello,
Sorry about the long post above. Maybe the system had to reset, but my Moderation tool is appearing! (You can delete my post if you like).
Thank you again for THE tutorial that saved the day.
No worries Linda. Glad the tutorial was useful and thanks for motivating comment.
Thanks a bijillion! I messed around with facebook comments for days. Finally found your site and realized that leaving the "data-href field blank" works and finally is the solution I needed! Thank you!
Thank you so much for your help.
But I have a problem, I cant see the comments on mobile. Help me please!
Hello guys, those who still have problems with Comment mirroring please check my new blog post https://geekzarise.com/facebook-comments-to-mirroring-complete/. Thank you. :)
Thanks for the article! Which is better method placing code into WP or installing a third-party plugin?
Thanks, it's really helpful
Hi! Thanks for the tutorial, have you any idea what this error means:
Warnings That Should Be Fixed
Extraneous properties specified
The following properties are specified on the webpage but NOT supported for the specified 'og:type': fb:admin
Also Ive followed all steps from your tutorial but it seems that somehow people can comment on my article, i get a notification about that but i cant see their comment on my blog. Comments made are in the comment moderation section from facebook, they look approved but missing on my site. Posted one test comment myself and the comment was posted and visible, tried from 2 different FB accounts.
Wonder if you can help me please, thanks!
Hi Tankist, try using the following code on your site:
<div class="fb-comments" data-href="<?php echo esc_url(the_permalink()) ?>" data-width="100%" data-numposts="10"></div>
Do you have to fill in something overhere? $og_type_homepage = "website"; //Content type of the homepage.
Also I did all you explained here and seems that the commets are now gone
Nope, you can leave that field as it is. As for the comments box, try using the following code on your site:
<div class="fb-comments" data-href="<?php echo esc_url(the_permalink()) ?>" data-width="100%" data-numposts="10"></div>
Hi, this $og_type_homepage = "website"; , what "website" should I change to? like mydomainname.com?
And this $og_type = "article"; , is this for the post format? If so, what can I change this to so to get the post format?
Thanks.
You can leave them as it is. You only need to add your facebook Admin ID and App ID as indicated.