Please feel free to download the source code. For each file in the source archive, there is an initial file and a final file. The final version of each file is the more interesting one with the FB code integrated.

In the code you’ll find usage samples for the following:

• FB.ensureInit
• FB.Connect.requireSession
• FB.Connect.forceSessionRefresh
• FB.Connect.logout
• FB.init
• FB_RequireFeatures
• fb:profile-pic
• fb:name
• FB.Facebook.apiClient.friends_get
• FB.XFBML.Host.parseDomTree
• FB.Facebook.apiClient.users_getInfo
• fb:live-stream

The demo site is still live at http://xfcg.com/fbp. For example, the page in the source archive called event-final.html is at http://xfcg.com/fbp/event-final.html.

Here are the basic steps for setting up a new Facebook Connect application:

1. Install the Facebook Developer Application on your Facebook profile
2. Create a new application
3. Upload the xd_receiver file
4. Add the FB xmlns attribute to your html tag
5. Add the Facebook JS file
6. Call init in your page

More information about Facebook Connect Integration is available from these other posts:

• Integrating Facebook Connect
• Facebook Connect comments as WordPress Plugin
• Use Twitter, Facebook, OAuth or OpenID for login?

Again, please comment or message me if I’ve missed something important or if I didn’t answer your specific question. I’d love to be able to help.

Yesterday he released the plugin as an open source project. I haven’t had a chance to install the plugin, but having worked with Aaron in the past, I’m sure it’s top notch. I looked at the source code and really like the way he developed the integration with WordPress.

If you’re interested in adding Facebook comments to your WordPress blog, I suggest you give Aaron’s plugin a try. I’ve included this plugin on my open source tools page.

So, yesterday’s announcement by the Facebook development team about fql.multiquery couldn’t have come at a better time for me. Experienced web developers (and multi-tiered application developers in general) have all learned that performing work in the proper tier is always the most efficient way to work. Data should be managed in the database tier and as separately from the application tier as possible. This announcement from the Facebook development team is great news for Facebook application developers everywhere. Kudos to them!

This is not a new concept, but with the recent proliferation of high-profile services such as Twitter OAuth and Facebook Connect, I think it’s time to discuss the pros and cons of using a third-party authentication system for your web site.

Pros

One of the most obvious advantages of using any third-party authentication system including OpenID is that you don’t have to develop the complex systems necessary to validate user registrations, avoid duplicate or spam registrations or manage all of the registration messaging and support. That’s a big deal. If your registration system is too complex because you are trying to ensure that only legitimate users can register, you will undoubtedly lose some potential users who simply find the system too hard to use. Tying into established accounts reduces the barriers to entry for your site.

Another consideration for using a third-party authentication system is the additional features of the third-party service. If you intend to update the user’s Facebook or Twitter status, you’ll eventually need to authorize your user with that service. You may be able to address two needs at one time.

Finally, there is a soft benefit to using a third-party authentication system and that is the added trust. It’s likely that if you use a trusted system or service, your own web site will be implicitly trusted more.

Cons

Using a third-party system does not remove the necessity to keep some user information in a local database or provide some session and cookie management functions. Your web site will probably require additional user information that is not provided by any of the third-party services. Depending on how much of that information is required, using a third-party service may simply add another step to the registration process — increasing the barriers to entry.

Many third-party applications are still evolving. Twitter’s OAuth has only been available for about a month. Facebook Connect is less than a year old and has changed quite drastically (for the better) since its release. OpenID is much more mature as a development tool, but adoption in the user world is still relatively low.

Gotchas

Some things to think about — things that may be pros or cons depending on how your site works with the third-party services.

An advantage of using a third-party for authentication is the fact that there are many to choose from (Twitter, Facebook Connect, OpenID, etc.) so many of your users will already have established accounts with the other sites. But what do you do if your potential user is not connected with any of the third-party sites you use? Consider your audience before committing to a third-party-only authentication solution. If your audience is the bleeding edge web community or if your service is an add-on to the third-party service, you’re golden. Otherwise you may alienate potential users who don’t have and don’t want to be a part of the Twitter-Facebook-etc crowd.

What happens to your users if they decide to leave the third-party site or are banned from using it in the future? People do stop using Facebook, Twitter and other services. People close their GMail accounts (Google provides third-party authentication) and occasionally people are banned from other sites for violations of terms. If your site is not directly related to the third-party site (for example a Twitter search site would be directly related to Twitter), you probably want to make sure that your users can login on your site whether they have an active account anywhere else.

What to do?

I suggest that most sites still need to have a local user login system of some sort. This is to ensure that your users remain your users. Users will not understand or care to know why they can no longer access your site after canceling their Facebook account, they’ll just know that you’ve excluded them and they’ll be upset. No amount of technical mumbo-jumbo will convince them otherwise.

I do encourage the use of third-party authentication systems to add value to your site. There are several reasons to do this:

• Providing additional value-added connections to the third-party services such as updating profile information or status
• Providing social graph information such as which friends of the current user also use your site
• Gathering additional authentication information for your site

Recommendations

