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/
   

   View Slide

2. Does not
   work @
   

   View Slide

3. Goal
   overview
   To get an
   

   View Slide

4. talk comes equipped
   with
   photo: http://gamerfitnation.com/
   

   View Slide

5. for braving the cold
   

   View Slide

6. super-neat
   Sticker
   Laravel
   Chicago
   

   View Slide

7. View Slide

8. Boom!
   

   View Slide

9. That’s
   You :)
   

   View Slide

10. photo: harryritchies.com
    History
    lesson
    A slightly embellished
    

    View Slide

11. 1736
    The year is
    

    View Slide

12. People
    wore
    Funny
    Bathing suits
    

    View Slide

13. riddles
    People solved
    

    View Slide

14. like this one
    

    View Slide

15. seven
    bridges
    

    View Slide

16. seven
    bridges
    Here
    

    View Slide

17. seven
    bridges
    Here
    Here
    

    View Slide

18. seven
    bridges
    Here
    Here
    Here
    

    View Slide

19. seven
    bridges
    Here
    Here
    Here
    Here
    

    View Slide

20. seven
    bridges
    Here
    Here
    Here
    Here
    Here
    

    View Slide

21. seven
    bridges
    Here
    Here
    Here
    Here
    Here
    Here
    

    View Slide

22. seven
    bridges
    Here
    Here
    Here
    Here
    Here
    Here
    There
    

    View Slide

23. cross all the bridges
    ONCE
    and only once?
    

    View Slide

24. View Slide

25. enter
    Leonhard
    Euler
    

    View Slide

26. invents
    Graph
    theory
    

    View Slide

27. uses graph theory to
    Answer
    

    View Slide

28. No.
    

    View Slide

29. View Slide

30. 268
    Fast-forward
    years…
    

    View Slide

31. Facebook is
    Born!
    photo: bzd1 on Flickr
    

    View Slide

32. I guess I should back up a bit…
    

    View Slide

33. Graph Theory
    

    View Slide

34. What is it?
    

    View Slide

35. Describes
    rela
    tion
    ships
    

    View Slide

36. Guitars
    haveStrings
    

    View Slide

37. David
    likes pickles
    

    View Slide

38. to model relations
    Graphs
    we use
    

    View Slide

39. Graph?
    What kind of
    

    View Slide

40. This?
    

    View Slide

41. Nope
    This?
    

    View Slide

42. This?
    

    View Slide

43. Nope
    This?
    

    View Slide

44. This?
    

    View Slide

45. Nope
    This?
    

    View Slide

46. This?
    

    View Slide

47. Nope
    This?
    

    View Slide

48. Aw, kitty…
    

    View Slide

49. So what kind?
    

    View Slide

50. This
    

    View Slide

51. A simple graph
    

    View Slide

52. Dots
    

    View Slide

53. Dots Lines
    

    View Slide

54. Dots Lines
    

    View Slide

55. Nodes Lines
    

    View Slide

56. Nodes Lines
    a.k.a vertices
    

    View Slide

57. Nodes Lines
    a.k.a vertices
    

    View Slide

58. Nodes Edges
    a.k.a vertices
    

    View Slide

59. View Slide

60. A “Thing”
    

    View Slide

61. the relation
    between the things
    

    View Slide

62. In the Back-end
    uses graph theory
    

    View Slide

63. Social
    Graph
    It’s called the
    

    View Slide

64. Social
    Graph
    It’s called the
    

    View Slide

65. …as in the
    Graph Theory
    kind of graphs
    

    View Slide

66. Social Graph
    photo: uberhumor.com
    

    View Slide

67. Social
    Graph
    It’s called
    P.S.
    That’s the
    open graph
    logo
    (a little different)
    

    View Slide

68. Describing this with
    Social
    Graph
    

    View Slide

69. View Slide

70. View Slide

71. Jordan
    

    View Slide

72. Jordan
    

    View Slide

73. Tatiana
    Jordan
    

    View Slide

74. Tatiana
    Jordan
    

    View Slide

