Back to News for Developers

Adding new features to Comments Box

April 12, 2011ByJerry Cain

Since the updated Comments Box plugin launched last month, more than 50,000 websites have added it to their site. Today we’re launching new features to help increase traffic, engagement, and the quality of comments on your sites.

Improved News Feed story

We are introducing a modified Comments Box News Feed story to feature more social context. Simply include the og:image, og:title, og:url, og:description, and og:site_name in the Open Graph meta tags on your site to generate the following larger story:

Optimizing the News Feed story increases the click-through-rate (CTR) back to your site and encourages people on Facebook to contribute to the discussion. To verify the image, title, and description Open Graph meta tags, visit the URL Linter.

Permalink to specific comments

Permalinks have now been assigned to each comment so people can share links and be directed to specific comments. To obtain a permalink to a comment, click on the timestamp:

Clicking on the timestamp link pins Cat’s comment to the top of the Comments Box: http://techcrunch.com/2011/04/08/the-seven-most-interesting-startups-at-500-startups-demo-day/?fb_comment_id=fbc_10150211366584314_16393286_10150214530679314

Notifications sent to users will also go to the permalink, making it easier to respond. For example, clicking on the notification below will take you to the permalink of the original comment:

Graph API to pull comments

Comments can now be searched and exported so developers and website owners can highlight the most interesting comments, perform analysis on the comment stream, reward top commenters, search through existing comments, and use comments to improve SEO on their site. For example, a news site could highlight the most popular comments or display an info-graphic comparing the number of “pro” vs. “con” discussions created on a political topic.

Comments for every URL can be accessed via the Graph API:

https://graph.facebook.com/comments/?ids={YOUR_URL}

A simple PHP example below shows how to pull comments from the Comments Blog post:

<?php 

   $url = "http://developers.facebook.com/blog/post/472";

   $request_url ="https://graph.facebook.com/comments/?ids=" .
        $url;

    $requests = file_get_contents($request_url);

    print "<PRE>";
    print_r($requests);
    print "</PRE>";

?>

Sample results below:

{
   "http:\/\/developers.facebook.com\/blog\/post\/472":{
     "data":[
      {
       "id":"10150090402026572_14446097",
       "from":{
         "name":"Andy Mitchell",
         "id":"501423231"
       },
       "message":"The new Facebook comments just 
          launched and are pretty 
          awesome!",
       "created_time":"2011-03-01T17:06:28+0000",
       "comments":{
         "data":[
           {
           "id":"10150092150511572",
             "from":{
               "name":"Praveen Vedanth",
               "id":"100000017956890"
             },
           "message":"\u0040Andy, Comments plugin is
             great but I don't like to use it unless 
             I can style it to suit my site... Are we 
             allowed to change the styles for the 
             comment area?",
           "created_time":"2011-03-04T03:23:47+0000"
           },
           {
           "id":"10150096566456572",
             "from":{
               "name":"Nick Thain",
               "id":"523586153"
              },
            "message":"We got over 50,000 comments 
             on our Soccer site a month, 
             we will be adding this new tool in a few 
             days... look amazing!",
            "created_time":"2011-03-10T12:28:29+0000"
          }
          ],
            "count":2
          },
            "likes":7
         },
...
    ]
  }
}

New dark colorscheme option

In response to developer feedback, we’re introducing an option for a darker color Comments box to give design flexibility for websites with darker color schemes, while maintaining consistency with other social plugins. For example:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments colorscheme="dark" href="[YOUR_URL]" num_posts="5" 
  width="500"></fb:comments> 

will result in a version of the Comments Box that can be used on dark-colored websites:

This feature will be available on Wednesday, April 13th.

Hotmail added to list of login providers

We’re continuing to add third party providers to the Comments Box plugin as login options, the most recent of which is Hotmail. Hotmail joins AOL and Yahoo! as third party options people may choose for commenting if they don’t have a Facebook account or are not logged into Facebook. You can enable this and other login providers via the “Settings" link on the Comments Box.

Migrating Comments Box v1 to v2

As a follow up to a note sent to all developers using Comments Box v1 and an update to the Developer Roadmap, we will upgrade all sites to the new version of the Comments Box on April 29th, 2011 to ensure that Facebook users have access to the latest version across the web. Upon upgrade, ordering of the comments will shift from chronological to showing the most socially-relevant comments first as described here. Also, please note that the upgraded version of Comments no longer supports custom CSS.

You can upgrade today by adding the 'migrated=1' parameter to your existing <fb:comments> tag. Please note that once upgraded, you cannot switch back.

Please let us know if you have any questions or feedback in the comments below.


Tags: