From Facebook Developer Wiki

Facebook Connect is about integrating social context into other Web sites. There are many creative ways to do that, but we've noticed some common themes found among most sites and listed them here. Many of these examples use our sample application, The Run Around. For in-depth explanation of the source, see The Run Around.

Facebook Connect can be as simple or complex as you need. The simplest Facebook Connect sites simply integrate XFBML into your existing Web pages, to give the user access to the Facebook experience from your site. Here are a few scenarios:

• Use XFBML to add Facebook images and capabilities such as profile pictures and the ability to make comments or share your content.
• Use the JavaScript Client Library (or start using the open source JavaScript SDK) to request information about the user or publish directly to the user's stream
• Integrate with your own authentication code to build a full-fledged Facebook Connect app (such as The Run Around) and manage the user's login to your site and Facebook simultaneously.

No matter how you use Facebook Connect, the user is in control. This gives the user confidence in your site. Facebook Connect provides a mechanism called extended permissions for requesting additional privileges from the user.

How Facebook Connect Works

Facebook Connect greatly simplifies application building for Facebook developers. At its simplest, developing a Facebook Connect application involves adding a few XFBML tags to an HTML page. Facebook Connect uses a cross-domain communication channel to open an iframe on the HTML page for each XFBML tag. When the user clicks a tag, Facebook Connect handles the interaction and lets the user log in, publish updates, and so on.

A Facebook Connect application can use any or all of the following:

• XFBML tags
• JavaScript, with calls to the JavaScript client library
• PHP pages, with calls to the Facebook PHP API
• Code in any language, with calls to the Facebook RESTful API

The most common cases are simple Web pages with XFBML tags and calls to the JavaScript client library.

Using XFBML Tags

XFBML is a very easy way to get started building a Facebook Connect application, because Facebook handles the login, the session, and other housekeeping for you. To use XFBML tags in your Web page, you'll need:

• A special XHTML namespace so that the browser will ignore XFBML tags
• A JavaScript call that activates the Facebook FeatureLoader
• XFBML tags, which provide the Facebook experience
• A file called xd_receiver.htm, to support older browsers

Using the JavaScript Client Library

The JavaScript client library provides a more powerful interface for Facebook Connect applications. To use the Javascript client library, you'll need:

• A JavaScript call that activates the Facebook FeatureLoader
• A file called xd_receiver.htm, to support older browsers

One of the most powerful features of Facebook Connect is the ability to tie a Facebook Connect application to your own website's login mechanism. You can use the JavaScript client library to retrieve the user's ID and login state, detect whether the user has connected with your site, and then change their login state in your site's login mechanism accordingly.

Examples of the Facebook Connect Experience

Presence Indicator

When a user connects with a site, they want to know what actually happened. The recommended way to indicate that they are acting in the context of Facebook is to show their real name and profile picture, with a Facebook favicon embedded in the corner of the picture.

Sample XFBML

Friends Page

Once a user has several friends who have connected with the site, the activity of those friends becomes an important part of their experience. Typically there is a page for Friends' Activity - for instance, on Yelp you could see Friends' Reviews, or on Digg you could see Stories Friends Have Dugg.

Tying it together into a page is helpful.

User Actions and Content

Many sites display user actions throughout the site. On Digg, you can see people who've dugg stories; Yelp will show you people who have written reviews. For sites like that, you can use XFBML to display the names and profile pics of Facebook users who have contributed content.

Sample FBML

Depending on how frequently they show up and what the context of the site is, you may choose to display a Facebook favicon in the corner of the photos to mark the users as Facebook users.

Example Connect Site

Ready to Code?

Then try out Facebook Connect >

This Site shows how to integrate Facebook Connect with your existing dynamic php site.

In additon, Devtacular offers a bare bones Facebook Connect integration and provides some sample code. It's a great starting point to understand this wiki entry. Read How to Integrate with Facebook Connect.