How to Add Facebook Comments to My Website

*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 http://developers.facebook.com
  • 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%

Moderation

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

 

Posted in: Development

Newsletter Sign Up

Was this article useful?

Sign up for the Web Ascender Newsletter and get tips for marketing your website, innovative new project launches, and a desktop wallpaper hand-crafted for you, all to your inbox each month.

Share This Article:

comments powered by Disqus
TEST
Request A Quote

Have a project in mind?

TELL US ABOUT IT »