An Intro to Facebook Connect Development

Just recently at F8, Facebook announced the launch of the ability to integrate your website’s users with users inside Facebook through a technology they call Facebook Connect. Such technology enables your website’s users to login using their Facebook username and password, right on your site, and link their profile and friend information directly to your own site for display and access outside of Facebook. Once authenticated, your site can also make calls for those users (with their permission) back to Facebook, enabling an interesting viral opportunity for your website or brand. Facebook Connect is not live yet, predicted to launch in September of 2008, it is in Sandbox mode currently. (It’s very important to note that only developers of your Facebook Connect apps can currently login through Facebook Connect! When Facebook Connect goes live to the public anyone will be able to start using it.)

This post is intended to be a guide for developers looking to get started with Facebook Connect, or CIOs and CTOs with an interest to learn what Facebook Connect can bring to your company, and what resources will be needed to do so. This will be a basic howto on getting started in Facebook Connect.

Facebook Connect – How it Works

Facebook Connect is basically a series of libraries on top of the existing Facebook Javascript Client Library which enable any site on the web to allow a user to log into Facebook, right on the site itself (via a simple dialogue box that Facebook pops up), authenticate that user, and retrieve a session for that user right on the 3rd party website. The session is set by enabling a series of cookies for the facebook.com domain that can be accessed via the Facebook API. Then, either using server-side APIs or the Javascript Client API, the developer can retrieve info about the user and their friends, just like they would through a Facebook App itself.

Each 3rd Party website set up on the service requires an App to be set up on Facebook for the site, just as you would set up any other App on Facebook. The Callback URL is the base URL of the site you are trying to integrate Facebook Connect for, and your site must call Facebook Connect from that URL in order for it to work.

With simple Facebook Javascript Client code (which is just a snippet of Javascript you can place on any page), Facebook has also introduced “xFBML”, a standard of FBML designed to be placed on websites outside of Facebook. So, for instance, assuming you have his Facebook ID and you have the permissions to see it, you could just put <fb:name uid=”4”/> on your website and your website would automatically display Mark Zuckerberg’s name – the same works with <fb:profile-pic/> and almost any other FBML tag you can think of.

This code enables you to place a <fb:login-button/> tag on your website, which renders a simple Facebook Connect login button for your users to authenticate to Facebook with.

Facebook then sends successful requests to a FB.Facebook.get_sessionState().waitUntilReady() Javascript method call, in which you can place other Javascript code to handle the request after that. Such code could be an AJAX request to update your database with the authenticated user’s Facebook ID, or anything else you might need to do with that user after they log in. (Keep in mind that Facebook limits you to what you can and can’t store in the database)

Figure 1 – Graphic courtesy Facebook

Facebook’s Sample Apps

There are 2 snippets of sample code that Facebook provides for you to download and look over. One is a full-featured app, called “The Runaround”, written in PHP that shows most of the features Facebook Connect provides. You can see it in action at http://www.somethingtoputhere.com/therunaround/. Then, download the code and see how it works at http://www.somethingtoputhere.com/therunaround/demo.tgz.