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.

Transcript

1. Building & Distributing
   Social Apps
   with Facebook Platform & Open Graph
   James Pearce & Christine Abernathy
   

   View Slide

2. Social Applications
   Facebook Platform
   Open Graph
   JavaScript SDK
   Mobile Web
   Native Android SDK
   Authentication
   Graph API & Dialogs
   Native Linking
   PhoneGap
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Need Android Phone
   examples
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. year years
    people
    M
    years
    people
    M
    

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. Foursquare
    3
    Magic Land: Island
    

    View Slide

23. World War
    App 2,000 monthly users
    

    View Slide

24. Social Plugins
    

    View Slide

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

    View Slide

26. GoodReads
    77% increase in
    Daily Active Users
    

    View Slide

27. Pinterest
    60% increase in daily
    referrals from Facebook
    

    View Slide

28. View Slide

29. View Slide

30. Getting Started
    

    View Slide

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

    View Slide

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

    View Slide

33. 
    <br/>window.fbAsyncInit = function() {FB.init({appId: 'APP_ID'});};<br/>(function(d){<br/>var js, id='facebook-jssdk',<br/>ref=d.getElementsByTagName('script')[0];<br/>if (d.getElementById(id)) {return;}<br/>js = d.createElement('script'); js.id = id; js.async = true;<br/>js.src = "//connect.facebook.net/en_US/all.js";<br/>ref.parentNode.insertBefore(js, ref);<br/>}(document));<br/>
    

    View Slide

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.');
    }
    });
    

    View Slide

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'];
    

    View Slide

36. https://graph.facebook.com/...
    

    View Slide

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

    View Slide

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/
    

    View Slide

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"...
    

    View Slide

40. $facebook->api('/738229837/checkins',
    'POST',
    array(
    'access_token' => $facebook->getAccessToken(),
    'place' => '109599872410687',
    'message' => 'Sitting at work',
    'coordinates' => json_encode(array(
    ...
    ))
    )
    );
    

    View Slide

41. Open Graph
    

    View Slide

42. LISTEN
    READ
    RUN
    EAT
    Like
    Like
    Like
    Like
    

    View Slide

43. View Slide

44. View Slide

45. Open Graph
    Desktop Web App
    Desktop Web
    Mobile Web
    Desktop Web App
    Desktop Web
    Mobile Web
    Native Apps Native Apps
    

    View Slide

46. ▪ Play a Sound
    ▪ Like a Sound
    ▪ Post a Sound
    ▪ Follow a User
    ▪ Join a Group
    

    View Slide

47. Permissions Dialog
    

    View Slide

48. Sharing in the app
    

    View Slide

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

    View Slide

50. Android Native & Mobile Web: Newsfeed & Timeline
    

    View Slide

51. iOS Native: Newsfeed & Timeline
    

    View Slide

52. Desktop Web: Newsfeed and Ticker
    

    View Slide

53. Desktop Web: Timeline
    

    View Slide

54. Building With Open Graph
    

    View Slide

55. ACTION OBJECT
    . Model your data
    

    View Slide

56. View Slide

57. . Markup and expose your objects to the Web
    

    View Slide

58. ...
    
    Lasagne
    
    
    
    
    
    
    
    ...
    
    ...
    http://mysite.com/lasagne
    

    View Slide

59. . Publish Actions
    POST https://graph.facebook.com/me/foodapp:cook
    access_token=234876AB6865...
    &
    recipe=http://mysite.com/lasagne
    

    View Slide

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
    

    View Slide

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
    

    View Slide

62. Facebook Integration for Android
    Mobile Best Practices Demo
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

66. Demo: Social Context
    1. Hackbook for Android
    2. Demo app - wire up Feed and Requests
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

70. James Pearce
    &
    Christine Abernathy
    

    View Slide