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/

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. Does not work @
3. Goal overview To get an
4. talk comes equipped with photo: http://gamerfitnation.com/
5. for braving the cold
6. super-neat Sticker Laravel Chicago
8. Boom!
9. That’s You :)
10. photo: harryritchies.com History lesson A slightly embellished
11. 1736 The year is
12. People wore Funny Bathing suits
13. riddles People solved
14. like this one
15. seven bridges
16. seven bridges Here
17. seven bridges Here Here
18. seven bridges Here Here Here
19. seven bridges Here Here Here Here
20. seven bridges Here Here Here Here Here
21. seven bridges Here Here Here Here Here Here
22. seven bridges Here Here Here Here Here Here There
23. cross all the bridges ONCE and only once?
25. enter Leonhard Euler
26. invents Graph theory
27. uses graph theory to Answer
28. No.
30. 268 Fast-forward years…
31. Facebook is Born! photo: bzd1 on Flickr
32. I guess I should back up a bit…
33. Graph Theory
34. What is it?
35. Describes rela tion ships
36. Guitars haveStrings
37. David likes pickles
38. to model relations Graphs we use
39. Graph? What kind of
40. This?
41. Nope This?
42. This?
43. Nope This?
44. This?
45. Nope This?
46. This?
47. Nope This?
48. Aw, kitty…
49. So what kind?
50. This
51. A simple graph
52. Dots
53. Dots Lines
54. Dots Lines
55. Nodes Lines
56. Nodes Lines a.k.a vertices
57. Nodes Lines a.k.a vertices
58. Nodes Edges a.k.a vertices
60. A “Thing”
61. the relation between the things
62. In the Back-end uses graph theory
63. Social Graph It’s called the
64. Social Graph It’s called the
65. …as in the Graph Theory kind of graphs
66. Social Graph photo: uberhumor.com
67. Social Graph It’s called P.S. That’s the open graph logo (a little different)
68. Describing this with Social Graph
71. Jordan
72. Jordan
73. Tatiana Jordan
74. Tatiana Jordan
75. Tatiana Jordan Kisses
76. Tatiana Jordan Kisses (instances of kissing)
77. Tatiana Jordan Kisses
78. Scott Tatiana Jordan Kisses
79. Scott Tatiana Jordan Kisses
80. Scott Tatiana Jordan stalks Kisses
81. Scott Tatiana Jordan stalks Kisses (instances of stalking)
82. Scott Tatiana Jordan Kisses stalks
83. Scott Tatiana Jordan stalks Kisses stalks
84. Scott Tatiana Jordan stalks Kisses stalks
85. Scott Tatiana Jordan stalks Kisses stalks people stalking people
86. “Facebooky” example
88. Social Graph (Facebook)
89. Laravel Nerd (you) (Facebook) Social Graph
90. Laravel Nerd (you) (Facebook) ?? link ?? Social Graph
91. Laravel Nerd (you) (Facebook) Graph API Social Graph
92. Laravel Nerd (you) (Facebook) Graph API Hi! Social Graph
93. Laravel Nerd (you) (Facebook) Graph API Social Graph
94. <tangent>
95. AN API? What’s
96. application program interface
97. specifies how software components should interact
98. API Laravel $user = DB::table(‘users')! !!!->where('name', ‘John')! !!!->first();
99. Http protocol API’s over the
100. HTTP API over Host: silly.com! ! GET /users/123
101. HTTP API over HTTP/1.1 200 OK! Content-Type: application/json! ! {! !“id”: 123,! !“name”: “Foo User”! }
102. Web API’s These are
103. API Graph API The is a Web
104. API’s Web • REST! • HATEOAS! • OAuth! • etc…
105. Graph API The • REST! • HATEOAS! • OAuth! • etc…
106. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope
107. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope Nope
108. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope Nope ✓ Yep! (2.0)
109. Graph API The • REST! • HATEOAS! • OAuth! • etc… Nope Nope ✓ Yep! (2.0) Don’t have to know!
110. </tangent>
111. Laravel Graph API Social Graph
112. Laravel Graph API Can I haz user 123? Social Graph
113. Laravel Graph API Can I haz user 123? Can I haz user 123? Social Graph
114. Laravel Graph API Yes: Social Graph
115. Laravel Graph API Yes: {! name “Scott”,! title: “Creeper”! } Social Graph
116. Graph API tl;dr
117. https://! graph.facebook.com Lives here
118. /v2.2/foo-bar URL prefix versioned with a
119. Not RESTful so developers be like
120. OAuth 2.0 Uses a flavor of Don’t have to know!
121. Every “Thing”…
122. Users Every “Thing”…
123. comments Users Every “Thing”…
124. photos comments Users Every “Thing”…
125. photos comments Users Nodes Every “Thing”…
126. photos comments Users Nodes Every “Thing”… Yay! Nodes!
127. A photo A comment A User Nodes id:12..3 id:”45_90” id:45..90 Every “Thing”…
128. A comment A User id:12..3 id:”45_90” A little Weird ID’s are
129. Graph API request/response
130. photo id:4590
131. photo id:4590 Host: graph.facebook.com! GET /v2.2/4590
132. photo id:4590 Shouldn’t That Be /v2.2/photos/4590 ??? Host: graph.facebook.com! GET /v2.2/4590
133. photo id:4590 HTTP/1.1 200 OK! {! "id": "4590", ! "name": "Plane!", ! . . .! } Host: graph.facebook.com! GET /v2.2/4590
134. Nodes a list of
135. comments Nodes a list of a list of
136. comments Nodes a list of Likes a list of a list of
137. photos comments Nodes a list of Likes a list of a list of a list of
138. photos comments Nodes a list of Likes Edges
139. /v2.2/node/edge come after Edges Nodes
140. photo id:4590
141. photo id:4590 comments
142. photo id:4590 GET /v2.2/4590/comments comments
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
144. Nodes have and fields edges
145. Graph API endpoint reference developers.facebook.com/! docs/graph-api/reference
146. User Node fields edges - id! - first_name! - last_name! - name! - email * /albums! /feed! /photos! /friends! /picture *
147. a note on permissions
148. Request GET /v2.2/123/turtles Graph API the
149. GET /v2.2/123/turtles be like Graph API
150. GET /v2.2/123/turtles be like Developers
151. B.T.Dubs… GET /v2.2/123/turtles
152. B.T.Dubs… GET /v2.2/123/turtles not a valid Edge
153. But! GET /v2.2/123/photos legit Edge
154. GET /v2.2/123/photos HTTP/1.1 200 OK! ! {"data": []} empty Response
155. GET /v2.2/123/photos user_photos Permission you’ll need the
156. GET /v2.2/123/photos login ask for permissions at (more on this later)
157. GET /v2.2/123/photos HTTP/1.1 200 OK! ! {"data": []} empty Response
158. for learning Graph
159. Necklace Graph super-neat
161. Pwedy! so
162. How do we access the Graph API
163. With a Facebook App
164. but first…
165. Become a Developer
166. developers.facebook.com
167. developers.facebook.com
168. developers.facebook.com
169. developers.facebook.com
170. Three important points
171. 1. Read the Platform Policy Three important points
172. 1. Read the Platform Policy 2. Read the Platform Policy Three important points
173. 1. Read the Platform Policy 2. Read the Platform Policy 3. Read the Platform Policy Three important points
175. Yay! Now you’re a Developer
176. Creating a Facebook App
181. App Dashboard
182. Yay! You created a Facebook app
183. App Dashboard
184. App Settings
185. Anatomy of a Facebook App
187. Core
188. Core (not an official term)
189. Platforms Platforms
190. Core Facebook App
192. ID
193. Name ID
194. Secret Name ID
195. Secret Name ID
196. App Name Created by you
197. App Name My Awesome App Example:
198. App Id Numeric identifier
199. App Id Created by Facebook
200. App Id Doesn’t have to be secret
201. App Id 111417252289428 Example:
202. App Secret Created by Facebook
203. App Secret Used to validate data from Facebook
204. Secret!! App Secret Don’t show it to anyone who doesn’t need it
205. App Secret
206. Platforms Facebook App
208. Website
209. Website Canvas
210. Website Canvas Mobile
211. Website Canvas Page Tab Mobile
212. Website Canvas Page Tab Mobile ConSole
213. App Settings
214. App Settings
215. App Settings
216. Compare with new app
217. Website To configure Facebook Login Log in with Facebook
218. Website To configure Facebook Login Log in with Facebook
219. CANVAS To configure canvas apps
220. like…
222. CANVAS Canvas is just <iframe src=“”></iframe>
223. Page Tab To configure Page tabs
225. Page Tab Page tab is just <iframe src=“”></iframe>
226. Mobile For native mobile apps
227. for creating a Facebook app
228. Hat Facebook Developer super-neat
230. Rockin’!
231. P.S.
232. Remember what’s under there?
233. Ah?
234. Ah?
235. Ah?
236. Secret!!
237. Cereally guys… Secret!!
238. One last thing before we code…
239. Understanding Facebook Login
240. Login Flow • User clicks on link • Facebook asks to approve • Access token is obtained *
241. All about Access Tokens
242. Access Tokens look like CAACEdEose0cBAJHwVI2DydR M65PZAld1a8r2efvhZBEruyv TTr87xjR85sIrFYeZBzsh5WZ CpO5wrVxZAO6JDmf3a5mL…
243. Access Tokens are sent with API requests GET /v2.2/123?! !!! !access_token=CAACE…
244. Access Tokens Represent
245. Access Tokens Represent A User
246. Access Tokens Represent A User A Page
247. Access Tokens Represent A User An App A Page
248. Access Tokens Represent A User An App A Page Graph API
249. Access Tokens Represent A User An App A Page
250. App Access Tokens are concatenated from
251. App Access Tokens are concatenated from
252. App Access Tokens are concatenated from + |
253. App Access Tokens are concatenated from + | +
254. + | + Example: 123 appsecret
255. + | + 123|appsecret Example: 123 appsecret
256. + | + 123|appsecret Example: 123 appsecret But Wait!
257. + | + 123|appsecret Example: 123 appsecret
258. Access Tokens have two lifetimes
259. Short-Lived Access Tokens have two lifetimes (default)
260. Short-Lived Long-Lived Access Tokens have two lifetimes (default)
261. Short-Lived Long-Lived Access Tokens have two lifetimes (default) 2 hours
262. Short-Lived Long-Lived Access Tokens have two lifetimes (default) 60 Days 2 hours
263. Access Tokens request cycle Graph API Laravel
264. Laravel Access Tokens request cycle Graph API Can I haz Access Token?
265. Laravel Access Tokens request cycle Graph API Short-Lived
266. Laravel Access Tokens request cycle Graph API ThX, but… Can I HAz Longer? Short-Lived
267. Laravel Access Tokens request cycle Graph API Long-Lived
268. You haz Access token! …now send requests to the Graph API
269. Sound Complicated?
270. Sound Complicated? There’s An SDK For That
271. Facebook App Graph API So far… Facebook Dev Facebook Login
272. Facebook App Graph API So far… Facebook Dev Facebook Login ✓
273. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓
274. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓
275. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓ ✓
276. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓ ✓ Now What?
277. Facebook App Graph API So far… Facebook Dev Facebook Login ✓ ✓ ✓ ✓ Code Time!
278. Software development kits (SDK’s)
279. Two official SDK’s we care about
280. Two official SDK’s we care about php
281. Two official SDK’s we care about php Javascript
282. Two official SDK’s we care about php Javascript
283. v4.1 php SDK
284. php SDK v4.1 Heads up
285. Install "require": {! "facebook/php-sdk-v4":! "~4.1.0@dev"! } composer.json
286. Install "require": {! "facebook/php-sdk-v4":! "~4.1.0@dev"! } composer.json
287. Config $fb = new Facebook\Facebook([! /* */! ]);
288. Config $fb = new Facebook\Facebook([! 'app_id' => 'app-id',! 'app_secret' => 'secret',! ]);
289. Config $fb = new Facebook\Facebook([! 'app_id' => 'app-id',! 'app_secret' => 'secret',! ]); SECRET! better: use env vars
290. Config $fb = new Facebook\Facebook(); if you have env vars FACEBOOK_APP_ID FACEBOOK_APP_SECRET and
291. Tying Into Laravel Custom persistent store URL detection Using a Facade Problem:
292. Do it all manually or… Tying Into Laravel
293. LaravelFacebookSdk github.com/SammyK/ LaravelFacebookSdk
294. Laravel wrapper for the SDK LaravelFacebookSdk
295. uses native Laravel… LaravelFacebookSdk
296. Sessions uses native Laravel… LaravelFacebookSdk
297. Sessions uses native Laravel… LaravelFacebookSdk database, apc, memcached, redis, etc.
298. Sessions URL Handling uses native Laravel… LaravelFacebookSdk
299. Sessions URL Handling Facades uses native Laravel… LaravelFacebookSdk
300. Sessions URL Handling Facades uses native Laravel… LaravelFacebookSdk (if you’re into that sort of thing)
301. LaravelFacebookSdk Installation "require": {! "sammyk/laravel-facebook-sdk":! "~2.0@dev"! } composer.json
302. LaravelFacebookSdk "require": {! "sammyk/laravel-facebook-sdk":! "~2.0@dev"! } Installation composer.json
303. LaravelFacebookSdk service provider 'providers' => [! 'SammyK\LaravelFacebookSdk \LaravelFacebookSdkServiceProvider',! ]; app/config/app.php
304. LaravelFacebookSdk facade 'aliases' => [! 'Facebook' => 'SammyK \LaravelFacebookSdk\FacebookFacade',! ]; app/config/app.php
305. LaravelFacebookSdk generate config file $ php artisan config:publish \! sammyk/laravel-facebook-sdk
306. LaravelFacebookSdk generate config file $ php artisan config:publish \! sammyk/laravel-facebook-sdk app/config/packages/sammyk/ laravel-facebook-sdk/config.php
307. LaravelFacebookSdk grab instance $fb = App::make('laravel-facebook-sdk');
308. LaravelFacebookSdk grab instance $fb = App::make('laravel-facebook-sdk'); extends Facebook\Facebook() SammyK\LaravelFacebookSdk\ LaravelFacebookSdk
309. LaravelFacebookSdk grab instance $fb = App::make('laravel-facebook-sdk'); @TODO: Make this better! getter method, Facebook::getFbInstance();! support constructor dependency injection, etc.
310. Facebook Login with LaravelFacebookSdk
311. LaravelFacebookSdk login from redirect $login_link = $fb->getLoginUrl();! ! echo '<a href="' . $login_link . '">'.! 'Log in!</a>'; Route: /
312. LaravelFacebookSdk login from redirect $login_link = $fb->getLoginUrl([! 'email',! 'user_status',! ]); Route: /
313. LaravelFacebookSdk callback URL Route: /facebook/login $token =! $fb->getAccessTokenFromRedirect();
314. LaravelFacebookSdk callback URL $token =! $fb->getAccessTokenFromRedirect(); Route: /facebook/login throws Facebook\Exceptions \FacebookSDKException
315. LaravelFacebookSdk callback URL use Facebook\Exceptions\FacebookSDKException;! try {! $token = $fb->getAccessTokenFromRedirect();! } catch (FacebookSDKException $e) {! dd(‘Error:' . $e->getMessage());! } Route: /facebook/login
316. LaravelFacebookSdk $token once you obtain user is logged in! :) (sort of…)
317. for implementing Facebook login
318. Teef Gold super-neat
320. Baller’!
321. LaravelFacebookSdk $token what do you do with
322. LaravelFacebookSdk Store it for later… session Database $token
323. User Data with LaravelFacebookSdk Getting
324. Getting User Data $res = $fb->get(‘/123’, $token); Facebook\Facebook()
325. Getting User Data $res = $fb->get(‘/123’, $token); User node id Facebook\Facebook()
326. Getting User Data $res = $fb->get(‘/123’, $token); Can set Default Facebook\Facebook()
327. Getting User Data $fb->! setDefaultAccessToken($token);! $res = $fb->get(‘/123’); Set As Default Facebook\Facebook()
328. Getting User Data $fb->! setDefaultAccessToken($token);! $res = $fb->get(‘/123’); don’t need Facebook\Facebook()
329. Getting User Data $res = $fb->get(‘/123?! fields=id,name,email’); Facebook\Facebook()
330. Getting User Data $res = $fb->get(‘/123’); Facebook\FacebookResponse() Facebook\Facebook()
331. Getting User Data $a = $res->getHttpStatusCode();! $b = $res->getHeaders();! $c = $res->getBody();! $d = $res->getDecodedBody(); Facebook\FacebookResponse()
332. Getting User Data $node = $res->getGraphObject(); Facebook\FacebookResponse() Facebook\GraphNodes\GraphObject()
333. Getting User Data $node = $res->getGraphObject(); Facebook\FacebookResponse() Facebook\GraphNodes\GraphObject() Heads up
334. Getting User Data $node = $res->getGraphNode(); Facebook\FacebookResponse() Facebook\GraphNodes\GraphNode() Heads up
335. Getting User Data Facebook\! GraphNodes\! GraphNode() extends from a collection
336. Getting User Data GraphUser! GraphPage! GraphAlbum Facebook\GraphNodes\GraphNode() sub nodes of namespace: Facebook\GraphNodes $res->getGraphUser();! $res->getGraphPage();! $res->getGraphAlbum();
337. Remember way back when…
338. User Node fields edges - id! - first_name! - last_name! - name! - email * /albums! /feed! /photos! /friends! /picture *
339. Getting User Data $id = $userNode->getId();! $name = $userNode->getName();! $partner =! $userNode->getSignificantOther(); Facebook\GraphNodes\GraphUser()
340. *Phew* time for a kitty break
341. SDK Javascript Sharing with the
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>
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
344. Javascript SDK installation FB.init({! appId : '{your-app-id}',! cookie : true,! version : 'v2.2'! });
345. Javascript SDK installation FB.init({! appId : '{your-app-id}',! cookie : true,! version : 'v2.2'! });
346. Javascript SDK share dialog FB.ui({! method: 'share',! href: ‘http://foo.com'! }, function(response){});
347. Javascript SDK share dialog FB.ui({! method: 'share',! href: 'http://foo.com'! }, function(response){});
348. Javascript SDK share dialog
349. Javascript SDK share dialog Customize?
350. Javascript SDK share dialog FB.ui({! method: 'share',! href: 'http://foo.com'! }, function(response){});
351. meta tags Open Graph
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
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
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
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
356. Learn? What did we
357. Before you cAme
358. Know You prolly didn’t
359. Know You prolly didn’t Graph API
360. Know You prolly didn’t Graph API Facebook Developer
361. Know You prolly didn’t Facebook App Graph API Facebook Developer
362. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login
363. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login Access Tokens
364. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login Access Tokens php SDK
365. Know You prolly didn’t Facebook App Graph API Facebook Developer Facebook Login Access Tokens Javascript SDK php SDK
366. Now Look at you!
367. Now Look at you! Yay! Learning!
368. Learn! So much more to • Graph API • User Permissions • App Canvas • Page Tabs • Test Users • Test Apps • And more!
369. Next Steps Create an app & play!
370. Next Steps March 25 & 26 San Francisco
371. THANKS! Sammy Kaye Powers @SammyK SammyK.me Host of @PHPRoundtable Chicago Facebook Developers West Coast Swing