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.

James Pearce

May 15, 2012

More Decks by James Pearce

Other Decks in Technology


  1. Social Applications Facebook Platform Open Graph JavaScript SDK Mobile Web

    Native Android SDK Authentication Graph API & Dialogs Native Linking PhoneGap
  2. <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>
  3. 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.'); } });
  4. 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'];
  5. 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/
  6. 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"...
  7. Open Graph Desktop Web App Desktop Web Mobile Web Desktop

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

    a Sound ▪ Follow a User ▪ Join a Group
  9. ... <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
  10. 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
  11. ▪ 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
  12. 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)
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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