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.
You may start to see some impact to Social Plugins due to an updated cookies consent prompt that will be shown to people using Facebook products in the European Region. We will no longer support the 'Like' and 'Comment' Social Plugins for European Region users, unless they are both 1) Logged into their Facebook account, and 2) have provided consent to the “App and Website Cookies” control. If both of these requirements are met, the user will be able to see and interact with plugins such as the 'Like' or 'Comment' button. If either of the requirements above are not met, the user will not be able to see the plugins.
The European Union (EU): Austria, Belgium, Bulgaria, Croatia, Republic of Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Germany, Greece, Hungary, Ireland, Italy, Latvia, Lithuania, Luxembourg, Malta, Netherlands, Poland, Portugal, Romania, Slovakia, Slovenia, Spain, Sweden
Non-EU Members, but in EEA-Only/EFTA or Customs Union: [EEA Only/EFTA] Iceland, Liechtenstein and Norway;Switzerland: [EU Customs Union] all Channel Islands, Isle of Man, Monaco; UK sovereign bases in Cyprus; [European Customs Union] Andorra, San Marino, Vatican City.
Choose the URL of a website you want to use with the comments plugin.
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.
Copy and paste the code snippet into the HTML of the website or webpage where you want to implement comments.
The code configurator above only uses a subset of all possible settings for your comments plugin. You can also change the following settings:
Setting | HTML5 Attribute | Description | Default Value |
---|---|---|---|
|
| The color scheme used by the comments plugin. Can be "light" or "dark". | "light" |
|
| The absolute URL that comments posted in the plugin will be permanently associated with. All stories shared on Facebook about comments posted using the comments plugin will link to this URL. | Current URL. |
|
|
|
|
|
| A boolean value that specifies whether to show the mobile-optimized version or not. | Auto-detected |
|
| The number of comments to show by default. The minimum value is 1. | 10 |
|
| The order to use when displaying comments. Can be "reverse_time" or "time". The different order types are explained in the Comments Sorting section. | "reverse-time" |
|
| The width of the comments plugin on the webpage. This can be either a pixel value or a percentage (such as 100%) for fluid width. The mobile version of the comments plugin ignores the width parameter and instead has a fluid width of 100%. The minimum width supported by the comments plugin is 320px. | 550 |
People can sort comments by time 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 values:
reverse_time
(default)Comments are shown in the opposite order that they were posted, with the newest comments at the top and the oldest at the bottom.
time
Comments are shown in the order that they were posted, with the oldest comments at the top and the newest at the bottom.
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.
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.
To use the comments moderation tool, you need to complete the moderation setup instructions.
Moderation Setup InstructionsPlease note that you cannot use the Graph API to reply to comments made via the Comments Plugin.
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).
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
2. App-based Moderation View
3. Flagged Queue
For each app, you can define custom settings. Use the Settings button (on the top right of the tool) to open the settings dialog.
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.
You can also control how comments are sorted. Learn more in Comments Sorting.
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:
All comments will be public. They'll also appear in the Review tab.
All comments will be hidden.
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.
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.
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.
To use the moderation tool, you either need to connect a Facebook account or a Facebook app to your comments plugin implementation.
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.
You can specify either fb:app_id
or fb:admins
, but not both.
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}"/>
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}&id=<YOUR_URL>
You can setup webhooks to have a script on your server notified when a new comment is posted. To get started:
https://example.org/mywebhook.php
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 ); ?>
Note that in PHP $_POST
will not work, you need file_get_contents('php://input')
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.