Facebook Connect for Comments
The ease of using Facebook Connect for user login and user interaction on a site is fantastic, and makes it a much easier and (in my opinion) a better experience for visitors as a whole. This can mean that a visitor doesn't necessarily have to sign up for another username and password with another site, but it also allows for your site/app to easily post messages to the visitor's Facebook profile.
One of the easiest things that Facebook Connect can be used for on a site is comments for a blog. For this, Facebook has made a special FBML – Facebook Markup Language – to use. So to set this up, first go here: http://www.facebook.com/developers/. Click the "Set Up New Application", give your "application" a name, which I use the name of the site.
The next page is more daunting, but no worry! What you need here is your "API Key". See it? Write it down. Good. Now click on the sidebar item "Connect". From this page you will need to fill in the "Connect URL" and the "Base Domain". So for this site, that is "http://pixelfaith.com" and "pixelfaith.com" respectively. Now save!
And now you are done with this panel, and the hardest part! The next chunk of code I will not bother to explain, other than that you need to create a file on your server named "xd_receiver.html" with this code inside:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
</body>
</html>
Guess what? You are ready to implement the comment system now! Yes, it was that painless and easy, guys! On the page you want comments, place this code in:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:comments url="articleURL" title="articleTitle" xid="uniqueID"></fb:comments>
<script type="text/javascript">
FB.init("APIkey", "xd_receiver.html");
</script>
On the second line of this code, you see <fb:comments url="articleURL" title="articleTitle" xid="uniqueID"></fb:comments>. The articleURL, articleTitle, and uniqueID are the things that you will need to change. These allow Facebook to link back to your article in posts that it makes to a visitor's profile. The fourth line has two things you need to change in FB.init("APIkey", "xd_receiver.html");. The APIkey is what I told you to write down earlier. The second part is the location of that "xd_receiver.html" file I told you to create. Remember where you put that? Put the URL here.
Save your page and look at it in the browser. You should now see a working comment section that will prompt you to login with Facebook. Isn't that cool? You just implemented a working Facebook Connect point of interaction on your site!
