
The video in question was posted by Mashable, and has 2 of the Facebook engineers talking about how easy it is to integrate Facebook Connect onto your blog - only 8 minutes!
I tried it, and it didn’t take 8 minutes. Here were the steps for those people who don’t want to pause the video 500 times in 8 minutes to follow along (might be a bit out of order from the video):
Note: references to comments.php, header.php etc are references to my Wordpress install. If you are plugging this into a plain website (non-blog) or another blog system, YMMV.
1. Add FBML for a login button (in comments.php):
<fb:login-button></fb:login-button>
2. Add JS include (to comments.php):
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
3. Add a JS block with an action to perform when the login button is clicked, with a last line to tell the Facebook XFBML to reparse the DOM tree:
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("fbconnectuser");
user_box.innerHTML =
"<span>"
+"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>"
+" Welcome, <fb:name uid='loggedinuser' useyou='false'></fb:name>."
+" You are signed in with your Facebook account."
+"</span>";
FB.XFBML.Host.parseDomTree();
}
</script>
4. Code the FB.init call - this needs you to go to the Facebook Developer page and create a new application to use for this. Also, you need to create a xd_receiver.htm call so that the Facebook app will know that your domain has agreed to participate in cross domain authentication with FB.
This is the part that I screwed up on, as I went to the Facebook developer wiki site and found an example xb_receiver.htm file to use, except that it was a debug version from v0.2, vs. the v0.4 they refer to in the video.
Here is a xb_receiver.htm file you can use:
<!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" type="text/javascript"></script>
</body>
</html>
When you have created that file, go back and add the following call to comments.php:
FB.init("“, “relative path to find your xd_receiver.htm file”);
The Facebook developer wiki will tell you that you can’t use an absolute path to the xd_receiver.htm file, but you can.
5. Add an additional xml namespace to your opening html tag (in header.php):
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
6. A nicety, add this line below your FB.init line to allow for login status to be checked upon page load, instead of having to click the connect button each time (to comments.php):
FB.Connect.ifUserConnected(update_user_box);
update_user_box in this case is simply the JS function you wrote to fire off when the visitor is found to be logged into Facebook.
And that’s it! It took me more like a half hour to put it together, but it does do what the engineers say - it will show you that you are logged into Facebook.
But that’s all it will do. There is no automatic integration into your blog. There is no sense as to how it should work on a Wordpress blog with regards to people submitting comments who don’t have a Facebook account. I couldn’t find an easy way to extract the Facebook user’s e-mail address, so that’s out, and I would have to lower my comment security settings to allow Facebook comments.
Also, it seems that the nicety here is to have the Facebook avatars next to their comments … well, most people didn’t write their Wordpress template, and a lot of them don’t have placement for an avatar. Without the avatar with the little “f” on it, what’s the point of having Facebook Connect on your blog?
So, I would have to lower my blog security to allow comments without e-mail addresses, then somehow save a token to signify that this comment was posted by a Facebook user, so that when I cycle through the comments on a post, I will know to fire off a Facebook request to resolve the avatar. I can’t do this when posting, as wp-comment-post.php in the core Wordpress install doesn’t allow for saving an avatar reference when I save a comment, so I would need to save some token and figure it out when displaying comments.
The comments themselves are still stored in my local store, so there’s no benefit on the Facebook side there. There’s not much in common between this and the Gravatar setup, so I can’t gain any efficiency by having the same process handle avatars regardless of source.
I’m just not seeing what the 8 minute integration effort is supposed to prove. Maybe I’m just missing the boat - please, clue me in on what I’ve overlooked in the comments. Please note that there will be no Facebook option on the comments - I verified that it worked, but have since removed it.