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

Graph Theory, the Facebook Platform and the new...

Graph Theory, the Facebook Platform and the new PHP SDK v5

This was the presentation I delivered over Skype to the Dayton Web Developers User Group.

http://www.meetup.com/dayton-web-developers/events/220726710/

Sammy Kaye Powers

July 01, 2015
Tweet

More Decks by Sammy Kaye Powers

Other Decks in Education

Transcript

  1. No.

  2. Graph API Can I haz user 123? Can I haz

    user 123? Social Graph PHP App
  3. photo id:4590 HTTP/1.1 200 OK { "id": "4590", "name": "Plane!",

    . . . } Host: graph.facebook.com GET /v2.3/4590
  4. photo id:4590 GET /v2.3/4590/comments HTTP/1.1 200 OK {"data": [ {"id":

    "4590_123", "message": "Pickles!"}, {"id": "4590_456", "message": "Turtles!"} ]} comments
  5. User Node fields edges - id - first_name - last_name

    - name - email * /albums /feed /photos /friends /picture *
  6. GET /v2.3/123/photos?debug=true {"__debug__": { "messages": [{ "message": "The field 'photos'

    is only accessible on the User object after the user grants the 'user_photos' permission.", "type": "warning" }]}} empty Response NEW!
  7. 1. Read the Platform Policy 2. Read the Platform Policy

    3. Read the Platform Policy Three important points
  8. ID

  9. Ah?

  10. Ah?

  11. Ah?

  12. Login Flow • User clicks on link • Facebook asks

    to approve • Access token is obtained *
  13. Clients OAuth 2.0 PHP League $authUrl = $provider->getAuthorizationUrl(); $_SESSION['oauth2state'] =

    $provider->state; header('Location: '.$authUrl); // . . . $token = $provider->getAccessToken( 'authorization_code', [ 'code' => $_GET['code'] ]); $user = $provider->getUser($token); printf('Hello %s!', $userDetails->firstName);
  14. Clients OAuth 2.0 Laravel 5 public function redirectToProvider() { return

    Socialize::with(‘facebook') ->redirect(); } public function handleProviderCallback() { $user = Socialize::with(‘facebook') ->user(); // $user->token; }
  15. php SDK v5 • Signed request support • Easy-as-pie file

    uploads • Easy batch request support • Easy-peasy pagination • Graph Nodes as collections
  16. Facebook\Facebook() • Handles fall-back config • Factory for helpers &

    entities • Helps with HTTP requests • Container to inject custom deps
  17. $fb = new Facebook\Facebook([ 'app_id' => 'app-id', 'app_secret' => ‘secret',

    'default_graph_version' => 'v2.3', ]); Configuration
  18. callback URL use Facebook\Exceptions\FacebookSDKException; try { $token = $helper->getAccessToken(); }

    catch (FacebookSDKException $e) { dd(‘Error:' . $e->getMessage()); } Route: /facebook/login Authentication
  19. $a = $res->getHttpStatusCode(); $b = $res->getHeaders(); $c = $res->getBody(); $d

    = $res->getDecodedBody(); Facebook Response Response Data $res = Facebook\FacebookResponse()
  20. Graph Nodes fields edges - id - first_name - last_name

    - name - email * /albums /feed /photos /friends /picture * Graph Node
  21. $data = [ ‘message’ => ‘Hi from Dayton Web Dev!’,

    ]; $res = $fb->post(‘/me/feed’, $data); $fb = Facebook\Facebook() Request & Response POST
  22. Injectable Persistent Data Storage: `PersistentDataInterface` Injectable HTTP Client: `FacebookHttpClientInterface` Injectable

    CSPRNG: `PseudoRandomStringGeneratorInterface` Injectable URL detection: `UrlDetectionInterface` Advanced Integration
  23. $data = [
 'message' => 'My awesome photo.',
 'source' =>

    $fb->fileToUpload('/my/photo.jpg'),
 ]; $res = $fb->post(‘/me/feed’, $data); $fb = Facebook\Facebook() File Uploads Photo example
  24. $data = [ 'title' => 'My video’,
 'description' => 'My

    awesome video.',
 'source' => $fb->videoToUpload('/my/photo.mp4'),
 ]; $res = $fb->post(‘/me/feed’, $data); $fb = Facebook\Facebook() File Uploads Video example
  25. Javascript SDK installation <script> window.fbAsyncInit = function() { FB.init({ appId

    : 'your-app-id', xfbml : true, version : 'v2.3' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> copy/paste before developers.facebook.com/docs/javascript/quickstart </body>
  26. Javascript SDK installation <script> window.fbAsyncInit = function() { FB.init({ appId

    : 'your-app-id', xfbml : true, version : 'v2.3' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> developers.facebook.com/docs/javascript/quickstart This
  27. meta tags <meta property=“og:url" content="http://foo" /> <meta property=“og:title" content=“Foo Site"

    /> <meta property=“og:description" content=“Foo description of bar" /> <meta property=“og:image" content=“http://foo.c/bar.jpg” /> Open Graph
  28. meta tags <meta property=“og:url" content="http://foo" /> <meta property=“og:title" content=“Foo Site"

    /> <meta property=“og:description" content=“Foo description of bar" /> <meta property=“og:image" content=“http://foo.c/bar.jpg” /> Open Graph
  29. meta tags <meta property=“og:url" content="http://foo" /> <meta property=“og:title" content=“Foo Site"

    /> <meta property=“og:description" content=“Foo description of bar" /> <meta property=“og:image" content=“http://foo.c/bar.jpg” /> Open Graph
  30. meta tags <meta property=“og:url" content="http://foo" /> <meta property=“og:title" content=“Foo Site"

    /> <meta property=“og:description" content=“Foo description of bar" /> <meta property=“og:image" content=“http://foo.c/bar.jpg” /> Open Graph
  31. Know You prolly didn’t Facebook App Graph API Facebook Developer

    Facebook Login Access Tokens Javascript SDK php SDK
  32. Learn! So much more to • Graph API • User

    Permissions • App Canvas • Page Tabs • Test Users • Test Apps • And more!