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

How to Integrate Facebook into Your Laravel App and Have it Not Suck

How to Integrate Facebook into Your Laravel App and Have it Not Suck

A complete introduction to the Facebook development platform and how to integrate Facebook into a Laravel app.

For the Laravel Chicago User Group on January 20, 2015

Watch the video here: http://youtu.be/aLcKmsQMVj8

------

The Graph Theory wiki:
http://en.wikipedia.org/wiki/Graph_theory

Excellent video tutorials on Graph Theory: https://www.youtube.com/playlist?list=PLGxuz-nmYlQOiIOriTXMEoGoybUC3Jmrn

Graph API documentation: https://developers.facebook.com/docs/graph-api

Graph API endpoint reference: https://developers.facebook.com/docs/graph-api/reference

User Permissions: https://developers.facebook.com/docs/facebook-login/permissions

Become a Facebook developer: https://developers.facebook.com

Facebook Platform Policy: https://developers.facebook.com/policy/

App dashboard: https://developers.facebook.com/apps

More on Access Tokens: https://www.sammyk.me/access-token-handling-best-practices-in-facebook-php-sdk-v4

Official PHP SDK v4.1: https://github.com/facebook/facebook-php-sdk-v4/tree/master

LaravelFacebookSdk: https://github.com/SammyK/LaravelFacebookSdk

JavaScript SDK installation code: https://developers.facebook.com/docs/javascript/quickstart

Open Graph protocol: http://ogp.me/

F8 Facebook Developer Conference 2015: https://www.fbf8.com/

-----

# Vanity Slide
Twitter: https://twitter.com/SammyK
Blog: https://www.sammyk.me/
PHP Roundtable: https://www.phproundtable.com/
Chicago Facebook Developers: http://www.meetup.com/chicago-facebook-development/

Sammy Kaye Powers

January 20, 2015
Tweet

More Decks by Sammy Kaye Powers

Other Decks in Technology

Transcript

  1. How to Integrate not suck Sammy Kaye Powers January 20th,

    2015 & Have it Facebook Into Laravel photo: Mrs Tulk https://www.flickr.com/photos/statelibraryofnsw/3211732446/in/photostream/
  2. No.

  3. HTTP API over HTTP/1.1 200 OK! Content-Type: application/json! ! {!

    !“id”: 123,! !“name”: “Foo User”! }
  4. Graph API The • REST! • HATEOAS! • OAuth! •

    etc… Nope Nope ✓ Yep! (2.0)
  5. Graph API The • REST! • HATEOAS! • OAuth! •

    etc… Nope Nope ✓ Yep! (2.0) Don’t have to know!
  6. Laravel Graph API Can I haz user 123? Can I

    haz user 123? Social Graph
  7. photo id:4590 HTTP/1.1 200 OK! {! "id": "4590", ! "name":

    "Plane!", ! . . .! } Host: graph.facebook.com! GET /v2.2/4590
  8. photo id:4590 GET /v2.2/4590/comments HTTP/1.1 200 OK! ! {"data": [!

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

    - name! - email * /albums! /feed! /photos! /friends! /picture *
  10. 1. Read the Platform Policy 2. Read the Platform Policy

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

  12. Ah?

  13. Ah?

  14. Ah?

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

    to approve • Access token is obtained *
  16. Config $fb = new Facebook\Facebook(); if you have env vars

    FACEBOOK_APP_ID FACEBOOK_APP_SECRET and
  17. LaravelFacebookSdk grab instance $fb = App::make('laravel-facebook-sdk'); @TODO: Make this better!

    getter method, Facebook::getFbInstance();! support constructor dependency injection, etc.
  18. LaravelFacebookSdk login from redirect $login_link = $fb->getLoginUrl();! ! echo '<a

    href="' . $login_link . '">'.! 'Log in!</a>'; Route: /
  19. LaravelFacebookSdk callback URL use Facebook\Exceptions\FacebookSDKException;! try {! $token = $fb->getAccessTokenFromRedirect();!

    } catch (FacebookSDKException $e) {! dd(‘Error:' . $e->getMessage());! } Route: /facebook/login
  20. Getting User Data $a = $res->getHttpStatusCode();! $b = $res->getHeaders();! $c

    = $res->getBody();! $d = $res->getDecodedBody(); Facebook\FacebookResponse()
  21. Getting User Data GraphUser! GraphPage! GraphAlbum Facebook\GraphNodes\GraphNode() sub nodes of

    namespace: Facebook\GraphNodes $res->getGraphUser();! $res->getGraphPage();! $res->getGraphAlbum();
  22. User Node fields edges - id! - first_name! - last_name!

    - name! - email * /albums! /feed! /photos! /friends! /picture *
  23. Getting User Data $id = $userNode->getId();! $name = $userNode->getName();! $partner

    =! $userNode->getSignificantOther(); Facebook\GraphNodes\GraphUser()
  24. Javascript SDK installation <script>! window.fbAsyncInit = function() {! FB.init({! appId

    : 'your-app-id',! xfbml : true,! version : 'v2.1'! });! };! ! (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>
  25. Javascript SDK installation <script>! window.fbAsyncInit = function() {! FB.init({! appId

    : 'your-app-id',! xfbml : true,! version : 'v2.1'! });! };! ! (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
  26. 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
  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. Know You prolly didn’t Facebook App Graph API Facebook Developer

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

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