Overview: Integrating Facebook Connect With Your Website

Last week at Facebook’s f8 developer conference, CEO Mark Zuckerberg formally announced Facebook Connect, Facebook’s new program that extends the Facebook Platform to any website that wants to integrate Facebook APIs for user authentication, sharing website content with friends, and publishing feed stories to generate traffic.

Here, Inside Facebook explains what steps webmasters need to tale to integrate Facebook Connect on your own website:

1. Authenticating Users

Facebook has provided a sample implementation of Facebook Connect that fully demonstrates the lightweight authentication process. Rather than mandate a standard login button for websites using Connect, Facebook is encouraging developers to create their own login buttons (you can also use the default).

When a user clicks the login button, one of three dialog boxes will appear:

  • If a user isn’t logged into Facebook, the login/TOS popup dialog appears. If the user then authorizes Facebook Connect, Facebook gives a session for this user on your site and generates a callback to your site.
  • If the user is logged into Facebook but hasn’t authorized Facebook Connect for your site, an AJAX dialog appears. After authorizing Connect, the dialog closes.
  • If the user is logged in and has already authorized Connect for your site, Facebook generates a session for this user and provides a callback to your site.

2. Connecting Your Users’ Accounts with Facebook Accounts

Connecting accounts can be completed either when a user logs into Facebook from your site, or by accepting a Facebook Connect request from another already-connected friend.

When a user logs into your site, you can encourage that user to connect to her Facebook account by “calling connect.registerUsers, passing an email hash with it.” If the hash matches the user’s address on Facebook, Facebook will automatically return that “hash in the user’s email_hashes property.” This hash is then used as a key for merging your user’s account on your site and her account on Facebook. Once a user accepts, you can then determine which of that user’s friends are on your site.

Additionally, authorized users can generate Connect Requests for their friends, which appear alongside all other requests on the Facebook homepage. When a friend receives a request, that friend can visit your site, and can then return to Facebook to accept the request.

3. Publishing Feed Stories

Depending on a user’s login state and their authorization of Facebook Connect on your site, there are three possibilities:

  • If the user has authorized Facebook connect and is logged in, you can publish one line stories automatically, or you can implement feed forms to allow your users to post short or full stories.
  • If the user is logged into Facebook but has not authorized Connect on your site, an approval message will be displayed to the user when your site tries to publish a one line story. For other story sizes previews are displayed which the user can then approve.
  • If the user is not logged in, nothing can be published.

Launch Timetable

After f8, the Facebook Connect sandbox opened for developers. It is slated for a late summer/fall launch. For more, see the Facebook Developers Wiki.