Developer news
Improving Comments Across The Web

Today, we’re launching updates to the Comments Box plugin with new moderation tools as well as features to improve the distribution and quality of comments on your site.

More Social Relevance

The upgraded Comments Box uses social signals to surface the highest quality comments for each user. Comments are ordered to show users the most relevant comments from friends, friends of friends, and the most liked or active discussion threads, while comments marked as spam are hidden from view.

In the example below, Cat is my friend and I see her comment first:

Users can obtain more context about a person by looking at the text next to a person’s name, where they can see information such as mutual friends, work title, age, or current city. This information shown will always respect the person’s privacy settings, and you will only be able to see information you can already see on Facebook.

Improved Moderation Tools

The updated Comments Box provides moderation tools that were created based on developer feedback. Admins can choose to make the default for new comments entered either “visible to everyone" or “has limited visibility" on the site (i.e., the comment is only visible to the commenter and their friends), to help mitigate irrelevant content.

In addition to changing the visibility of a comment, admins can also blacklist words and ban users. If a new comment is published from a banned user or contains a blacklisted word, this comment will automatically have limited visibility.

Admins can moderate on the Comments Box directly or on the moderation dashboard. The moderation dashboard, accessible from a link on Settings, aggregates comments from all Comments Boxes across your site and shows a public and admin view.

Users can also help moderate and mark a comment as spammy or abusive by clicking the “X" next to a comment and selecting one of the options to remove the comment from view.

Better Distribution

Comments can now be more are easily shared with friends or with people who like your Page on Facebook, opening up your content to a wider audience. If a user leaves the “Post to Facebook" box checked when she posts a comment, a story appears on her friends’ News Feed indicating that she’s made a comment on your website, which will also link back to your site.

Likewise, a Page admin can leave a comment as a Facebook Page and the comment will be shared on the Page’s Wall so people who’ve liked the Page have the opportunity to join the conversation as well.

Friends and people who like the Page can then respond to the discussion by liking or replying to the comment directly in the News Feed on Facebook or in the Comments Box on your site. Discussion threads stay synced across Facebook and on the Comments Box on your site regardless of where the comment was made.

Users will also receive a notification whenever another user replies to their comment. Clicking on the notification will take the user back to the web page where the comment originated, driving more traffic back to your site.

Enabling other login providers

In addition to Facebook for login, you can also give users the option of logging in and commenting with other login providers (option is set via the “Settings" link). If the user does not have a Facebook account or is not logged into Facebook, she can comment with other accounts to leave a comment. We plan to add other login providers soon.

How to integrate

The upgraded Comments Box is easy for sites to implement and requires just one line of code:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>

If you already have the original Comments Box installed, include the parameter migrated="1" to keep existing comments:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments xid="YOUR_XID" migrated="1"></fb:comments>
Please note that if you are migrating, you will not need to provide the href parameter.

You will also need to add the appropriate Open Graph meta tags to access moderation. Add these meta tags are in the <head> section of your page:

  • To moderate comments across a site, all moderators must be added as admins of the app:
    <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">
    
  • To receive notifications on every comment posted to the Comment Box, add:
    <meta property="fb:admins" content="{YOUR_USER_ID}">

Full example here:

<html>
<head>

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

</head>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script>

<body>

<div id="fb-root"></div>

<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>

</body>
</html>

See it live

A variety of sites from around the world have integrated the updated Comments Box. You can learn more about how it works by watching this video:

We hope the updated Comments Box creates a better commenting experience on your site, making both participating and reading comments around the web more enjoyable.

Ray He, a Platform Engineer, looks forward to engaging in more meaningful discussions around the Web.