Recently Facebook developed a new social plugin that allows a website to put up a facebook-powered comment box. For someone to leave a comment, they have to have a facebook account, and currently be logged-in to facebook. Any comments made in the comment box appear within their facebook activity stream (wall) and the comment thread which occurs over on facebook will show up on the website. Sounds pretty cool, and in fact is rather similar to the Disqus service. As of this writing I use Disqus on this and a couple other websites.
I think that Facebook will have much more success with this than Disqus, because of the huge user base within Facebook.
However some have concerns over this. Facebook is like a slow moving glacier absorbing everything in its path, the result of which will be the facebooking of the Internet. We've long had concern about one or another large company getting so big on the Internet that it has control over everything in sight. The value of the Internet is the open playing field where any of us can set up shop and present our thoughts, opinions, etc. This is different from past era's of mass media which were tightly controlled by a tight-knit group of companies who then controlled what our society thought was normal. There's a social freedom aspect to whether we the people retain the freedom to launch our own websites as our own soapboxes.
Anyway.. that was an interesting detour away from the purpose of this tutorial which is to show you how to implement the facebook comments social plugin. Obviously there is a trade-off to consider over whether to use this plugin, and it fits the needs I have on a couple websites. Both (http://rules4humans.com and http://reiki.7gen.com) are written with HTML files and don't have a content management system behind them providing commenting ability. Over the history of those sites they've not had commenting support, so I've not had any feedback from the audience about those sites.
There's also an advantage I hope will accrue. Namely, the comment boxes will will reach into facebook and bring traffic from facebook to my sites.
Links to Facebook's pages on this are at the bottom of this page. But the information is not entirely clear. I've written about this elsewhere: Adding facebook comments support to your website pages And have a bit more to add.
The first thing is to register your website with Facebook which will assign an "API ID" to your website. To do so, be logged in to your facebook account, and then visit the reference/plugins/comments page (link below) and halfway down the page is an area to enter information about your comment box. Enter the site URL and click the Get Code button. The popup includes a link for registering your site with Facebook. Click on this link, and you'll be asked again for the URL of the website. Enter the values required in that form and click the Create App button. You'll then be taken to a page describing the "App" you just created for your website.
The word "App" is frequently used by Facebook in a way that's confusing to me. I don't know quite what they mean by "App" but it's a word they use consistently so don't get too hung up on what it means. They'll show you a block of information giving:
App Name: reiki.7gen.com
App URL: http://.../
App ID: APP ID NUMBER
App Secret: SECRET KEY
The App ID is a number you'll be exposing to Facebook and in general this block of information is worth hanging onto somewhere, so save it in a text file where you'll remember it. The App Secret value is probably meant to be kept secret.
The page also gives the outline of an HTML page that will contain a "Like" button. A portion of this HTML page will look like the following, which should be placed at the bottom of your page.
This section of code loads some Javascript code from Facebook to execute on your page. It's worth pondering this for a moment, because this means that you're enabling Facebook to execute javascript on every page view of your visitors on your website. Do you want this? It's also worth noting that many services like Google Analytics also cause you to add their javascript code to your pages. Each block of javascript loaded slows down page loads, and exposes your visitors to possible tracking by 3rd parties who may or may not be trustable.
Somewhere else within the page you can put the following code to generate a "Like" button.
At this point it's worthwhile to reload the page and see that the Like button works (or doesn't). It helps to click the Like button and see the Like information show up in your facebook activity stream.
We still haven't gotten to the comment box, but it's a necessary step to get your site registered with Facebook.
Now go back to the reference/plugins/comments page (link below) and again enter your website information in the box there.
This time copy the HTML they provide to your web page. It should look like the following. Choose a good location for the comments box.
Now reload the page again, and the comments box should show up.
It's possible to have administrator/moderator links on the comments box. Add these two tags to the HEAD section of the page:
Reload the page again and the comments box should be a bit different, having some links to moderator and administration pages.
At this point you have a comment box supporting a single page on your website. This was as far as I went on Adding facebook comments support to your website pages
It's possible to add a comments box to every page on your site, and have a separate stream of comments for each page. Take a look again at the code Facebook gives for the comments box and we see this:
Those values correspond to the values entered in the form to set up the comments box. What's important to realize is that the href= value can be any URL, except that Facebook doesn't make this clear on their pages. It's a little tricky to implement but it's possible to generate this per-page like so:
Rather than use the code provided by Facebook, this Javascript snippet generates it on each page with a different href= value.