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/FeatureLo
ader.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/FeatureLoa
der.js.php"
type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function()
{

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
</script>
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/FeatureLoa
der.js.php"
type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function()
{
FB.Facebook.init("1b293e1be6fbff075cd8b9a9372186e9",
"/six_degrees/xd_receiver.htm");

We initialise the connection with our

application’s public API key and a
relative path to the cross-domain
});
}); receiver file (which Facebook
</script> 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/FeatureLoa
der.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()
{

Now we wait for a session using

more of Facebook’s code, and pass
});
}); another function that we want to
</script> 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/FeatureLoa
der.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);
});
}); Now everything’s loaded, we can
}); get a list of the user’s friends from
</script> 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,
See Digg, and every
current Facebook web 2.0 type
Connect implementations at: site
there is
http://www.somethingtoputhere.com/therunaround
http://www.theinsider.com/
Facebook Connect – The future

Thanks
Karl Bunyan, karl.bunyan@exponetic.com