75. Tatiana
    Jordan
    Kisses
    

    View Slide

76. Tatiana
    Jordan
    Kisses
    (instances of kissing)
    

    View Slide

77. Tatiana
    Jordan
    Kisses
    

    View Slide

78. Scott
    Tatiana
    Jordan
    Kisses
    

    View Slide

79. Scott
    Tatiana
    Jordan
    Kisses
    

    View Slide

80. Scott
    Tatiana
    Jordan
    stalks
    Kisses
    

    View Slide

81. Scott
    Tatiana
    Jordan
    stalks
    Kisses
    (instances of stalking)
    

    View Slide

82. Scott
    Tatiana
    Jordan
    Kisses
    stalks
    

    View Slide

83. Scott
    Tatiana
    Jordan
    stalks
    Kisses
    stalks
    

    View Slide

84. Scott
    Tatiana
    Jordan
    stalks
    Kisses
    stalks
    

    View Slide

85. Scott
    Tatiana
    Jordan
    stalks
    Kisses
    stalks
    people stalking people
    

    View Slide

86. “Facebooky”
    example
    

    View Slide

87. View Slide

88. Social
    Graph
    (Facebook)
    

    View Slide

89. Laravel
    Nerd
    (you) (Facebook)
    Social
    Graph
    

    View Slide

90. Laravel
    Nerd
    (you) (Facebook)
    ?? link ??
    Social
    Graph
    

    View Slide

91. Laravel
    Nerd
    (you) (Facebook)
    Graph API Social
    Graph
    

    View Slide

92. Laravel
    Nerd
    (you) (Facebook)
    Graph API
    Hi!
    Social
    Graph
    

    View Slide

93. Laravel
    Nerd
    (you) (Facebook)
    Graph API Social
    Graph
    

    View Slide

94. 
    

    View Slide

95. AN API?
    What’s
    

    View Slide

96. application
    program
    interface
    

    View Slide

97. specifies
    how software
    components should
    interact
    

    View Slide

