Download - Facebook Connect
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 is
See current Facebook Connect implementations at:http://www.somethingtoputhere.com/therunaroundhttp://www.theinsider.com/
Facebook Connect – The future
ThanksKarl Bunyan, [email protected]