Tutorial for Adding Facebook Comments to WordPress Without a Plugin

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.

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.

Facebook create App page

Step 3: Click on the Basic Setup link.

Facebook basic setup

Step 4: In the form that follows, fill in the App Name, Contact Email, Choose a Category and then click on Create App ID.

Create Facebook 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.

Add website URL for your App

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.

Adding 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.


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 blank and does not contain a URL.


<div class="fb-comments" data-href="" data-width="100%" data-numposts="10"></div>

Things to Note

  • 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.

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() ) {

/** Make necessary edits here **/
$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 = ""; //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); ?>" />
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

Note: Check your page source to see if your theme is already generating these tags. If so, you can skip this step.

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:


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.



  1. Frimpong says:

    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.

  2. M Mukesh says:

    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.

  3. Christen says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *