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/

8c090cc1ccd623a146ddd9159b1bf7e2?s=128

Sammy Kaye Powers

January 20, 2015
Tweet

Transcript

  1. 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. 7.
  3. 8.
  4. 24.
  5. 28.

    No.

  6. 29.
  7. 40.
  8. 42.
  9. 44.
  10. 46.
  11. 50.
  12. 52.
  13. 59.
  14. 69.
  15. 70.
  16. 71.
  17. 72.
  18. 87.
  19. 94.
  20. 101.

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

    !“id”: 123,! !“name”: “Foo User”! }
  21. 108.

    Graph API The • REST! • HATEOAS! • OAuth! •

    etc… Nope Nope ✓ Yep! (2.0)
  22. 109.

    Graph API The • REST! • HATEOAS! • OAuth! •

    etc… Nope Nope ✓ Yep! (2.0) Don’t have to know!
  23. 110.
  24. 113.

    Laravel Graph API Can I haz user 123? Can I

    haz user 123? Social Graph
  25. 133.

    photo id:4590 HTTP/1.1 200 OK! {! "id": "4590", ! "name":

    "Plane!", ! . . .! } Host: graph.facebook.com! GET /v2.2/4590
  26. 143.

    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
  27. 146.

    User Node fields edges - id! - first_name! - last_name!

    - name! - email * /albums! /feed! /photos! /friends! /picture *
  28. 160.
  29. 161.
  30. 173.

    1. Read the Platform Policy 2. Read the Platform Policy

    3. Read the Platform Policy Three important points
  31. 174.
  32. 177.
  33. 178.
  34. 179.
  35. 180.
  36. 186.
  37. 187.
  38. 191.
  39. 192.

    ID

  40. 193.
  41. 205.
  42. 207.
  43. 208.
  44. 220.
  45. 221.
  46. 224.
  47. 229.
  48. 230.
  49. 231.
  50. 233.

    Ah?

  51. 234.

    Ah?

  52. 235.

    Ah?

  53. 236.
  54. 240.

    Login Flow • User clicks on link • Facebook asks

    to approve • Access token is obtained *
  55. 289.
  56. 290.

    Config $fb = new Facebook\Facebook(); if you have env vars

    FACEBOOK_APP_ID FACEBOOK_APP_SECRET and
  57. 306.
  58. 309.

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

    getter method, Facebook::getFbInstance();! support constructor dependency injection, etc.
  59. 311.

    LaravelFacebookSdk login from redirect $login_link = $fb->getLoginUrl();! ! echo '<a

    href="' . $login_link . '">'.! 'Log in!</a>'; Route: /
  60. 315.

    LaravelFacebookSdk callback URL use Facebook\Exceptions\FacebookSDKException;! try {! $token = $fb->getAccessTokenFromRedirect();!

    } catch (FacebookSDKException $e) {! dd(‘Error:' . $e->getMessage());! } Route: /facebook/login
  61. 319.
  62. 320.
  63. 331.

    Getting User Data $a = $res->getHttpStatusCode();! $b = $res->getHeaders();! $c

    = $res->getBody();! $d = $res->getDecodedBody(); Facebook\FacebookResponse()
  64. 336.

    Getting User Data GraphUser! GraphPage! GraphAlbum Facebook\GraphNodes\GraphNode() sub nodes of

    namespace: Facebook\GraphNodes $res->getGraphUser();! $res->getGraphPage();! $res->getGraphAlbum();
  65. 338.

    User Node fields edges - id! - first_name! - last_name!

    - name! - email * /albums! /feed! /photos! /friends! /picture *
  66. 339.

    Getting User Data $id = $userNode->getId();! $name = $userNode->getName();! $partner

    =! $userNode->getSignificantOther(); Facebook\GraphNodes\GraphUser()
  67. 342.

    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>
  68. 343.

    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
  69. 352.

    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
  70. 353.

    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
  71. 354.

    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
  72. 355.

    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
  73. 364.
  74. 365.

    Know You prolly didn’t Facebook App Graph API Facebook Developer

    Facebook Login Access Tokens Javascript SDK php SDK
  75. 368.

    Learn! So much more to • Graph API • User

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