Adding Facebook Comment System on a Website

After reading a Facebook comment from a group page, I felt like may be I should simply make a video tutorial on this. So, this post is basically for all who want to implement Facebook comment system on their website. However, one should remember that adding such plugin on a static html based site is bit harder than CMS based sites like this one.

Step by Step Guide to add Facebook Comment System on your site.

Step 1: Create a Facebook App

  • Login to your Facebook account and visit the Developer's page.
  • Click on "My Apps" menu and select "Add a New App" sub menu item. A new pop-up window should appear and should select "Website" from there.
  • Simply type the name of your App on the input field and press "Create New Facebook App ID" button. A new pop up window should appear.
  • Select the appropriate "Category" from the drop-down menu and click "Create App ID". You will be given your Facebook SDK for JavaScript. Please provide the URL for your site and click "Next". At this point you are done with creating the app. However, we need to make some adjustments.
  • Go back to the "My Apps" menu and select your newly created app.
  • From the App Dashboard window click on "Status & Review" and tap on the button where it says "Do you want to make this app and all its live features available to the general public?". Once it is "on" we are ready to roll.
  • From the Developer's page section, click on "Docs" menu and select "Social Plugins". Click on "Comments" section. A new page should appear.
  • Make necessary changes (width, color scheme etc.) from the Comments page and then click "Get Code" button. A pop-up window (Your Plugin Code) should appear.

Step 2: Adding Codes on Your HTML Page

  • There should be two different block of Code. First portion is the JavaScript SDK which you should place right after the <body> tag.
  • The second portion of the code looks something like this:
    <div class="fb-comments" data-href="URL" data-numposts="5"></div>
    Place this line anywhere on your page. This is the place where you would see your comment form. Change the "URL" section on your every single static HTML page based on the location(URL) of the file.

Step 3: Adding Code on Your WordPress Site

  • Log-in to your WordPress site.
  • Go to "Appearance" and then click on "Editor". Select the "header.php" file from right hand side of your screen.
  • From the page editing section, find <body> tag and place the first portion of your code (that you received from Facebook - JavaScript SDK). Once done, simply click on "Update File" button.
  • Now, if you want to show Facebook comment System on Pages, select "page.php" file or if you want this Comment system for blog post, select "single.php" page from the right side of your screen.
  • Place the second portion of your code (provided by FB) anywhere you want (should be after <?php the_content(); ?> tag). Make sure to change the data-href value with <?php the_permalink(); ?> function. In other words, it should look something like this:
    <div class="fb-comments" data-href="<?php the_permalink(); ?>"></div>
    Simply update the page once you are done.

That's pretty much all you need to do to add Facebook Comment System on your site. I highly recommend you to watch the video tutorial.for better understanding. Now, I am taking questions.


Commenting is disabled.