Dec 162011
 

Facebook offers all sorts of badges and social plugins to web developers, allowing you to add badges, buttons, recommendations, and streams to your site. In this article we describe how to install the Comments plugin, deploying Facebook to add a comments stream to your content pages.

Installation

In this case, there is nothing to download: you only have to incorporate some JavaScript code into your pages, and both the widget and its contents will be downloaded on-the-fly by the user’s web browser.

First, we have to load Facebook’s JavaScript SDK:

<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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Facebook recommends placing this immediately after the <body> opening tag. The code itself is generated after filling in some parameters at Facebook’s plugin page.

Comments Stream

The next step is to place the comments stream. That requires a second piece of JavaScript code, now placed at the location where the Comments widget should appear:

<div data-href="http://example.com" data-num-posts="2" data-width="500"></div>

As you can see in the code snippet, the parameters filled out at Facebook’s plugin page are in there. The most important is the data-href parameter, as it needs to be replaced with the current page url in order to generate page- or section-specific comments. (This parameter should be regarded as a common identifier for a set of comments.)

You can change the other parameters as well, or even replace these with PHP variables to allow page- or section-specific display settings.

Here is what our code snippet looks like:

<div data-href="<?php echo (gp_display_core_text2html ("http://" . $GLOBALS["gp_session_website"] . $GLOBALS["gp_page_url"])); ?>" data-num-posts="6" data-width="600"></div>

We replaced the data-href variable with a full page URL, composed of the $GLOBALS["gp_session_website"] and $GLOBALS["gp_page_url"] variables. This results in a separate comments stream for each individual web page.

Moderation

This should be enough to display a basic Comments widget on your pages. In our case, we want to moderate the comments being posted on our website. So we add our own Facebook identifier to the code, basically telling Facebook which user (or users, or even applications) have modifying rights for the comments on this page.

The identifier is placed in a special meta tag in the header of the web page:

echo ("<meta property=\"fb:admins\" content=\"" . $GLOBALS["gp_site_facebook_uid"] . "\" />\n");

In this case the user id is taken from the PHP variable $GLOBALS["gp_site_facebook_uid"] we defined before.

As you can see below, the widget now displays the Moderator View, exposing extra functionality to the moderator.

More Parameters and Calls

Here we only scraped the surface of what can be done. As Facebook’s documentation shows, several other parameters can be set. And several JavaScript “calls” exist to display other information on a specific comments stream, for example the number of comments.

Leave a Reply