Successfully reported this slideshow.
The Open Graph                                    Distribution and engagement for every platform                     Bear ...
Like                                 Like                                                           RUN                   ...
Thursday, October 18, 12
Thursday, October 18, 12
Native Apps                      Native Apps                                                            Mobile Web        ...
▪   Play a Sound                           ▪   Like a Sound                           ▪   Post a Sound                    ...
Permissions DialogThursday, October 18, 12
Sharing in the appThursday, October 18, 12
Desktop Web: Newsfeed and Ticker                                     http://a.url.can/go?hereThursday, October 18, 12
Desktop Web: TimelineThursday, October 18, 12
iOS Native: Newsfeed & TimelineThursday, October 18, 12
iOS Native: Newsfeed & TimelineThursday, October 18, 12
Android Native & Mobile Web:                               Newsfeed & TimelineThursday, October 18, 12
4 Steps to using Open GraphThursday, October 18, 12
1. Model your data                                              ACTION                     OBJECT                         ...
https://developers.facebook.com/apps/.../opengraphThursday, October 18, 12
2. Markup and expose your objectsThursday, October 18, 12
<head prefix="og: http://ogp.me/ns#                      foodapp: http://ogp.me/ns/apps/foodapp#">          <title>Lasagne...
3. Publish Actions                           POST https://graph.facebook.com/me/foodapp:cook                           acc...
user performs    action in app                           client   or server posts action to Facebook                      ...
4. Define your Aggregations                                       TextThursday, October 18, 12
Walkthrough                           ▪   Creating Your First App                           ▪   Creating Objects and Actio...
Top TipsThursday, October 18, 12
Read actions for better personalization                           GET https://graph.facebook.com/me/foodapp:cook?         ...
Read actions for better personalisation                           user_actions.music           friends_actions.music      ...
Thursday, October 18, 12
Field Expansion                            GET https://graph.facebook.com/me?                              fields=albums.l...
Take advantage of Built-In Objects and ActionsThursday, October 18, 12
Built-In Like with Custom Verb                                       TextThursday, October 18, 12
User Intent                           POST https://graph.facebook.com/me/foodapp:cook                                acces...
Let users add their own photosThursday, October 18, 12
Let users add their own photos      POST https://graph.facebook.com/me/cookbook:cook?        recipe=http://www.yourdomain....
Add places to Open Graph stories                           POST https://graph.facebook.com/me/recipebox:cook?             ...
Tag friends                           POST https://graph.facebook.com/me/cookbook:cook?                                rec...
Thursday, October 18, 12
Localize              https://developers.facebook.com/docs/opengraph/internationalization/Thursday, October 18, 12
Text   <meta property="og:locale"                                                              GET          content="en_US...
Update your objects programmatically                             POST https://graph.facebook.com                          ...
Avoid Policy Pitfalls                           Did the user know?                           Apps should not post for pass...
Native Apps                      Native Apps                                                            Mobile Web        ...
Upcoming SlideShare
Loading in …5
×

Bear Douglas - Open Graph Montreal

1,512 views

Published on

  • Be the first to comment