98. API
    Laravel
    $user = DB::table(‘users')!
    !!!->where('name', ‘John')!
    !!!->first();
    

    View Slide

99. Http
    protocol
    API’s over the
    

    View Slide

100. HTTP
     API over
     Host: silly.com!
     !
     GET /users/123
     

     View Slide

101. HTTP
     API over
     HTTP/1.1 200 OK!
     Content-Type: application/json!
     !
     {!
     !“id”: 123,!
     !“name”: “Foo User”!
     }
     

     View Slide

102. Web API’s
     These are
     

     View Slide

103. API
     Graph API
     The is a
     Web
     

     View Slide

104. API’s
     Web
     • REST!
     • HATEOAS!
     • OAuth!
     • etc…
     

     View Slide

105. Graph API
     The
     • REST!
     • HATEOAS!
     • OAuth!
     • etc…
     

     View Slide

106. Graph API
     The
     • REST!
     • HATEOAS!
     • OAuth!
     • etc…
     Nope
     

     View Slide

107. Graph API
     The
     • REST!
     • HATEOAS!
     • OAuth!
     • etc…
     Nope
     Nope
     

     View Slide

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

     View Slide

109. Graph API
     The
     • REST!
     • HATEOAS!
     • OAuth!
     • etc…
     Nope
     Nope
     ✓ Yep! (2.0)
     Don’t have to know!
     

     View Slide

110. 
     

     View Slide

111. Laravel Graph API Social
     Graph
     

     View Slide

112. Laravel Graph API
     Can I haz
     user 123?
     Social
     Graph
     

     View Slide

113. Laravel Graph API
     Can I haz
     user 123?
     Can I haz
     user 123?
     Social
     Graph
     

     View Slide

114. Laravel Graph API
     Yes:
     Social
     Graph
     

     View Slide

115. Laravel Graph API
     Yes:
     {!
     name “Scott”,!
     title: “Creeper”!
     }
     Social
     Graph
     

     View Slide

116. Graph API
     tl;dr
     

     View Slide

117. https://!
     graph.facebook.com
     Lives here
     

     View Slide

118. /v2.2/foo-bar
     URL prefix
     versioned with a
     

     View Slide

119. Not RESTful
     so developers be like
     

     View Slide

120. OAuth 2.0
     Uses a flavor of
     Don’t have to know!
     

     View Slide

121. Every “Thing”…
     

     View Slide

122. Users
     Every “Thing”…
     

     View Slide

123. comments
     Users
     Every “Thing”…
     

     View Slide

124. photos
     comments
     Users
     Every “Thing”…
     

     View Slide

125. photos
     comments
     Users
     Nodes
     Every “Thing”…
     

     View Slide

126. photos
     comments
     Users
     Nodes
     Every “Thing”…
     Yay!
     Nodes!
     

     View Slide

127. A photo
     A comment
     A User
     Nodes
     id:12..3 id:”45_90” id:45..90
     Every “Thing”…
     

     View Slide

128. A comment
     A User
     id:12..3
     id:”45_90”
     A little Weird
     ID’s are
     

     View Slide

129. Graph API
     request/response
     

     View Slide

130. photo
     id:4590
     

     View Slide

131. photo
     id:4590
     Host: graph.facebook.com!
     GET /v2.2/4590
     

     View Slide

132. photo
     id:4590
     Shouldn’t
     That Be
     /v2.2/photos/4590
     ???
     Host: graph.facebook.com!
     GET /v2.2/4590
     

     View Slide

133. photo
     id:4590 HTTP/1.1 200 OK!
     {!
     "id": "4590", !
     "name": "Plane!", !
     . . .!
     }
     Host: graph.facebook.com!
     GET /v2.2/4590
     

     View Slide

134. Nodes
     a list of
     

     View Slide

135. comments
     Nodes
     a list of
     a list of
     

     View Slide

136. comments
     Nodes
     a list of
     Likes
     a list of a list of
     

     View Slide

137. photos
     comments
     Nodes
     a list of
     Likes
     a list of a list of a list of
     

     View Slide

138. photos
     comments
     Nodes
     a list of
     Likes
     Edges
     

     View Slide

139. /v2.2/node/edge
     come after
     Edges
     Nodes
     

     View Slide

140. photo
     id:4590
     

     View Slide

141. photo
     id:4590
     comments
     

     View Slide

142. photo
     id:4590
     GET /v2.2/4590/comments
     comments
     

     View Slide

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
     

     View Slide

144. Nodes
     have
     and
     fields
     edges
     

     View Slide

145. Graph API
     endpoint reference
     developers.facebook.com/!
     docs/graph-api/reference
     

     View Slide

146. User Node
     fields edges
     - id!
     - first_name!
     - last_name!
     - name!
     - email *
     /albums!
     /feed!
     /photos!
     /friends!
     /picture *
     

     View Slide

147. a note on
     permissions
     

     View Slide

148. Request
     GET /v2.2/123/turtles
     Graph API
     the
     

     View Slide

149. GET /v2.2/123/turtles
     be like
     Graph API
     

     View Slide

150. GET /v2.2/123/turtles
     be like
     Developers
     

     View Slide

151. B.T.Dubs…
     GET /v2.2/123/turtles
     

     View Slide

152. B.T.Dubs…
     GET /v2.2/123/turtles
     not a valid
     Edge
     

     View Slide

153. But!
     GET /v2.2/123/photos
     legit
     Edge
     

     View Slide

154. GET /v2.2/123/photos
     HTTP/1.1 200 OK!
     !
     {"data": []}
     empty Response
     

     View Slide

155. GET /v2.2/123/photos
     user_photos
     Permission
     you’ll need the
     

     View Slide

156. GET /v2.2/123/photos
     login
     ask for permissions at
     (more on this later)
     

     View Slide

157. GET /v2.2/123/photos
     HTTP/1.1 200 OK!
     !
     {"data": []}
     empty Response
     

     View Slide

158. for learning Graph
     

     View Slide

159. Necklace
     Graph
     super-neat
     

     View Slide

160. View Slide

161. Pwedy!
     so
     

     View Slide

162. How do we access the
     Graph API
     

     View Slide

163. With a
     Facebook App
     

     View Slide

164. but first…
     

     View Slide

165. Become a
     Developer
     

     View Slide

166. developers.facebook.com
     

     View Slide

167. developers.facebook.com
     

     View Slide

168. developers.facebook.com
     

     View Slide

169. developers.facebook.com
     

     View Slide

170. Three important points
     

     View Slide

171. 1. Read the Platform Policy
     Three important points
     

     View Slide

172. 1. Read the Platform Policy
     2. Read the Platform Policy
     Three important points
     

     View Slide

173. 1. Read the Platform Policy
     2. Read the Platform Policy
     3. Read the Platform Policy
     Three important points
     

     View Slide

174. View Slide

175. Yay! Now you’re a
     Developer
     

     View Slide

176. Creating a
     Facebook App
     

     View Slide

177. View Slide

178. View Slide

179. View Slide

180. View Slide

181. App Dashboard
     

     View Slide

182. Yay!
     You created a
     Facebook app
     

     View Slide

183. App Dashboard
     

     View Slide

184. App Settings
     

     View Slide

185. Anatomy of a
     Facebook App
     

     View Slide

186. View Slide

187. Core
     

     View Slide

188. Core
     (not an official term)
     

     View Slide

189. Platforms Platforms
     

     View Slide

190. Core
     Facebook App
     

     View Slide

191. View Slide

192. ID
     

     View Slide

193. Name
     ID
     

     View Slide

194. Secret
     Name
     ID
     

     View Slide

195. Secret
     Name
     ID
     

     View Slide

196. App Name
     Created by you
     

     View Slide

197. App Name
     My Awesome App
     Example:
     

     View Slide

198. App Id
     Numeric identifier
     

     View Slide

199. App Id
     Created by Facebook
     

     View Slide

200. App Id
     Doesn’t have to be secret
     

     View Slide

201. App Id
     111417252289428
     Example:
     

     View Slide

202. App Secret
     Created by Facebook
     

     View Slide

203. App Secret
     Used to validate
     data from Facebook
     

     View Slide

204. Secret!! App Secret
     Don’t show it to anyone
     who doesn’t need it
     

     View Slide

205. App Secret
     

     View Slide

206. Platforms
     Facebook App
     

     View Slide

207. View Slide

208. Website
     

     View Slide

209. Website
     Canvas
     

     View Slide

210. Website
     Canvas
     Mobile
     

     View Slide

211. Website
     Canvas Page Tab
     Mobile
     

     View Slide

212. Website
     Canvas Page Tab
     Mobile
     ConSole
     

     View Slide

213. App Settings
     

     View Slide

214. App Settings
     

     View Slide

215. App Settings
     

     View Slide

216. Compare with
     new app
     

     View Slide

217. Website
     To configure Facebook Login
     Log in with Facebook
     

     View Slide

218. Website
     To configure Facebook Login
     Log in with Facebook
     

     View Slide

219. CANVAS
     To configure canvas apps
     

     View Slide

220. like…
     

     View Slide

221. View Slide

222. CANVAS
     Canvas is just
     
     

     View Slide

223. Page Tab
     To configure Page tabs
     

     View Slide

224. View Slide

225. Page Tab
     Page tab is just
     
     

     View Slide

226. Mobile
     For native mobile apps
     

     View Slide

227. for creating a Facebook app
     

     View Slide

228. Hat
     Facebook
     Developer
     super-neat
     

     View Slide

229. View Slide

230. Rockin’!
     

     View Slide

231. P.S.
     

     View Slide

232. Remember what’s
     under there?
     

     View Slide

233. Ah?
     

     View Slide

234. Ah?
     

     View Slide

235. Ah?
     

     View Slide

236. Secret!!
     

     View Slide

237. Cereally guys…
     Secret!!
     

     View Slide

238. One last thing before we code…
     

     View Slide

239. Understanding
     Facebook
     Login
     

     View Slide

240. Login Flow
     • User clicks on link
     • Facebook asks to approve
     • Access token is obtained *
     

     View Slide

241. All about
     Access
     Tokens
     

     View Slide

242. Access Tokens look like
     CAACEdEose0cBAJHwVI2DydR
     M65PZAld1a8r2efvhZBEruyv
     TTr87xjR85sIrFYeZBzsh5WZ
     CpO5wrVxZAO6JDmf3a5mL…
     

     View Slide

243. Access Tokens
     are sent with API requests
     GET /v2.2/123?!
     !!! !access_token=CAACE…
     

     View Slide

244. Access Tokens Represent
     

     View Slide

245. Access Tokens Represent
     A User
     

     View Slide

246. Access Tokens Represent
     A User A Page
     

     View Slide

247. Access Tokens Represent
     A User An App
     A Page
     

     View Slide

248. Access Tokens Represent
     A User An App
     A Page
     Graph API
     

     View Slide

249. Access Tokens Represent
     A User An App
     A Page
     

     View Slide

250. App Access Tokens
     are concatenated from
     

     View Slide

251. App Access Tokens
     are concatenated from
     

     View Slide

252. App Access Tokens
     are concatenated from
     + |
     

     View Slide

253. App Access Tokens
     are concatenated from
     + | +
     

     View Slide

254. + | +
     Example:
     123 appsecret
     

     View Slide

255. + | +
     123|appsecret
     Example:
     123 appsecret
     

     View Slide

256. + | +
     123|appsecret
     Example:
     123 appsecret
     But
     Wait!
     

     View Slide

257. + | +
     123|appsecret
     Example:
     123 appsecret
     

     View Slide

258. Access Tokens
     have two lifetimes
     

     View Slide

259. Short-Lived
     Access Tokens
     have two lifetimes
     (default)
     

     View Slide

260. Short-Lived
     Long-Lived
     Access Tokens
     have two lifetimes
     (default)
     

     View Slide

261. Short-Lived
     Long-Lived
     Access Tokens
     have two lifetimes
     (default)
     2 hours
     

     View Slide

262. Short-Lived
     Long-Lived
     Access Tokens
     have two lifetimes
     (default)
     60 Days
     2 hours
     

     View Slide

263. Access Tokens request cycle
     Graph
     API
     Laravel
     

     View Slide

264. Laravel
     Access Tokens request cycle
     Graph
     API
     Can I haz
     Access
     Token?
     

     View Slide

265. Laravel
     Access Tokens request cycle
     Graph
     API
     Short-Lived
     

     View Slide

266. Laravel
     Access Tokens request cycle
     Graph
     API
     ThX, but…
     Can I HAz
     Longer? Short-Lived
     

     View Slide

267. Laravel
     Access Tokens request cycle
     Graph
     API
     Long-Lived
     

     View Slide

268. You haz
     Access token!
     …now send requests
     to the Graph API
     

     View Slide

269. Sound
     Complicated?
     

     View Slide

270. Sound
     Complicated?
     There’s An SDK For That
     

     View Slide

271. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     

     View Slide

272. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     ✓
     

     View Slide

273. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     ✓ ✓
     

     View Slide

274. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     ✓ ✓
     ✓
     

     View Slide

275. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     ✓ ✓
     ✓ ✓
     

     View Slide

276. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     ✓ ✓
     ✓ ✓
     Now What?
     

     View Slide

277. Facebook App
     Graph API
     So far…
     Facebook Dev
     Facebook Login
     ✓ ✓
     ✓ ✓
     Code Time!
     

     View Slide

278. Software development kits
     (SDK’s)
     

     View Slide

279. Two official SDK’s we care about
     

     View Slide

280. Two official SDK’s we care about
     php
     

     View Slide

281. Two official SDK’s we care about
     php Javascript
     

     View Slide

282. Two official SDK’s we care about
     php Javascript
     

     View Slide

283. v4.1
     php SDK
     

     View Slide

284. php SDK
     v4.1
     Heads up
     

     View Slide

285. Install
     "require": {!
     "facebook/php-sdk-v4":!
     "~4.1.0@dev"!
     }
     composer.json
     

     View Slide

286. Install
     "require": {!
     "facebook/php-sdk-v4":!
     "~4.1.0@dev"!
     }
     composer.json
     

     View Slide

287. Config
     $fb = new Facebook\Facebook([!
     /* */!
     ]);
     

     View Slide

288. Config
     $fb = new Facebook\Facebook([!
     'app_id' => 'app-id',!
     'app_secret' => 'secret',!
     ]);
     

     View Slide

289. Config
     $fb = new Facebook\Facebook([!
     'app_id' => 'app-id',!
     'app_secret' => 'secret',!
     ]); SECRET!
     better: use env vars
     

     View Slide

290. Config
     $fb = new Facebook\Facebook();
     if you have env vars
     FACEBOOK_APP_ID
     FACEBOOK_APP_SECRET
     and
     

     View Slide

291. Tying Into Laravel
     Custom persistent store
     URL detection
     Using a Facade
     Problem:
     

     View Slide

292. Do it all manually or…
     Tying Into Laravel
     

     View Slide

293. LaravelFacebookSdk
     github.com/SammyK/
     LaravelFacebookSdk
     

     View Slide

294. Laravel wrapper
     for the SDK
     LaravelFacebookSdk
     

     View Slide

295. uses native Laravel…
     LaravelFacebookSdk
     

     View Slide

296. Sessions
     uses native Laravel…
     LaravelFacebookSdk
     

     View Slide

297. Sessions
     uses native Laravel…
     LaravelFacebookSdk
     database, apc,
     memcached,
     redis, etc.
     

     View Slide

298. Sessions
     URL Handling
     uses native Laravel…
     LaravelFacebookSdk
     

     View Slide

299. Sessions
     URL Handling
     Facades
     uses native Laravel…
     LaravelFacebookSdk
     

     View Slide

300. Sessions
     URL Handling
     Facades
     uses native Laravel…
     LaravelFacebookSdk
     (if you’re into
     that sort of thing)
     

     View Slide

301. LaravelFacebookSdk
     Installation
     "require": {!
     "sammyk/laravel-facebook-sdk":!
     "~2.0@dev"!
     }
     composer.json
     

     View Slide

302. LaravelFacebookSdk
     "require": {!
     "sammyk/laravel-facebook-sdk":!
     "~2.0@dev"!
     }
     Installation
     composer.json
     

     View Slide

303. LaravelFacebookSdk
     service provider
     'providers' => [!
     'SammyK\LaravelFacebookSdk
     \LaravelFacebookSdkServiceProvider',!
     ];
     app/config/app.php
     

     View Slide

304. LaravelFacebookSdk
     facade
     'aliases' => [!
     'Facebook' => 'SammyK
     \LaravelFacebookSdk\FacebookFacade',!
     ];
     app/config/app.php
     

     View Slide

305. LaravelFacebookSdk
     generate config file
     $ php artisan config:publish \!
     sammyk/laravel-facebook-sdk
     

     View Slide

306. LaravelFacebookSdk
     generate config file
     $ php artisan config:publish \!
     sammyk/laravel-facebook-sdk
     app/config/packages/sammyk/
     laravel-facebook-sdk/config.php
     

     View Slide

307. LaravelFacebookSdk
     grab instance
     $fb = App::make('laravel-facebook-sdk');
     

     View Slide

308. LaravelFacebookSdk
     grab instance
     $fb = App::make('laravel-facebook-sdk');
     extends Facebook\Facebook()
     SammyK\LaravelFacebookSdk\
     LaravelFacebookSdk
     

     View Slide

309. LaravelFacebookSdk
     grab instance
     $fb = App::make('laravel-facebook-sdk');
     @TODO: Make this better!
     getter method, Facebook::getFbInstance();!
     support constructor dependency injection, etc.
     

     View Slide

310. Facebook
     Login
     with
     LaravelFacebookSdk
     

     View Slide

311. LaravelFacebookSdk
     login from redirect
     $login_link = $fb->getLoginUrl();!
     !
     echo ''.!
     'Log in!';
     Route: /
     

     View Slide

312. LaravelFacebookSdk
     login from redirect
     $login_link = $fb->getLoginUrl([!
     'email',!
     'user_status',!
     ]);
     Route: /
     

     View Slide

313. LaravelFacebookSdk
     callback URL
     Route: /facebook/login
     $token =!
     $fb->getAccessTokenFromRedirect();
     

     View Slide

314. LaravelFacebookSdk
     callback URL
     $token =!
     $fb->getAccessTokenFromRedirect();
     Route: /facebook/login
     throws
     Facebook\Exceptions
     \FacebookSDKException
     

     View Slide

315. LaravelFacebookSdk
     callback URL
     use Facebook\Exceptions\FacebookSDKException;!
     try {!
     $token = $fb->getAccessTokenFromRedirect();!
     } catch (FacebookSDKException $e) {!
     dd(‘Error:' . $e->getMessage());!
     }
     Route: /facebook/login
     

     View Slide

316. LaravelFacebookSdk
     $token
     once you obtain
     user is logged in! :)
     (sort of…)
     

     View Slide

317. for implementing Facebook login
     

     View Slide

318. Teef
     Gold
     super-neat
     

     View Slide

319. View Slide

320. Baller’!
     

     View Slide

321. LaravelFacebookSdk
     $token
     what do you do with
     

     View Slide

322. LaravelFacebookSdk
     Store it for later…
     session
     Database
     $token
     

     View Slide

323. User Data
     with LaravelFacebookSdk
     Getting
     

     View Slide

324. Getting User Data
     $res = $fb->get(‘/123’, $token);
     Facebook\Facebook()
     

     View Slide

325. Getting User Data
     $res = $fb->get(‘/123’, $token);
     User node id
     Facebook\Facebook()
     

     View Slide

326. Getting User Data
     $res = $fb->get(‘/123’, $token);
     Can set Default
     Facebook\Facebook()
     

     View Slide

327. Getting User Data
     $fb->!
     setDefaultAccessToken($token);!
     $res = $fb->get(‘/123’);
     Set As Default
     Facebook\Facebook()
     

     View Slide

328. Getting User Data
     $fb->!
     setDefaultAccessToken($token);!
     $res = $fb->get(‘/123’);
     don’t need
     Facebook\Facebook()
     

     View Slide

329. Getting User Data
     $res = $fb->get(‘/123?!
     fields=id,name,email’);
     Facebook\Facebook()
     

     View Slide

330. Getting User Data
     $res = $fb->get(‘/123’);
     Facebook\FacebookResponse()
     Facebook\Facebook()
     

     View Slide

331. Getting User Data
     $a = $res->getHttpStatusCode();!
     $b = $res->getHeaders();!
     $c = $res->getBody();!
     $d = $res->getDecodedBody();
     Facebook\FacebookResponse()
     

     View Slide

332. Getting User Data
     $node = $res->getGraphObject();
     Facebook\FacebookResponse()
     Facebook\GraphNodes\GraphObject()
     

     View Slide

333. Getting User Data
     $node = $res->getGraphObject();
     Facebook\FacebookResponse()
     Facebook\GraphNodes\GraphObject()
     Heads up
     

     View Slide

334. Getting User Data
     $node = $res->getGraphNode();
     Facebook\FacebookResponse()
     Facebook\GraphNodes\GraphNode()
     Heads up
     

     View Slide

335. Getting User Data
     Facebook\!
     GraphNodes\!
     GraphNode()
     extends from a
     collection
     

     View Slide

336. Getting User Data
     GraphUser!
     GraphPage!
     GraphAlbum
     Facebook\GraphNodes\GraphNode()
     sub nodes of
     namespace: Facebook\GraphNodes
     $res->getGraphUser();!
     $res->getGraphPage();!
     $res->getGraphAlbum();
     

     View Slide

337. Remember way
     back when…
     

     View Slide

338. User Node
     fields edges
     - id!
     - first_name!
     - last_name!
     - name!
     - email *
     /albums!
     /feed!
     /photos!
     /friends!
     /picture *
     

     View Slide

339. Getting User Data
     $id = $userNode->getId();!
     $name = $userNode->getName();!
     $partner =!
     $userNode->getSignificantOther();
     Facebook\GraphNodes\GraphUser()
     

     View Slide

340. *Phew*
     time for a
     kitty break
     

     View Slide

341. SDK
     Javascript
     Sharing with the
     

     View Slide

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

     View Slide

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

     View Slide

344. Javascript SDK
     installation
     FB.init({!
     appId : '{your-app-id}',!
     cookie : true,!
     version : 'v2.2'!
     });
     

     View Slide

345. Javascript SDK
     installation
     FB.init({!
     appId : '{your-app-id}',!
     cookie : true,!
     version : 'v2.2'!
     });
     

     View Slide

346. Javascript SDK share dialog
     FB.ui({!
     method: 'share',!
     href: ‘http://foo.com'!
     }, function(response){});
     

     View Slide

347. Javascript SDK share dialog
     FB.ui({!
     method: 'share',!
     href: 'http://foo.com'!
     }, function(response){});
     

     View Slide

348. Javascript SDK share dialog
     

     View Slide

349. Javascript SDK share dialog
     Customize?
     

     View Slide

350. Javascript SDK share dialog
     FB.ui({!
     method: 'share',!
     href: 'http://foo.com'!
     }, function(response){});
     

     View Slide

351. meta tags
     Open Graph
     

     View Slide

352. meta tags
     content="http://foo" /> !
     content=“Foo Site" />!
     content=“Foo description of bar" /> !
     content=“http://foo.c/bar.jpg” />
     Open Graph
     

     View Slide

353. meta tags
     content="http://foo" /> !
     content=“Foo Site" />!
     content=“Foo description of bar" /> !
     content=“http://foo.c/bar.jpg” />
     Open Graph
     

     View Slide

354. meta tags
     content="http://foo" /> !
     content=“Foo Site" />!
     content=“Foo description of bar" /> !
     content=“http://foo.c/bar.jpg” />
     Open Graph
     

     View Slide

355. meta tags
     content="http://foo" /> !
     content=“Foo Site" />!
     content=“Foo description of bar" /> !
     content=“http://foo.c/bar.jpg” />
     Open Graph
     

     View Slide

356. Learn?
     What did we
     

     View Slide

357. Before
     you cAme
     

     View Slide

358. Know
     You prolly didn’t
     

     View Slide

359. Know
     You prolly didn’t
     Graph API
     

     View Slide

360. Know
     You prolly didn’t
     Graph API
     Facebook
     Developer
     

     View Slide

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

     View Slide

362. Know
     You prolly didn’t
     Facebook App
     Graph API
     Facebook
     Developer
     Facebook
     Login
     

     View Slide

363. Know
     You prolly didn’t
     Facebook App
     Graph API
     Facebook
     Developer
     Facebook
     Login
     Access
     Tokens
     

     View Slide

364. Know
     You prolly didn’t
     Facebook App
     Graph API
     Facebook
     Developer
     Facebook
     Login
     Access
     Tokens
     php SDK
     

     View Slide

365. Know
     You prolly didn’t
     Facebook App
     Graph API
     Facebook
     Developer
     Facebook
     Login
     Access
     Tokens
     Javascript
     SDK
     php SDK
     

     View Slide

366. Now Look
     at you!
     

     View Slide

367. Now Look
     at you!
     Yay!
     Learning!
     

     View Slide

368. Learn!
     So much more to
     • Graph API
     • User Permissions
     • App Canvas
     • Page Tabs
     • Test Users
     • Test Apps
     • And more!
     

     View Slide

369. Next Steps
     Create an app & play!
     

     View Slide

370. Next Steps
     March 25 & 26
     San Francisco
     

     View Slide

371. THANKS!
     Sammy Kaye Powers
     @SammyK
     SammyK.me
     Host of @PHPRoundtable
     Chicago Facebook Developers
     West Coast Swing
     

     View Slide