Facebook Platform


Published on

Walkthrough of the current (late April 2010) state of the Facebook Platform, given as a talk as part of the Facebook Developer Garage London workshop day at the Difference Engine in Middlesborough

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Facebook Platform

  1. 1. Facebook Platform Dave Nattriss – natts.com Facebook Developer Garage London Facebook applications, including: <ul><li>authentication and permissions
  2. 2. the new Graph API
  3. 3. the new server-side SDKs (PHP, Python)
  4. 4. Facebook mark-up language (FBML)
  5. 5. Facebook JavaScript (FBJS)
  6. 6. Facebook query language (FQL)
  7. 7. applications/games dashboards & bookmarks/counters </li></ul>
  8. 8. Facebook Platform history <ul><li>“ provides a framework for third party developers to create applications that interact with core Facebook features”
  9. 9. launched on 24 th May 2007
  10. 10. initial goldrush for viral apps (with ads)
  11. 11. blogs sprang up – ex. http://www.insidefacebook.com
  12. 12. third party statistics services
  13. 13. venture capitalists
  14. 14. developer garages </li><ul><li>London: July 2007, 25+ events to date </li></ul></ul>
  15. 15. Facebook Platform now <ul><li>various new features, changes and removals over the years </li><ul><li>ex. removal of app-to-user notifications
  16. 16. cat and mouse game between Facebook/developers </li></ul><li>most recent big changes for apps at f8 on 21 st April 2010: </li><ul><li>full user data caching allowed (was 24 hours), so long as you: </li><ul><li>keep it updated with real-time WebHooks (HTTP POST)
  17. 17. delete all data if user wishes </li></ul><li>OAuth 2.0 authentication
  18. 18. Graph API </li></ul></ul>
  19. 19. Facebook applications now
  20. 20. Facebook applications now Monthly Active Users
  21. 21. Facebook applications now
  22. 22. Anatomy of a Facebook application http://apps.facebook.com/flixster/ http://apps.facebook.com/flixster/m/770800493 Database Facebook Web server Facebook API
  23. 23. Application authentication <ul><li>OAuth 2.0 protocol - http://oauth.net </li><ul><li>collaboration between developers at Google, Yahoo!, Microsoft, Twitter and Facebook (x2)
  24. 24. flows supported on Facebook: </li><ul><li>web application redirects
  25. 25. JavaScript
  26. 26. desktop applications
  27. 27. mobile applications </li></ul><li>requires application registration – ID and secret: </li><ul><li>simple: http://developers.facebook.com/setup
  28. 28. advanced: http://www.facebook.com/developers </li></ul></ul></ul>
  29. 29. Application authentication <ul>https://graph.facebook.com/oauth/authorize ?client_id=123456789 &redirect_uri=http://www.myface.com/oauth_redirect </ul>http://www.myface.com/oauth_redirect ?code=987654321 https://graph.facebook.com/oauth/access_token ?client_id=123456789 &redirect_uri= http://www.myface.com/oauth_redirect &client_secret=ABCDEFGHI &code=987654321 Access token returned: A1B2C3D4E5 https://graph.facebook.com/me?access_token=A1B2C3D4E5
  30. 30. Basic authorisation <ul><li>Basic authorisation gives you user's: </li><ul><li>Facebook ID
  31. 31. public user profile data, typically: </li><ul><li>name
  32. 32. picture
  33. 33. gender
  34. 34. friends </li></ul></ul></ul>
  35. 35. Extended permissions <ul><li>Publishing permissions: </li><ul><li>publish_stream (without prompts)
  36. 36. create_event (and modify)
  37. 37. rsvp_event
  38. 38. sms (send and receive)
  39. 39. offline_access (extends access token expiry period from 'short' to 'long') </li></ul><li>Data permissions – about 40: </li><ul><li>roughly half are user-profile related, such as their e-mail, birthday, events, likes, photos, status etc.
  40. 40. the rest are friend-related, mainly the same but for the user's friends </li></ul></ul>
  41. 41. Graph API “ enables you to read and write objects and connections in the Facebook social graph” <ul><li>Album - a photo album
  42. 42. Event - a Facebook event
  43. 43. Group - a Facebook group
  44. 44. Link - a shared link
  45. 45. Note - a Facebook note
  46. 46. Page - a Facebook Page
  47. 47. Photo - an individual photo
  48. 48. Post - an individual entry in a profile's feed
  49. 49. Status message - a status message on a user's wall
  50. 50. User - a user profile
  51. 51. Video - an individual video </li></ul>
  52. 52. Graph API example https://graph.facebook.com/gordonbrown [“id&quot;: &quot;12345678901234567890&quot;, &quot;name&quot;: &quot;Gordon Brown&quot;, &quot;first_name&quot;: &quot;Gordon&quot;, &quot;last_name&quot;: &quot;Brown&quot;, &quot;link&quot;: &quot;http://www.facebook.com/gordonbrown&quot;, &quot;about&quot;: &quot;Passionate Scot&quot;, &quot;birthday&quot;: &quot;20/02/1951&quot;, &quot;work&quot;: [ { &quot;employer&quot;: { &quot;id&quot;: 987654321, &quot;name&quot;: &quot;Labour Party&quot; }, &quot;location&quot;: { &quot;id&quot;: 10101010101010, &quot;name&quot;: &quot;London, United Kingdom&quot; }, &quot;position&quot;: { &quot;id&quot;: 10202020202020, &quot;name&quot;: &quot;Party Leader&quot; }, &quot;start_date&quot;: &quot;2007-08&quot; },
  53. 53. Graph API example &quot;friends&quot;: [ { &quot;name&quot;: &quot;Alistair Darling&quot;, &quot;id&quot;: &quot;234567890&quot; }, { &quot;name&quot;: &quot;Nick Clegg&quot;, &quot;id&quot;: &quot;345678901&quot; } } ] http://developers.facebook.com/docs/api http://developers.facebook.com/docs/reference/api
  54. 54. Server-side SDKs <ul><li>software development kits
  55. 55. currently available for: </li><ul><li>PHP
  56. 56. Python </li></ul><li>also clients: </li><ul><li>JavaScript (web browser)
  57. 57. Android (mobile)
  58. 58. iPhone (mobile) </li></ul></ul>
  59. 59. PHP SDK example require 'facebook.php'; $facebook = new Facebook(array( 'appId' => 'YOUR APP ID', 'secret' => 'YOUR API SECRET', 'cookie' => true, // enable optional cookie support )); try { $me = $facebook->api('/me'); } catch (FacebookApiException $e) { error_log($e); }
  60. 60. Facebook mark-up language (FBML) <ul><li>enables you to build full Facebook Platform applications that deeply integrate into a user's Facebook experience
  61. 61. can hook into several Facebook integration points, including: </li><ul><li>profile
  62. 62. profile actions
  63. 63. Facebook canvas
  64. 64. News Feed
  65. 65. Mini-Feed </li></ul><li>is an evolved subset of HTML with some elements removed, and others which have been added that are specific to Facebook
  66. 66. can define new FBML tags using Custom Tags, and also use in your application custom tags that other developers created (there's a Custom Tags Directory)
  67. 67. there's also XFBML for Facebook Connect apps </li></ul>
  68. 68. FBML example <fb:header><fb:name uid=”profileowner” /></fb:header> <h3>Hey <fb:name uid=”profileowner” />!</h3> <p>You're so vain, you probably think this app is about you ;-)</p> http://wiki.developers.facebook.com/index.php/FBML
  69. 69. Facebook JavaScript (FBJS) <ul><li>Facebook's solution for using JavaScript in Facebook applications
  70. 70. “ We built FBJS to empower developers with all the functionality they need, and to protect our users' privacy at the same time”
  71. 71. JavaScript syntax is exactly the same, but DOM methods, events are different
  72. 72. Facebook provides own AJAX, dialogs and animation functions for use, instead of you using a framework like jQuery
  73. 73. Facebook parses JavaScript that you give it, and any identifiers (function and variable names) get prepended with your application ID </li></ul>
  74. 74. FBJS parsing example function foo(bar) { var obj = {property: bar}; return obj.property; } function a12345_foo(a12345_bar) { var a12345_obj = {property: a12345_bar}; return a12345_obj.property; } http://wiki.developers.facebook.com/index.php/FBJS
  75. 75. Facebook query language (FQL) <ul><li>SQL-style interface to query the data exposed by the Graph API
  76. 76. has some advanced features not available in the Graph API, including batching multiple queries into a single call
  77. 77. execute FQL queries by fetching: </li></ul>https://api.facebook.com/method/fql.query?query=QUERY &format=XML <ul><ul><li>response format can be specified as either XML or JSON with the format query parameter </li></ul><li>query format: </li></ul>SELECT [fields] FROM [table] WHERE [conditions] <ul><ul><li>unlike SQL, the FQL FROM clause can contain only a single table, out of the 40+ available
  78. 78. use the IN keyword in SELECT or WHERE clauses to do subqueries, but the subqueries cannot reference variables in the outer query's scope </li></ul></ul>http://developers.facebook.com/docs/reference/fql/
  79. 79. Application/Game Dashboards <ul><li>due to popularity of game apps on Facebook, they've created a dashboard for games, with specific features for game players and developers
  80. 80. also a separate Application Dashboard for all other applications
  81. 81. Dashboard API </li><ul><li>post news items to user's dashboard, providing information to user and giving them the opportunity to take action
  82. 82. promote the activity of your users so their friends can see what they've done with your application
  83. 83. set a counter, as a lightweight way for you to inform/notify your users to take action within your application </li></ul></ul>
  84. 84. Games Dashboard preview
  85. 85. Games Dashboard preview (cont.)
  86. 86. Bookmark and Counters <ul><li>Bookmark </li><ul><li>FBML/XFBML tag that renders an &quot;Add Bookmark&quot; button, so you can easily prompt users to bookmark your application
  87. 87. use to prompt them to create a bookmark for your application so they can easily navigate back to it, and receive alerts via the Counter </li></ul><li>Counter </li><ul><li>directly notify their users that they should take an action within your application
  88. 88. displayed next to an application's bookmark on the Home page
  89. 89. will 'likely' be located beside all applications on the Application and Games Dashboards as well </li></ul></ul>
  90. 90. Any questions? http://developers.facebook.com Facebook Developer Garage London http://www.facebookgarage.org.uk Dave Nattriss natts.com Limited http://natts.com http://www.facebook.com/davenatts http://twitter.com/natts