Comments Plugin

The comments plugin lets people comment on content on your site using their Facebook account. People can choose to share their comment activity with their friends (and friends of their friends) on Facebook as well. The comments plugin also includes built-in moderation tools and social relevance ranking.

Step-by-Step

1. Choose URL or Page

Choose the URL of a website you want to use with the comments plugin.

2. Code Configurator

Copy and paste the URL into the code configurator below. You can adjust settings like the width of your comments plugin or how many posts you want to show by default (num_posts). Click the Get Code button to generate your comments plugin code.

3. Copy and Paste code snippet

Copy and paste the code snippet into the HTML of the website or webpage where you want to implement comments.

Comments Plugin Code Generator

Settings

The code configurator above only uses a subset of all possible settings for your comments plugin. You can also change the following settings:

Comments Sorting

People can sort comments by time or social ranking using the menu on the top right of the comments plugin.

You can define the default ordering using the data-order-by attribute and one of these three values:

social (default)

This is also known as "Top". The comments plugin uses social signals to surface the highest quality comments. Comments are ordered so that the most relevant comments from friends and friends of friends are shown first, as well as the most-liked or active discussion threads. Comments marked as spam are hidden from view.

Note: Older comment threads—including those associated with an Open Graph object created before the original release of the comments plugin—will not be able to be sorted by social.

time

Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom.

reverse_time

Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom.

Changing the Language

You can change the language of the Comments plugin by loading a localized version of the Facebook SDK for JavaScript. When you load the SDK, change the value of src to use your locale. For example, you can replace en_US with your locale, such as fr_FR for French (France):

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1"

You may need to adjust the width of a social plugin to accommodate different languages. Learn more about localization and translation.

Comments Moderation

A part of the comments plugin is a powerful moderation tool. This tool makes it easy and fast for your community management team to moderate multiple comments at once.

Setup

To use the comments moderation tool, you need to complete the moderation setup instructions.

Dashboard

There are 2 ways to navigate to the moderation tool:

1. App-based moderation view: Go to developers.facebook.com/tools/comments. You will get a list of all your Facebook apps, which lets you moderate all comments associated with each app. If you don't use a Facebook app with your comments plugin, you won't be able to use this view.

2. Page-based moderation view: Click the Moderation Tool link next to the comments box (see screenshot below). The view only shows comments posted to this webpage (URL).

Moderation View

We show both moderation views in the screenshots below. If you're using the app-based moderation view, you can use the menu to switch between apps.

In the moderation table, you can either approve or hide comments depending on their status. To change the status of multiple comments, use the checkboxes in the left column.

1. Page-based Moderation View

In this moderation view, all comments for a specific url will be displayed.

2. App-based Moderation View

In this moderation view, all comments for your application will be displayed.

3. Flagged Queue

Comments that have been flagged by users or Facebook will be displayed here. Comments in this list may be public or hidden depending on applications settings and how the comment was reported.

4. My Queue

To better split up work between developers, you can use the this feature to assign comments to yourself for moderation. Comments assigned here will still be available to other moderators or admins, but comments in your queue won't appear in others' queues.

Settings

For each app, you can define custom settings. Use the Settings button (on the top right of the tool) to open the settings dialog.

Moderators

You can promote other people to become the moderator of your comments. Start typing a friend's name into the input box and a typeahead will help you select the person you want to make a moderator.

Sort Comments By

You can also control how comments are sorted. Learn more in Comments Sorting.

Moderation

You can change the default visibility for new comments. For example, you might want to approve all new comments. If a comment isn't approved, the comment will only be visible to the commenter until a moderator approves the comment.

There are three different moderation modes:

Public

All comments will be public. They'll also appear in the Review tab.

Closed

All comments will be hidden.

Banned Users

In the tab Banned Users, moderators can search for banned users. If a new comment is published from a banned user, this comment will automatically have limited visibility and show up in the Review tab.

URL Settings

Closing A Thread

You can close a comments thread on any URL where you're using the comments plugin. Doing this means that people won't be able to add new comments to the discussion on that webpage. You can close a thread in the URL Settings menu.

Overriding Auto Close

If you've enabled auto close, you can override the a closed thread, which re-opens it for comments. To do this, go to URL Settings and turn on Override Auto Close. Then set the desired closure state for the URL you're moderating.

Moderation Setup

To use the moderation tool, you either need to connect a Facebook account or a Facebook app to your comments plugin implementation.

Setup using a Facebook App (Preferred)

If your site has many comments boxes, we recommend you specify a Facebook app ID as the managing entity, which means that all app administrators can moderate comments. Doing this enables a moderator interface on Facebook where comments from all plugins administered by your app ID can be easily moderated together.

<meta property="fb:app_id" content="{YOUR_APP_ID}" />

In addition to the people you add using the Moderators setting, all admins of your app will also be able to moderate comments, but only moderators would receive notifications for new comments if you have enabled notifications.

When you implement multiple comments boxes on your site and connect them to an app by specifying an app ID, the moderation settings you choose will apply to all your comments boxes.

For example, changing the moderation setting to has limited visibility affects all comments boxes under the same app ID. If you need to apply different moderation settings in different areas of your site, you should use two or more app IDs. You can then apply different moderation settings for each group of comments boxes.

Assign a Facebook Account as Admin

To assign a Facebook account to be the admin of a comments plugin implementation, include the following meta element in the <head> section of every webpage where you use the comments plugin:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

To add multiple moderators, add more than one element, each with one Facebook ID:

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_1}"/>
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_2}"/>

Comments Counter

Using the fb:comments-count value displays the number of comments on a given URL in a <span> element on your webpage. You can then use CSS to style this <span> element to match the rest of your website. Note: this feature isn't currently available in HTML5.

For example, to show the number of comments on example.com, use this code:

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

This will display:

69391 awesome comments

The number of comments on a given URL can be accessed by using the Graph API. For example, the number of comments on example.com is available using the comment_count property on the share field of the URL node:

https://graph.facebook.com/v2.4/?fields=share{comment_count}&amp;id=<YOUR_URL>

Webhooks

You can setup webhooks to have a script on your server notified when a new comment is posted. To get started:

1. Go to your App Dashboard
2. Click "+ Add Product" on the left-hand navigation
3. In the Webhooks section click "Set Up"
4. Choose "Application" in the drop down
5. Click the button "Subscribe to this topic"
6. In the dialog enter a URL of the script that will receive notifications, e.g. https://example.org/mywebhook.php
7. Enter a token - any string you choose. It will be sent to your script for verification
8. The last step in the setup is to click "Verify and Save" button

But before that, take a look at the Webhooks documentation for the full details on how implement your script.

Here's a quick example of how a simple mywebhook.php could look like in PHP.

Starting with the verification:

<?php
if ($_GET['hub_verify_token'] === 'make-up-a-token') {
  echo $_GET['hub_challenge'];
}

This make-up-a-token is the same string you enter in step 7 above.

Then simply log all the comments as they are posted:

file_put_contents(
  'log.txt',
  "\n" . file_get_contents('php://input'),
  FILE_APPEND
);
?>

Once you verify your Webhook you'll see "plugin_comment" and "plugin_comment_reply" in the Webhooks section of your App Dashboard.

Click "Test" to double-check your implementation with a sample response, then "Subscribe" to go live.

More details about the response are available in the Webhooks reference documentation.