Build a simple login system for your site. Limit the amount of information you gather to the absolute minimum you need to provide basic login/account services. This should include a user identifier, password and some method for recovering a lost password. Consider this your first tier of authentication. First-tier users get read access to all of your site and some level of personalization based on their account information.

Next, if your site allows publishing of any information, add a second level of authentication. Since your first-tier users didn’t do anything to prove they aren’t bad robots, they don’t get to publish. This is where you can get creative. Second-tier authentication may be via email (not my preference) or via a third-party authentication system. Choose a third-party that you trust, then have your users authenticate themselves with that third-party and record the authorization information in your user database. Consider the user a second-tier user at that point and enable additional options and services on your site.

The advantages of this tiered approach are many.

• You maintain a local database of users
• You can provide as many tiers of trust as you need with different authentication methods as seem appropriate
• You can provide alternate authentication methods for each tier so your users have many options to authenticate
• If any one of the third-party authentication services disappears or revokes access to a user or group of users, you can provide an alternate method
• You reduce the barriers to entry to your web site
• Your users only encounter authentication barriers as they seek to increase their interaction with your site

Perhaps at some point in the future, OpenID and OAuth or some new thing will be truly ubiquitous and provide all of the features required for completely hands-off authentication services, but right now I don’t think we’re there. Until then, consider a tiered authentication system that provides the best options for you, your site and your users.

In order to get a frame of reference for this post, you’ll need to read Integrating Facebook Connect using the Thesis theme. That article briefly describes the method for creating a new Facebook Connect application and the files required to set up the basic framework for a Facebook Connect integrated site.

Assuming your site is ready to go, it’s relatively straightforward to provide a custom notification popup for your users to post information about your site to their Facebook profile. For example, the following link is an implementation of this concept. Click the link to see the popup form (you will be prompted to login to Facebook and approve the message before any data is sent to Facebook).

Note: after you close the Facebook dialog, you should see a different message above.

The code for this is amazingly simple:

FB.Connect.showFeedDialog(
  60885219929, {}, null, null, null, FB.RequireConnect.promptConnect,
  function() {
    jQuery('#fb_demo_publish').html('<p class="highlight">You have closed the Facebook notification dialog. Unfortunately there is no way currently to know if you posted a messasge or not, so we have to display a generic message.</p>');
  },
  'What do you think of this blog?', {value: 'Great blog!'});

In this example, I am providing the very simplest implementation of showFeedDialog. The first parameter is a template bundle ID generated by Facebook. Every message that you want to post from your site to Facebook has to be registered as a feed template. Assuming you’re a registered Facebook developer, you can register a feed template here: http://developers.facebook.com/tools.php?feed. The process is very simple and will be discussed in detail in a follow-up post.

This sample uses no custom fields, so the second parameter is an empty Javascript object. Following that are three null parameters (I’m saving that for the next example), then there is a callback function that updates the page when the dialog is closed. Finally the last two parameters provide the display question and some sample text (end-user editable).

My reasoning for providing such a simplistic example is to provide a basic framework for using the showFeedDialog function. I want you to see that it is very simple to get started — without getting bogged down in all of the options right away. In the future I will detail the process of setting up a feed template, using the template_data parameter and provide more information about the other showFeedDialog parameters. Subscribe to my blog feed to make sure you don’t miss the follow-up posts.

See the Facebook Connect documentation for full details about the showFeedDialog function.

If you’re new to this site, please take a look at a few of the recent articles covering topics such as Facebook Connect integration, geolocation, and event tracking using Google Analytics. I also highly recommend familiarity with the following:

1. Google Code. This site is awesome. Google is constantly updating their public APIs making integrations richer and easier.
2. Amazon Web Services. I haven’t touched on this much, but as far as mashups and integrations go, Amazon is the service to beat.
3. jQuery. You better believe that you’re going to need to know Javascript today. If you’re still hacking away at it without a good library, repent now and learn jQuery.
4. jQuery UI. An amazing set of well-developed UI components and themes for use with jQuery.
5. Twitter API and Facebook API. Not as fundamental as the above for general web development and integration, but core to social integrations.
6. PHP. Okay, you can use Python or Ruby or Java or ASP or whatever in the back end. My examples are going to be either PHP or Python, though.

Read up. There will be a quiz.

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") </script>

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.

Within the past few years, however, the scope of what can be accomplished by relatively simple integration and reuse — especially on the web — has grown significantly. For example, one thing you’ve probably seen is the common use of those funny login pictures that ask you to type in letters to prove you’re human. For a while, every web site manager that wanted to have that functionality had to build it herself or hire someone to do it. Today it’s as simple as integrating with a service like reCAPTCHA. Additionally, you’ve probably seen plug-in functions for polls, guestbooks and many other standard web site features.

Recently, the pace of development in integration with major services has accelerated again. Google has released Google Friend Connect and Facebook has released Facebook Connect, both of which provide deep integration into existing social networks such as MySpace and Facebook. These integration platforms are still evolving but the implications are huge.

