Og presentation


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Want to talk about opengraphTrying to keep it generalised so that everybody can understand all aspects without getting too techyPeople can go away and look into it more knowing the basicsWill be covering 3 key areas
  • 3 Key areas of opengraphWhat is opengraph and how do we use it. Going to explain basic concepts of opengraph and how they can increase reach to Facebook users and how the different content streams in Facebook are all brought together by opengraphImplementation for project managers – What is the user flow for opengraph, rough technical outline so that we can see what’s possible, types of interaction, permissions, setting your verbs, aggregations
  • Open Graph consists of 4 key areasTimeline, ticker, news feeds (talk about quickly now) and new verbs
  • User interactions are shown in 3 social channelsTicker always (noise), timeline always, newsfeed – FB algorithm depending on content
  • What clients want
  • How does activity get pushed to these channels – take UI and send 1 request to OG
  • INTERACTIONHowever, to publish these interactions permissions need to be accepted
  • Publish_actionsBrings up this authentication dialogMove on to authenticated referrals
  • Interesting that this is set up through FB – users are ready to goMoving on to how to set up our actions/objects
  • UG or predetermined actionsPredetermined automatically set up aggregationsMove on to explanation of what everything means in the panel
  • Cover article shortlyStart time and end time are for samples – you can set something to expire its tense in a set time
  • 3 different types of attachments for each action tells facebook what sort of data to expect
  • Aggregations- these are how data is displayed for each action/object on the users timeline
  • Move on to layout styles
  • Key things to noteIf everything is set up correctly, you can preview a sample aggregation based on real dataMove on to summary/what we know so far
  • What we have covered
  • OpenGraph MechanicsMove on to publishing to OpenGraph
  • Things to note before getting started
  • Server and client side example
  • Success
  • That’s it – just one more thing!
  • Sample response
  • Sample response
  • Submission and criteria
  • Og presentation

    1. 1. The Open Graph
    2. 2. The Open Graph• What is Open Graph and how do we use it?• Implementation for project managers.• Implementation for developers.
    3. 3. What is the Open Graph?• Timeline• Ticker• Newsfeeds
    4. 4. What is the Open Graph? User Interaction
    5. 5. What is the Open Graph? VerbsDarren Jones cooked a Chocolate Cake
    6. 6. What is the Open Graph?Darren Jones a Action Object
    7. 7. What is the Open Graph? Action ObjectIs cooking Represented by URL e.g. example.com/chocolate-cake/Has cooked fb:recipe = URLAre cooking og:title = Chocolate Cake
    8. 8. Implementation for Project Managers
    9. 9. Implementation for Project Managers
    10. 10. Implementation for Project Managers Open Graph API User Interaction
    11. 11. Implementation for Project Managers• Frictionless Darren is listening to Circle of Life on Spotify• User initiated Darren just entered a competition at Boots No7
    12. 12. Implementation for Project Managers Additional permissions publish_actions
    13. 13. Implementation for Project Managers The referral dialog publish_actions
    14. 14. Implementation for Project ManagersSetting up actions and objects in the Facebook Developer Panel
    15. 15. Implementation for Project Managers
    16. 16. Implementation for Project Managers
    17. 17. Implementation for Project Managers
    18. 18. Implementation for Project Managers
    19. 19. Implementation for Project Managers
    20. 20. Implementation for Project Managers
    21. 21. Implementation for Project Managers
    22. 22. Implementation for Project Managers
    23. 23. Implementation for Project Managers
    24. 24. Implementation for Project Managers
    25. 25. Implementation for Project Managers
    26. 26. Implementation for Project Managers
    27. 27. Implementation for Project Managers
    28. 28. Implementation for Project Managers
    29. 29. Implementation for Project ManagersKey things to note:Aggregations must be set up for actions and objectsAggregations will not work unless correct og tags are in place
    30. 30. Implementation for Project Managers What have we covered so far?Opengraph channels (Timeline/Newsfeed/Ticker)Actions and objects and how to set them upTypes of action (frictionless/user initiated)Permissions (publish_actions) & Authenticated ReferralsAggregations
    31. 31. Implementation for Developers It’s really quick, without getting too technical. Promise!
    32. 32. Implementation for Developers OpenGraph mechanics
    33. 33. Implementation for Developers Publishing to the OpenGraphOG tags must be in place namespace:actionFacebook must be able to access the site – this means port forwarding!Probably a good idea to re-lint every now and again as things changeYour own actions will show in ticker only when app is sandboxedThere is a limit to actions shown (roughly 1 minute)Only developers can publish actions and see/accept publish_actions dialog
    34. 34. Implementation for Developers Publishing to the OpenGraphcurl -F access_token= -F article= https://graph.facebook.com/
    35. 35. Implementation for Developers Publishing to the OpenGraph {"id" : 2579038217}
    36. 36. Implementation for Developers Reading from the OpenGraph GEThttps://graph.facebook.com/me/names pace:action
    37. 37. Implementation for Developers Reading from the OpenGraph
    38. 38. Implementation for Developers That’s actually all you need to do!
    39. 39. Implementation for Developers Once all of this is in place, we need to submit our verbs to Facebook. They will not approve any dev apps or incomplete applications. So submission is the last thing to do.https://developers.facebook.com/docs/opengraph/checklist/
    40. 40. Happy testing!