Facebook Connect Presentation 08 10 2008

An introduction to Facebook Connect

London Facebook Developer Garage,October 8th 2008

Facebook Connect - Introduction

What Facebook Connect does:• Allow social graph (“your friend network”)

information to be brought to external websites

• Allow external website activity to be brought into Facebook

Both aspects are key as to why this is a priority for Facebook.

Facebook Connect - Introduction

What this looks like:

Two different methods for login, in this implementation

Facebook Connect - Introduction

What this looks like:

A Facebook styled dialogue box lets the user know what’s going on

Facebook Connect - Introduction

What you can do when you’re “Connect”ed:• Display information from Facebook profiles on

your own site• Publish stories to Facebook from your site• Re-create your users’ social graphs

Facebook Connect - Introduction

Facebook Connect – How it works

Quick tech intro:• Uses an evolved version of the JavaScript client

library:• Use FBML within your standard HTML. (They call

this XFBML.)• Make standard Facebook API calls within the

JavaScript library• Facebook’s JavaScript XFBML library populates

FBML tags on your site with profile data

Facebook Connect – How it works

Some Connect code:<fb:login-button> </fb:login-button><script

src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

This loads in the JavaScript library which renders the login button

Facebook Connect – How it works

Some Connect code:<fb:login-button> </fb:login-button><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript"> FB_RequireFeatures(["XFBML"], function() {

}); </script>

Now we’ve got the library loaded, we need to tell it the features we need. In this case: XFBML covers it.As a parameter to loading the library, we pass a function we want to run once we know it’s loaded

Facebook Connect – How it works

Some Connect code:<fb:login-button> </fb:login-button><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript"> FB_RequireFeatures(["XFBML"], function() { FB.Facebook.init("1b293e1be6fbff075cd8b9a9372186e9",

"/six_degrees/xd_receiver.htm");

}); }); </script>

We initialise the connection with our application’s public API key and a relative path to the cross-domain receiver file (which Facebook provides)

Facebook Connect – How it works

Some Connect code:<fb:login-button> </fb:login-button><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript"> FB_RequireFeatures(["XFBML"], function() { FB.Facebook.init("1b293e1be6fbff075cd8b9a9372186e9",

"/six_degrees/xd_receiver.htm"); FB.Facebook.get_sessionState().waitUntilReady(function() {

}); }); </script>

Now we wait for a session using more of Facebook’s code, and pass another function that we want to run when it’s done

Facebook Connect – How it works

Some Connect code:<fb:login-button> </fb:login-button><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript"> FB_RequireFeatures(["XFBML"], function() { FB.Facebook.init("1b293e1be6fbff075cd8b9a9372186e9",

"/six_degrees/xd_receiver.htm"); FB.Facebook.get_sessionState().waitUntilReady(function() { FB.Facebook.apiClient.friends_get(null, function(result, ex) {

window.alert("Friends list: " + result); }); }); }); </script>

Now everything’s loaded, we can get a list of the user’s friends from the API with a familiar-looking method call.

Facebook Connect – How it works

What you can’t do:• Publish stories to a friends newsfeed, only to

the current user’s• Update any profile box except that of the

current user• Limited set of FBML tags in XFBML at present

Facebook Connect – Connecting accounts

One more feature:Migrating the social graph from Facebook• Works by matching e-mail addresses used on

your site with e-mail addresses entered into Facebook

• Prompt your site users to invite their friends to “connect” to your site– Uses the new fb:connect-form tag

Facebook Connect – Disadvantages

There are disadvantages to Facebook Connect…

Facebook Connect – Disadvantages

It’s all in JavaScript:• Not always the most manageable code• Takes some lateral thinking to hook up with

your site’s databases• No SEO benefits• Poor accessibility (JavaScript disabled =

Facebook Connect doesn’t work)

Facebook Connect – Disadvantages

It’s not a treasure-trove of new user details:• Can’t access any more friend details than if a

user adds an application i.e. no access to e-mail addresses

• Facebook intends privacy settings to be dynamic, therefore changes in Facebook settings may affect your site

• You don’t own the data

Facebook Connect – The future

• Due to be launched to everyone “soon”• Going to be a big focus for Facebook– Facebook’s move to be at the centre of social

activity• May see Connect stories being given greater

priority in the newsfeed• Expect Connect plug-ins for blogs, Digg, and

every web 2.0 type site there isSee current Facebook Connect implementations at:http://www.somethingtoputhere.com/therunaroundhttp://www.theinsider.com/

Facebook Connect – The future

ThanksKarl Bunyan, [email protected]