An introduction to Facebook Connect London Facebook Developer Garage, October 8 th  2008
Facebook Connect - Introduction <ul><li>What Facebook Connect does: </li></ul><ul><li>Allow social graph (“your friend net...
Facebook Connect - Introduction <ul><li>What this looks like: </li></ul>Two different methods for login, in this implement...
Facebook Connect - Introduction <ul><li>What this looks like: </li></ul>A Facebook styled dialogue box lets the user know ...
Facebook Connect - Introduction <ul><li>What you can do when you’re “Connect”ed: </li></ul><ul><li>Display information fro...
Facebook Connect - Introduction
Facebook Connect – How it works <ul><li>Quick tech intro: </li></ul><ul><li>Uses an evolved version of the JavaScript clie...
Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button>  </fb:login-button> </li></...
Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button>  </fb:login-button> </li></...
Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button>  </fb:login-button> </li></...
Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button>  </fb:login-button> </li></...
Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button>  </fb:login-button> </li></...
Facebook Connect – How it works <ul><li>What you can’t do: </li></ul><ul><li>Publish stories to a friends newsfeed, only t...
Facebook Connect – Connecting accounts <ul><li>One more feature: </li></ul><ul><li>Migrating the social graph from Faceboo...
Facebook Connect – Disadvantages <ul><li>There are disadvantages to Facebook Connect… </li></ul>
Facebook Connect – Disadvantages <ul><li>It’s all in JavaScript: </li></ul><ul><li>Not always the most manageable code </l...
Facebook Connect – Disadvantages <ul><li>It’s not a treasure-trove of new user details: </li></ul><ul><li>Can’t access any...
Facebook Connect – The future <ul><li>Due to be launched to everyone “soon” </li></ul><ul><li>Going to be a big focus for ...
Facebook Connect – The future <ul><li>Thanks </li></ul>Karl Bunyan, karl.bunyan@exponetic.com
Upcoming SlideShare
Loading in …5
×

Facebook Connect Presentation 08 10 2008

1,717 views
1,620 views

Published on

An introduction to Facebook Connect, from the London Facebook Developer Garage in October 2008

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,717
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
61
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Facebook Connect Presentation 08 10 2008

  1. 1. An introduction to Facebook Connect London Facebook Developer Garage, October 8 th 2008
  2. 2. Facebook Connect - Introduction <ul><li>What Facebook Connect does: </li></ul><ul><li>Allow social graph (“your friend network”) information to be brought to external websites </li></ul><ul><li>Allow external website activity to be brought into Facebook </li></ul><ul><li>Both aspects are key as to why this is a priority for Facebook. </li></ul>
  3. 3. Facebook Connect - Introduction <ul><li>What this looks like: </li></ul>Two different methods for login, in this implementation
  4. 4. Facebook Connect - Introduction <ul><li>What this looks like: </li></ul>A Facebook styled dialogue box lets the user know what’s going on
  5. 5. Facebook Connect - Introduction <ul><li>What you can do when you’re “Connect”ed: </li></ul><ul><li>Display information from Facebook profiles on your own site </li></ul><ul><li>Publish stories to Facebook from your site </li></ul><ul><li>Re-create your users’ social graphs </li></ul>
  6. 6. Facebook Connect - Introduction
  7. 7. Facebook Connect – How it works <ul><li>Quick tech intro: </li></ul><ul><li>Uses an evolved version of the JavaScript client library: </li></ul><ul><li>Use FBML within your standard HTML. (They call this XFBML.) </li></ul><ul><li>Make standard Facebook API calls within the JavaScript library </li></ul><ul><li>Facebook’s JavaScript XFBML library populates FBML tags on your site with profile data </li></ul>
  8. 8. Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button> </fb:login-button> </li></ul><ul><li><script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; </li></ul><ul><li>type=&quot;text/javascript&quot;></script> </li></ul>This loads in the JavaScript library which renders the login button
  9. 9. Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button> </fb:login-button> </li></ul><ul><li><script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; </li></ul><ul><li>type=&quot;text/javascript&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>FB_RequireFeatures([&quot;XFBML&quot;], function() </li></ul><ul><li>{ </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>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
  10. 10. Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button> </fb:login-button> </li></ul><ul><li><script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; </li></ul><ul><li>type=&quot;text/javascript&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>FB_RequireFeatures([&quot;XFBML&quot;], function() </li></ul><ul><li>{ </li></ul><ul><li>FB.Facebook.init(&quot;1b293e1be6fbff075cd8b9a9372186e9&quot;, &quot;/six_degrees/xd_receiver.htm&quot;); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>We initialise the connection with our application’s public API key and a relative path to the cross-domain receiver file (which Facebook provides)
  11. 11. Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button> </fb:login-button> </li></ul><ul><li><script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; </li></ul><ul><li>type=&quot;text/javascript&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>FB_RequireFeatures([&quot;XFBML&quot;], function() </li></ul><ul><li>{ </li></ul><ul><li>FB.Facebook.init(&quot;1b293e1be6fbff075cd8b9a9372186e9&quot;, &quot;/six_degrees/xd_receiver.htm&quot;); </li></ul><ul><li>FB.Facebook.get_sessionState().waitUntilReady(function() </li></ul><ul><li>{ </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>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
  12. 12. Facebook Connect – How it works <ul><li>Some Connect code: </li></ul><ul><li><fb:login-button> </fb:login-button> </li></ul><ul><li><script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; </li></ul><ul><li>type=&quot;text/javascript&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>FB_RequireFeatures([&quot;XFBML&quot;], function() </li></ul><ul><li>{ </li></ul><ul><li>FB.Facebook.init(&quot;1b293e1be6fbff075cd8b9a9372186e9&quot;, &quot;/six_degrees/xd_receiver.htm&quot;); </li></ul><ul><li>FB.Facebook.get_sessionState().waitUntilReady(function() </li></ul><ul><li>{ </li></ul><ul><li>FB.Facebook.apiClient.friends_get (null, function(result, ex) { </li></ul><ul><li> window.alert(&quot;Friends list: &quot; + result); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul>Now everything’s loaded, we can get a list of the user’s friends from the API with a familiar-looking method call.
  13. 13. Facebook Connect – How it works <ul><li>What you can’t do: </li></ul><ul><li>Publish stories to a friends newsfeed, only to the current user’s </li></ul><ul><li>Update any profile box except that of the current user </li></ul><ul><li>Limited set of FBML tags in XFBML at present </li></ul>
  14. 14. Facebook Connect – Connecting accounts <ul><li>One more feature: </li></ul><ul><li>Migrating the social graph from Facebook </li></ul><ul><li>Works by matching e-mail addresses used on your site with e-mail addresses entered into Facebook </li></ul><ul><li>Prompt your site users to invite their friends to “connect” to your site </li></ul><ul><ul><li>Uses the new fb:connect-form tag </li></ul></ul>
  15. 15. Facebook Connect – Disadvantages <ul><li>There are disadvantages to Facebook Connect… </li></ul>
  16. 16. Facebook Connect – Disadvantages <ul><li>It’s all in JavaScript: </li></ul><ul><li>Not always the most manageable code </li></ul><ul><li>Takes some lateral thinking to hook up with your site’s databases </li></ul><ul><li>No SEO benefits </li></ul><ul><li>Poor accessibility (JavaScript disabled = Facebook Connect doesn’t work) </li></ul>
  17. 17. Facebook Connect – Disadvantages <ul><li>It’s not a treasure-trove of new user details: </li></ul><ul><li>Can’t access any more friend details than if a user adds an application i.e. no access to e-mail addresses </li></ul><ul><li>Facebook intends privacy settings to be dynamic, therefore changes in Facebook settings may affect your site </li></ul><ul><li>You don’t own the data </li></ul>
  18. 18. Facebook Connect – The future <ul><li>Due to be launched to everyone “soon” </li></ul><ul><li>Going to be a big focus for Facebook </li></ul><ul><ul><li>Facebook’s move to be at the centre of social activity </li></ul></ul><ul><li>May see Connect stories being given greater priority in the newsfeed </li></ul><ul><li>Expect Connect plug-ins for blogs, Digg, and every web 2.0 type site there is </li></ul>See current Facebook Connect implementations at: http://www.somethingtoputhere.com/therunaround http://www.theinsider.com/
  19. 19. Facebook Connect – The future <ul><li>Thanks </li></ul>Karl Bunyan, karl.bunyan@exponetic.com

×