Facebook Connect is the newest offering from the Facebook team in their efforts to socially connect the web as we know it. The platform provides 'social context' to existing sites, allowing for Facebook notification of events that occur in third party platforms / sites. This is in contrast to the existing Facebook Application platform which focuses on internal applications rendered directly within the platform itself.
Before we begin to integrate Connect into our existing site, we must first inform
Facebook that we are looking to integrate a third party application with their services.
To do this, we install the Developer application on Facebook.
Here is a link - Facebook Developer Application
Once installed, we must create a new Facebook application and configure it to point to our existing site's root URL. This is set through the Callback URL field. See the screenshot below for an example.
Also -- take note of the API Key you see in the application details. You will need this later!
Step 1 - Create / Open Web Site for Intended Integration
The sample included here is written using the ASP.NET platform, but any web framework will do. Create a new, blank project or open your existing project now.
Step 2 - Create a Cross-Domain Communication Channel File
The Facebook developer wiki has the following to say about the role of this file.
Facebook Wiki - Cross Domain Communications
Technical details aside, we need to create one of these! It's quit simple really. Just create a new HTML file entitled 'xd_receiver.htm' and add the following code to the file.
Place this file in the root directory of your web application, and we're done this step.
Step 3 - Add Facebook XML Namespace to HTML Tag
NOTE - All code below this point belongs in the HTML document in which we wish to
integrate Facebook Connect. In the case of the sample project, this is Default.aspx.
In order for our HTML document to validate, we need to inform it that it's ok to use some FBML (Facebook Markup Langague) mixed in with our HTML. This is a one liner.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
API, etc. Another one liner.
Step 5 - Create the Facebook Connect Login Button
Now for the fun part. By adding a single line of FBML markup, we generate a Facebook
Connect login button.
There are two items worth noting here. The first is the event handler 'onlogin' you see in the markup. This event fires when a user successfully authenticates with Facebook. By capturing this event, we can notify the user an perform any necessary actions.
The second is just a small note. By setting length='long' on the fb:login-button, we will render a longer, more detailed button to the user. Both are seen below.
Take your pick, they both look great and suit a certain environment.
Final Step - Initialize Facebook Connect
Just before the closing body tag in your HTML markup, add the following line.
IMPORTANT NOTE -- You MUST replace "YOUR_API_KEY_HERE" with the API key you find in your application details in the Developer application on Facebook!
Testing Your Work
In order to test your work, upload xd_receiver.htm and any other project files you
have created to the Callback URL you specified when creating the application. Launch
a browser, and you should see the following.
Hopefully at this point you have your first working Facebook Connect integrated
website. What you do with the social data you now have at your fingertips is up
to you. However, to help out, there will soon be a follow up article giving a few
Check out How to Use the Facebook Developer Toolkit 2.0 in the mean time to get ready.
Subscribe to our RSS Feed to stay in the loop!