How to Add Facebook Comments to My Website

By September 9, 2014 One Comment

*This is an updated version of our previous tutorial on adding Facebook comments to your website.*

Facebook’s social plugin, Comments, allows you to quickly add comments to your website. Users not only have access to basic commenting abilities, they also have the option to cross-post their comments directly into their Facebook Timeline. Comment Administrators also gain access to a deeper stat-tracking system through Facebook Insights. While in the past the Comments box served merely as a static addition, it now has the capacity to provide direct communication between a website, a Facebook user, and all of his or her friends.

How to add Facebook comments to my website

How to add the Facebook Comments Box to your website

1.) Create a Facebook App (Relax, it’s not that scary.)

  • Visit
  • Login with your Facebook account
  • Select Apps from the navigation menu and choose Create a New App
  • Fill in the Display Name and select a category that matches your app
  • Click Create App – You’ll now be taken to your App’s Dashboard page

Create Facebook app

  • Click the Settings link and add a Contact Email address and App Domain (your site URL) – Save your changes

Update your Facebook appid

  • Click the Status & Review link and toggle the switch to make the app public.

Make your Facebook App public

2.) Create your Comments box (you’re almost there!)

Facebook offers a simple and easy to use Comments code generator which looks something like this:

Facebook Comments box code generator

  • Simply insert the URL you want Facebook to link to, the number of posts you would like displayed, and the width you want your Comments box to be – Click Get Code

Embed Facebook Comment

  • Add the Javascript SDK (first box) after the opening <body> tag – Add this once to a page
  • Add the Facebook Comments plugin (second box) to your page. This is where the comment box will be displayed.

Dynamic Comments (WordPress example):

If you would like comments to appear automatically with a unique url, change the data-href value to be your permalink url. For WordPress, it would look like this: data-href=“<?php the_permalink(); ?>”

Attributes And Moderation

Data Attributes

data-colorscheme : “light” or “dark” theme

data-href : the URL associated with the Comments box.

data-numposts : the number of comments to show by default

data-order-by : “social”, “reverse_time”, or “time”

data-width – the width of the plugin in pixels. For a fluid width, use 100%


If you need multiple moderators for your newly added Comment box, visit your App’s Role page and add their Facebook ID as an Administrator.

Facebook comment moderation

Web Application Startup Guide

A 30-page ebook that covers positioning, marketing, pricing, and building your startup product, plus more.

Join the discussion One Comment

  • Angie Philipps says:

    I followed the instructions but it will not let me moderate, says there is no comments…can’t delete, etc..

Leave a Reply