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.

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.

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.

app-review

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

fb-comments-code

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.

Example:

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

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 **/
$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); ?>" />
			
	<?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

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

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:

comment-moderation

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.

 
 
 
Related Articles

 

Comments

  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.

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

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

    • M Mukesh says:

      Christen, I have edited the code. Please try again using this new code.

  3. John says:

    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 :(

    • M Mukesh says:

      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:

  4. Xavier says:

    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.

  5. Linda says:

    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.

  6. Linda says:

    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.

    • M Mukesh says:

      No worries Linda. Glad the tutorial was useful and thanks for motivating comment.

  7. Clay says:

    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!

  8. alejandro says:

    Thank you so much for your help.

    But I have a problem, I cant see the comments on mobile. Help me please!

Leave a Reply

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