Bear Douglas - Open Graph Montreal

  1. 1. The Open Graph Distribution and engagement for every platform Bear DouglasThursday, October 18, 12
  2. 2. Like Like RUN EAT Like READ Like LISTENThursday, October 18, 12
  3. 3. Thursday, October 18, 12
  4. 4. Thursday, October 18, 12
  5. 5. Native Apps Native Apps Mobile Web Mobile Web Open Graph Desktop Web Desktop Web Desktop Web App Desktop Web AppThursday, October 18, 12
  6. 6. ▪ Play a Sound ▪ Like a Sound ▪ Post a Sound ▪ Follow a User ▪ Join a GroupThursday, October 18, 12
  7. 7. Permissions DialogThursday, October 18, 12
  8. 8. Sharing in the appThursday, October 18, 12
  9. 9. Desktop Web: Newsfeed and Ticker http://a.url.can/go?hereThursday, October 18, 12
  10. 10. Desktop Web: TimelineThursday, October 18, 12
  11. 11. iOS Native: Newsfeed & TimelineThursday, October 18, 12
  12. 12. iOS Native: Newsfeed & TimelineThursday, October 18, 12
  13. 13. Android Native & Mobile Web: Newsfeed & TimelineThursday, October 18, 12
  14. 14. 4 Steps to using Open GraphThursday, October 18, 12
  15. 15. 1. Model your data ACTION OBJECT https://developers.facebook.com/apps/.../opengraphThursday, October 18, 12
  16. 16. https://developers.facebook.com/apps/.../opengraphThursday, October 18, 12
  17. 17. 2. Markup and expose your objectsThursday, October 18, 12
  18. 18. <head prefix="og: http://ogp.me/ns# foodapp: http://ogp.me/ns/apps/foodapp#"> <title>Lasagne</title> <meta property="og:type" content="foodapp:dish"/> <meta property="og:title" content="Lasagne"/> <meta property="og:description" content="yummy"/> <meta property="og:url" content="http://mysite.com/lasagne"/> <meta property="og:image" content="http://mysite.com/lasagne.jpg"/> <meta property="foodapp:ingredient" content="http://mysite.com/beef"/> <meta property="foodapp:ingredient" content="http://mysite.com/pasta"/> </head> http://mysite.com/lasagneThursday, October 18, 12
  19. 19. 3. Publish Actions POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagneThursday, October 18, 12
  20. 20. user performs action in app client or server posts action to Facebook POST https://graph.facebook.com/me/ foodapp:cook access_token=234876AB6865...& recipe=http://mysite.com/lasagne Facebook gets the objects metadata GET http://mysite.com/lasagneThursday, October 18, 12
  21. 21. 4. Define your Aggregations TextThursday, October 18, 12
  22. 22. Walkthrough ▪ Creating Your First App ▪ Creating Objects and Actions ▪ Permissions and Authentication ▪ Development Tools and TipsThursday, October 18, 12
  23. 23. Top TipsThursday, October 18, 12
  24. 24. Read actions for better personalization GET https://graph.facebook.com/me/foodapp:cook? access_token=234876AB6865...Thursday, October 18, 12
  25. 25. Read actions for better personalisation user_actions.music friends_actions.music user_actions.video friends_actions.video user_actions.news friends_actions.news user_actions:APP_NAMESPACE friends_actions:APP_NAMESPACE https://graph.facebook.com/UID/music.listens?access_token= https://graph.facebook.com/UID/news.reads?access_token= https://graph.facebook.com/UID/video.watches?access_token= https://graph.facebook.com/UID/APP_NAMESPACE:ACTION_NAME?..Thursday, October 18, 12
  26. 26. Thursday, October 18, 12
  27. 27. Field Expansion GET https://graph.facebook.com/me? fields=albums.limit(5) .fields(name,photos.limit(2) .fields(name, picture, tags.limit(2))) https://developers.facebook.com/docs/reference/api/field_expansion/Thursday, October 18, 12
  28. 28. Take advantage of Built-In Objects and ActionsThursday, October 18, 12
  29. 29. Built-In Like with Custom Verb TextThursday, October 18, 12
  30. 30. User Intent POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagne & fb:explicitly_shared=trueThursday, October 18, 12
  31. 31. Let users add their own photosThursday, October 18, 12
  32. 32. Let users add their own photos POST https://graph.facebook.com/me/cookbook:cook? recipe=http://www.yourdomain.com/pizza.html& image[0][url]=http://www.yourdomain.com/images/pizza_by_bear.jpg& image[0][user_generated]=true& image[1][url]=http://www.yourdomain.com/images/soda_by_bear.jpg& image[1][user_generated]=true& access_token=YOUR_ACCESS_TOKEN https://developers.facebook.com/docs/opengraph/usergeneratedphotos/Thursday, October 18, 12
  33. 33. Add places to Open Graph stories POST https://graph.facebook.com/me/recipebox:cook? recipe=http://www.example.com/pizza.html& Text place=108424279189115& access_token=YOUR_ACCESS_TOKEN https://developers.facebook.com/docs/opengraph/location_tagging/Thursday, October 18, 12
  34. 34. Tag friends POST https://graph.facebook.com/me/cookbook:cook? recipe=http://www.example.com/pizza.html& tags=499804870& access_token=YOUR_ACCESS_TOKEN https://developers.facebook.com/docs/opengraph/actionsThursday, October 18, 12
  35. 35. Thursday, October 18, 12
  36. 36. Localize https://developers.facebook.com/docs/opengraph/internationalization/Thursday, October 18, 12
  37. 37. Text <meta property="og:locale" GET content="en_US"/> http://mysite.com/mango <meta property="og:locale:alternate" content="id_ID"/> <meta property="og:title" content="Mango"/> <meta property="og:locale" content="id_ID"/> GET <meta property="og:locale:alternate" http://mysite.com/mango? content="en_US"/> fb_locale=id_ID <meta property="og:title" content="Mangga"/>Thursday, October 18, 12
  38. 38. Update your objects programmatically POST https://graph.facebook.com access_token=234876AB6865... & id=http://mysite.com/lasagne & scrape=trueThursday, October 18, 12
  39. 39. Avoid Policy Pitfalls Did the user know? Apps should not post for passive content consumption Action tagging can only be used if users are interacting in the app Don’t pre-fill messages that post to the user’s timeline Branding Text Should match your app’s, not Facebook’s Ace Your OG Review Give detailed usage instructions to reproduce the action from the user’s POV Make sure your actions and stories appear in grammatical English Explain when the user should expect to see a story published https://developers.facebook.com/policy/Thursday, October 18, 12
  40. 40. Native Apps Native Apps Mobile Web Mobile Web Open Graph Desktop Web Desktop Web Desktop Web App Desktop Web AppThursday, October 18, 12

×