By properly integrating with the existing social networks, a site can provide rich social interactions within existing networks of friends without reinventing the wheel. And frankly with Facebook growing at a rate of 700,000 new users per day, the chance of your site competing head to head with them is extremely low. Don’t compete. Don’t reinvent. Integrate.

Integration is the key

Rather than trying to be the next Facebook, take your unique value to the existing networks on Facebook by bringing them to your site. Amazingly, it doesn’t take a degree in computer science to get some basic integrations working on your web site. Realistically, it might take a degree in computer science to do some more complex integrations (and to read the current documentation). To give a perspective, it took me several weeks (with an incredible support team) to integrate Facebook with Squidoo. To add the Facebook comment boxes on this blog took about 30 minutes.

That’s interesting, but so what?

I decided to disable the normal Wordpress comment system and just use Facebook’s new comment box today. The advantage is that when you post a comment on any page of this site, you also (optionally) post that same comment on your Facebook profile with an link back to my site. If you care enough to comment and tell your friends that you made a comment, it implies that you believe your friends will be interested in your opinion of my site. Assuming they are, they click through to my site, make a comment and the thread continues. Suddenly my site is a part of your social network and you didn’t have to go out of your way to make it so. I reduced a barrier and we all benefit.

The Facebook comment box is just one small piece of Facebook Connect. There are similar tools offered through Google Friend Connect for integrating with other social networks (including MySpace). As I said earlier, these tools are very new and rapidly evolving, but it’s very exciting. Right now if you’re managing a web site or building a new one (or just thinking about it) consider the list of features you’d love to have. If they include commenting, user registration, friend invitations and broad publication of user actions, you might be able to cross them off your to-do list and simply integrate.

Imagine

Consider how much energy you can focus on the core purpose of your web site if you don’t have to build technologies to compete against the clearly-dominant market leaders in social networking. I’m so excited about these emerging technologies that I can barely write this post. There’s so much more to talk about, so many examples of how to do it and so many ideas for where it can best be utilized.

Next steps…

This is going to be a core topic for the next few months (rough guess) as I build samples, give concrete examples and provide code to help you integrate with as little frustration as possible. I’m going to focus on Facebook Connect because I haven’t built anything more than a sample application using Google Friend Connect yet.

I’d love to get your feedback! What do you want to know? How would you use Facebook Connect if you could? Ask questions even if you’re not sure what the questions are!

Well, simply stated, it’s because the times they are a changin’. Back in the old days (circa last year), building bridges to your web site was something you did essentially by yourself using technology. Most of your efforts were centered on SEO (search engine optimization), advertising and building more technology (such as doorway pages) to increase your web footprint. All these efforts were combined to make sure that all of the little robots that scour the web would bring more humans to your sites. The problem is that the robots don’t care … and they’re not friends with the humans.

Fast forward to this moment
The web changes quickly and so do the people using it. When I first discovered Google, I could literally spend hours searching — just to see what would appear. Today, I certainly still Google a lot, but I also have a much more powerful method for getting information: I ask other people. I trust my friends and I know how they can help. I also trust my online social groups and I like their recommendations. So very often now, I go to my social networks and ask the questions.

Just taking a quick peek at my Twitter stream right now, I see the following list of tips, news, questions and feedback:

• “How to use StumbleUpon – A Step by Step Guide”
• “The Helium 3 on the Moon and on asteroids could be mined to give us stable nuclear fusion and …”
• “Who should be in the new A-Team film?”
• “Is Google doing anything with GrandCentral? I have an account & nothing has changed since the beginning (except I can’t invite any more)”
• “I really want to help my community by implementing an economic gardening program. However, I’m not independently wealthy. Ideas?”

People have questions. People have answers. People have recommendations.

Your web site might be an island because you’re not enabling people to question, answer and recommend. If you don’t enable your readers, the barriers to sharing are high enough that it doesn’t happen. Have you made it easy for your readers to recommend your site (or page) on Twitter, Digg, Delicious, Facebook, etc.? Do you have a comment form? Do you also provide an RSS feed and a Twitter account to follow?

You see, it’s not about technology, it’s about people. You can work and work and work to feed the robots, but the work of enabling personal recommendations is better. As your visitors become fans, they’ll recommend your services and products through their social network.

Make it easy
If I have to choose between recommending a site that provides me a link to share and a site that I have to manually copy and paste information to share it, I prefer the first. The great news is that enabling sharing on your site isn’t as hard as it used to be — and it’s getting easier. Services like ShareThis and lijit provide turnkey solutions for sharing, aggregating and searching your sites. Feedburner turbocharges your RSS feeds and provides for advertising revenue within your feeds. Social networking sites such as Facebook and MySpace are providing solutions for comment forms and other social tools that work on your site with little or no coding required.

As these tools evolve — and they certainly will — strong interconnectedness with communities of people will be a primary differentiator of web sites. As such, niche sites will have an increased opportunity for success because they won’t be competing in the SEO world, but in the community world and the community will always care more than the robots.

Coming soon…
Within the next two to three weeks, I’ll be showing concrete examples of how to socially enable your web site with some of the drop-in tools listed above and also with some of the more technically intense options available today. Stay tuned!