Development

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

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

Leave a Reply