Propeller-head alert! This is a very technical article.
I’ve received a number of questions about how I integrated Facebook Connect with my blog, so I thought I’d go ahead and explain exactly how I did it. I’m still working on making a very simple open-source Wordpress plugin that does the same thing, but you should be able to get the ideas from this post to help you do it yourself if you like.
The first thing to mention is that I’m using the Thesis theme for Wordpress. Besides being a very professional-looking theme, the Thesis theme also provides a direct mechanism for extending it through the use of hooks. The hooks allow for customization of the theme without meddling directly with the theme code. All customizations live in their own files, so the them can be upgraded without impacting the customizations.
To build a Facebook Connect application, the first thing to do is go over to Facebook and add the Developer application. Then you can create a new application. A Facebook Connect application is just another Facebook application, so you’ll get a new application ID, API key and secret. You’ll need this information to set up your Connect app on your blog. I’m going to assume that you know enough about Facebook Connect to set up the basic application. If not, you need to read the Facebook Connect documentation. The screenshot shows the settings for my blog’s Connect application.
I had to add two very small files to my site to support Facebook Connect. The first is the xd_receiver file which provides the cross-domain support for Facebook Connect. The second is a simple callback page — mine doesn’t actually do anything, but it exists to support the callback for the application if I ever choose to do anything with the data it can provide. I put both files in the /custom directory of the Thesis theme so they won’t be affected when I upgrade Thesis or Wordpress in general. (Note: Another option for managing Wordpress and theme upgrades may be to find appropriate Wordpress hosting.)
Here is the code for the xd_receiver.html file I created (the code is provided by Facebook — I made no changes at all).
<!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> |
Here is my callback script:
<?php /** * This is the Facebook callback page. * */ ?> Visit <a href="http://www.thewhyandthehow.com/">The Why and The How</a> |
Now, here’s where it gets cool! To add all of the Facebook commenting functionality, I added the following hooks and code to my Thesis theme custom_functions.php file.
add_action('thesis_hook_after_post', 'fb_comment_box'); add_action('thesis_hook_after_post', 'fb_comment_plug'); add_filter('language_attributes', 'add_fb_xml_ns'); function add_fb_xml_ns($content) { return ' xmlns:fb="http://www.facebook.com/2008/fbml" ' . $content; } function fb_comment_box() { if (is_single()) { ?> <a name="fb_comments"></a> <p class="fb-comments">Comments:</p> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <fb:comments></fb:comments> <script type="text/javascript"> FB.init("[API_KEY]", "http://www.thewhyandthehow.com/wp-content/themes/thesis/custom/xd_receiver.html"); </script> <?php } } function fb_comment_plug() { if (!is_single() && !is_page()) { ?> <p class="fb-comments"><a href="<?php echo get_permalink(); ?>#fb_comments">Add a comment</a></p> <? } } |
As you can see, I added one filter and two hooks. The filter allows me to insert the required namespace information into the <html> tag. I cheated and used the language_attributes filter because that filter is the first one I found that would allow me to tweak any part of the <html> tag. You can view the source of this page to see that the namespace has been added.
The two hooks both fire after a post is rendered. The first hook function, fb_comment_box renders the actual Facebook Connect comment box. It only renders on single post pages, not on the main page that has many posts. The complete HTML that gets rendered for the comment box is simply this:
<a name="fb_comments"></a>
<p class="fb-comments">Comments:</p>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:comments></fb:comments>
<script type="text/javascript"> FB.init("[API_KEY]", "http://www.thewhyandthehow.com/wp-content/themes/thesis/custom/xd_receiver.html") |
You can see that the only custom options in that section are in the FB.init function. The API key for the application and the URL to the xd_receiver file are the required parameters. I also add an anchor tag right above the comments box so I can jump to the comments from the main page. That is referenced in the function fb_comments_plug which is displayed only on pages with multiple posts.
The last step for me was to disable regular Wordpress comments. That’s not actually necessary, but I thought that having two commenting systems on one site would be confusing.
Last words
The Facebook Connect comment box is an incredibly powerful way to bring the power of Facebook to your blog or web site, but it’s still very much a first-generation implementation. While it is possible for the application owner to manage comments posted through the comment box, there is currently no mechanism in place to notify the application owner when a new comment is made. So if you add the Facebook comment box to your site today, you’ll have to keep a close eye on your pages to check for abuse.
I didn’t cover any of the options available for the comments box. There are many options you can tweak, but you’ll need to read the manual for more information.
Go ahead and take my code. There’s not much there that’s really mine, so I’m certainly not going to try to protect it. Also, if you have questions, please leave me a comment.
Comments:
{ 15 trackbacks }
Comments on this entry are closed.