Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Social Apps With Facebook

Building Social Apps With Facebook

Whether you're developing against native, hybrid, or Web-based Android stacks, Facebook Platform and Open Graph provide powerful ways to put social interaction at the heart of your apps. And, for developers and businesses, they bring strong discovery, growth and engagement opportunities through Facebook's social distribution channels.

This class will introduce you to Facebook Platform, Single Sign-On, and how you can put social design to work today. We'll explore the theory and practice of Open Graph, and live-code both native and mobile Web apps that demonstrate the principles at work.

D7826ab49f74589fcada00cb92e5ede7?s=128

James Pearce

May 15, 2012
Tweet

Transcript

  1. Building & Distributing Social Apps with Facebook Platform & Open

    Graph James Pearce & Christine Abernathy
  2. Social Applications Facebook Platform Open Graph JavaScript SDK Mobile Web

    Native Android SDK Authentication Graph API & Dialogs Native Linking PhoneGap
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. Need Android Phone examples

  10. None
  11. None
  12. None
  13. year years people M years people M

  14. 160m monthly mobile visitors 1.1b monthly mobile visits Facebook Platform

  15. Friends Search News Feed Notifications Requests Bookmarks Open Graph Plugins

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. Foursquare 3 Magic Land: Island

  23. World War App 2,000 monthly users

  24. Social Plugins

  25. The Guardian 0 to 3.9+ million Monthy Active Users in

    5 months
  26. GoodReads 77% increase in Daily Active Users

  27. Pinterest 60% increase in daily referrals from Facebook

  28. None
  29. None
  30. Getting Started

  31. App Dashboard https://developers.facebook.com/apps

  32. https://github.com/facebook... /facebook-js-sdk /facebook-android-sdk /facebook-ios-sdk /facebook-php-sdk

  33. <div id="fb-root"></div> <script> window.fbAsyncInit = function() {FB.init({appId: 'APP_ID'});}; (function(d){ var

    js, id='facebook-jssdk', ref=d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; ref.parentNode.insertBefore(js, ref); }(document)); </script>
  34. FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information...'); FB.api('/me',

    function(response) { console.log('Good to see you, ' + response.name + '.'); }); } else { console.log('User cancelled login or did not authorize.'); } });
  35. require_once("facebook.php"); $facebook = new Facebook(array('appId' => 'APP_ID', 'secret' => 'APP_SECRET'));

    $loginUrl = $facebook->getLoginUrl(array( 'scope' => 'read_stream, friends_likes', 'redirect_uri' => 'https://www.myapp.com/post_login_page' )); ... $user_profile = $facebook->api('/me'); echo "Name: " . $user_profile['name'];
  36. https://graph.facebook.com/...

  37. https://developers.facebook.com/tools/explorer

  38. GET https://graph.facebook.com/738229837 { "id": "738229837", "name": "James Pearce", "first_name": "James",

    "last_name": "Pearce", "hometown": { "id": "106078429431815", "name": "London, United Kingdom" }, "location": { "name": "Palo Alto, California" ... https://developers.facebook.com/docs/reference/api/
  39. GET https://graph.facebook.com/738229837/checkins { "data": [ { "id": "10150835326849838", "from": {

    "name": "James Pearce", "id": "738229837" }, "message": "Warm and productive in London...", "place": { "id": "109599872410687", "name": "Facebook London"...
  40. $facebook->api('/738229837/checkins', 'POST', array( 'access_token' => $facebook->getAccessToken(), 'place' => '109599872410687', 'message'

    => 'Sitting at work', 'coordinates' => json_encode(array( ... )) ) );
  41. Open Graph

  42. LISTEN READ RUN EAT Like Like Like Like

  43. None
  44. None
  45. Open Graph Desktop Web App Desktop Web Mobile Web Desktop

    Web App Desktop Web Mobile Web Native Apps Native Apps
  46. ▪ Play a Sound ▪ Like a Sound ▪ Post

    a Sound ▪ Follow a User ▪ Join a Group
  47. Permissions Dialog

  48. Sharing in the app

  49. Publish Actions from every platform Desktop Web App Desktop Web

    App
  50. Android Native & Mobile Web: Newsfeed & Timeline

  51. iOS Native: Newsfeed & Timeline

  52. Desktop Web: Newsfeed and Ticker

  53. Desktop Web: Timeline

  54. Building With Open Graph

  55. ACTION OBJECT . Model your data

  56. None
  57. . Markup and expose your objects to the Web

  58. ... <head> <title>Lasagne</title> <meta property="og:type" content="foodapp:dish"/> <meta property="og:title" content="Lasagne"/> <meta

    property="og:description" content="yummy"/> <meta property="og:url" content="http://mysite.com/lasagne"/> <meta property="og:image" content="http://mysite.com/lasagne.jpg"/> <meta property="foodapp:ingredient" content="http://mysite.com/beef"/> <meta property="foodapp:ingredient" content="http://mysite.com/pasta"/> ... </head> ... http://mysite.com/lasagne
  59. . Publish Actions POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagne

  60. user performs action in app client or server posts action

    to Facebook POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865...& recipe=http://mysite.com/lasagne Facebook gets the object's metadata GET http://mysite.com/lasagne
  61. ▪ Creating Actions and Object Types ▪ Hosting Objects ▪

    Permissions and Authentication ▪ Publishing Actions from the Graph Explorer ▪ Reading Actions from the Graph Explorer ▪ Publishing Actions from the Mobile Web Walkthrough
  62. Facebook Integration for Android Mobile Best Practices Demo

  63. Demo 1. Implement Authentication + Single Sign On ( minutes)

    2. Add Social Context - Graph API, Dialogs ( minutes) 3. Add Native Linking to your App ( minutes) 4. Use Apache Cordova / PhoneGap ( minutes)
  64. Demo: Authentication - Pre Demo Setup 1. Facebook App Dashboard

    • Created an app, noted the App ID • Configured the Android settings 2. Demo App • Included the Facebook Android SDK • Added a helper class implementation for API callbacks
  65. Demo: Authentication - Code Flow 1. Instantiate the Facebook instance

    2. Authorize through Facebook app • (call the authorize SDK method) 3. Handle the callback from the Facebook app • (call the authorizeCallback SDK method) 4. Handle the auth success, failure cases • (implement onComplete method in the callback) 5. Implement the logout flow
  66. Demo: Social Context 1. Hackbook for Android 2. Demo app

    - wire up Feed and Requests
  67. Demo: Native Linking 1. Facebook App Dashboard • Configured SSO

    and Deep Link settings 2. Demo App • Check intent in main launcher • Detect incoming requests • Detect incoming story links
  68. Demo: Apache Cordova - Pre Demo Setup 1. Cordova •

    Downloaded latest Cordova • Cloned Facebook Connect Plugin repo 2. Source web app • Cloned sample, Hackbook for Mobile Web 3. Demo app (Android) • Created basic Cordova Android app • Included the Facebook Android SDK • Included the Facebook JavaScript SDK
  69. Demo: Apache Cordova - Code Setup 1. Setup Facebook Connect

    Plugin • Add FB Connect Plugin to the plugins list • Include the FB Connect Plugin JS library 2. Add the web app • Add the web app assets to the project 3. Modify HTML • Include Cordova and Plugin JS libraries • Use local Facebook JS SDK library • FB.init code, setup FB Connect Plugin
  70. James Pearce & Christine Abernathy