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
2. Social Applications Facebook Platform Open Graph JavaScript SDK Mobile Web Native Android SDK Authentication Graph API & Dialogs Native Linking PhoneGap
9. Need Android Phone examples
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
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
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
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
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