How to integrate Facebook Comments into a website

I’m going to explain how to integrate Facebook Comments into a website.

When starting a new web project we may have the doubt of which comment system we are going to use, there are a lot of comment systems for webs and blogs but now we are going to focus on Facebook Comments.

Get the code from Facebook Comments

We visit the official Facebook Comments page. We will find the steps to perform well ordered.
And we will find the basic fields to complete that we can in the following image:

We fill in each field:

URL: We will put the url of the page, being the url the identifier to group the comments by page. That is, the comments made in a page will only appear in that page.
Width: We set the width of the comment box in pixels, by default it is adapted.
Number of comments: Number of comments that will appear in the list. The answers do not count.
In the tab to order comments we choose the type of order.
Click on get code and the following window will appear.
There is no html5 code option, only JavaScript. We copy the code from the first box and place it as close as we can to the opening of the <body> tag, and the code from the second box we place it where we want the facebook comment box to appear.

Facebook Comments settings

Once we have obtained the code we can configure our comments system a little more, order them by different facets, put moderators or even take out the number of comments from the page.

Get the Facebook user ID:
https://graph.facebook.com/?ids=XXXXX
We replace “XXXXX” with the Facebook user we want to be a moderator. Your user will see it in the url of your Facebook profile when you connect. We will need this ID in case we want to add moderators as explained in point 2.
Adding moderators:
You can add several moderators to the commenting system, just put the Facebook user id in the code below and paste it into the ‘head’ tag. If we want several moderators we will repeat the code below for each additional one.

XHTML

<meta property="fb:admins" content="{FACEBOOK USER ID}"/>

1

<meta property="fb:admins" content="{FACEBOOK USER ID}"/>
Get the number of comments:
If we want to show the number of comments on the page, you can enter the following code replacing the url of HREF=myURL.com with the url of our page.

XHTML

<span class="fb-comments-count" data-href="https://myURL.com/"></span>

1

<span class="fb-comments-count" data-href="https://myURL.com/"></span>
App ID:
If we are going to interact a lot with the Facebook APIs, we better create an App ID in this url: https://developers.facebook.com/apps. But the problem with creating an App ID is that to create it you have to leave your cell phone or your credit card, something uncomfortable actually…

Facebook Comments sample code to use on your website

Here I leave you an example code to serve as a basis for your pages. And also a demo of Facebook Comments so you can check it out:

<html>

<head>
<title>Facebook Comments</title>
<meta property="fb:admins" content="XXXXXX"/>
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7&appId=270775685307";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
	
<br><br>

<span class="fb-comments-count" data-href="MYURL"></span>
comentarios 

<br><br>
COMMENTS BOX
<br><br>
<div class="fb-comments" data-href="MYURL" data-numposts="6"></div>

</body>
</html>

<html>

<head>

<title>Facebook Comments</title>

</head>

<body>

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.7&appId=270775685307";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

comentarios

COMMENTS BOX

</body>

</html>

The advantages of FB Comments

We largely avoid trolling the web, since we can only comment if we have a facebook account. The fact that the author’s name appears in each comment makes the comments less attacking.
Less spam. Even if spam comments are entered we can always block a facebook account from commenting on your website. It has easy moderation.
Saves bandwidth and better database performance. Comments will always be uploaded from external servers, i.e. comments will always be saved in Facebook Comments.
Easy configuration of the plugin, we can order the comments chronologically, by popularity… You can also give moderator permissions to other Facebook accounts…
Possibility to make a blacklist with the words you don’t want to appear in your web.
Increase of visits, notoriety in Facebook, by default when you make a comment, this is also shared in the user’s account, and unless you deactivate it all your friends will see it and maybe some of them will click and you will win a visit.
The design of the comments is adapted to the device in which they are displayed… it can be from a PC or a cell phone.

Disadvantages

We force them to have a Facebook account to be able to comment.
Little interaction with the APIs to be able to make comment rankings.