SlideShare une entreprise Scribd logo
1  sur  40
The Open Graph
                                    Distribution and engagement for every platform




                     Bear Douglas

Thursday, October 18, 12
Like

                                 Like




                                                           RUN


                           EAT


                                        Like
                                                            READ




                                                 Like




                                        LISTEN
Thursday, October 18, 12
Thursday, October 18, 12
Thursday, October 18, 12
Native Apps                      Native Apps



                                                            Mobile Web

                           Mobile Web

                                             Open Graph

                               Desktop Web                Desktop Web

            Desktop Web App                                               Desktop Web App



Thursday, October 18, 12
▪   Play a Sound
                           ▪   Like a Sound
                           ▪   Post a Sound
                           ▪   Follow a User
                           ▪   Join a Group



Thursday, October 18, 12
Permissions Dialog




Thursday, October 18, 12
Sharing in the app




Thursday, October 18, 12
Desktop Web: Newsfeed and Ticker




                                     http://a.url.can/go?here
Thursday, October 18, 12
Desktop Web: Timeline




Thursday, October 18, 12
iOS Native: Newsfeed & Timeline




Thursday, October 18, 12
iOS Native: Newsfeed & Timeline




Thursday, October 18, 12
Android Native & Mobile Web:
                               Newsfeed & Timeline




Thursday, October 18, 12
4 Steps to using Open Graph




Thursday, October 18, 12
1. Model your data



                                              ACTION                     OBJECT




                           https://developers.facebook.com/apps/.../opengraph
Thursday, October 18, 12
https://developers.facebook.com/apps/.../opengraph
Thursday, October 18, 12
2. Markup and expose your objects




Thursday, October 18, 12
<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/lasagne
Thursday, October 18, 12
3. Publish Actions


                           POST https://graph.facebook.com/me/foodapp:cook

                           access_token=234876AB6865...
                           &
                           recipe=http://mysite.com/lasagne




Thursday, October 18, 12
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 object's metadata

                                             GET http://mysite.com/lasagne
Thursday, October 18, 12
4. Define your Aggregations




                                       Text




Thursday, October 18, 12
Walkthrough


                           ▪   Creating Your First App
                           ▪   Creating Objects and Actions
                           ▪   Permissions and Authentication
                           ▪   Development Tools and Tips




Thursday, October 18, 12
Top Tips




Thursday, October 18, 12
Read actions for better personalization



                           GET https://graph.facebook.com/me/foodapp:cook?
                               access_token=234876AB6865...




Thursday, October 18, 12
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
Thursday, October 18, 12
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
Take advantage of Built-In Objects and Actions




Thursday, October 18, 12
Built-In Like with Custom Verb
                                       Text




Thursday, October 18, 12
User Intent


                           POST https://graph.facebook.com/me/foodapp:cook
                                access_token=234876AB6865...
                                &
                                recipe=http://mysite.com/lasagne
                                &
                                fb:explicitly_shared=true




Thursday, October 18, 12
Let users add their own photos




Thursday, October 18, 12
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
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
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/actions
Thursday, October 18, 12
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"/>
                                          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
Update your objects programmatically

                             POST https://graph.facebook.com

                             access_token=234876AB6865...
                             &
                             id=http://mysite.com/lasagne
                             &
                             scrape=true




Thursday, October 18, 12
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
Native Apps                      Native Apps



                                                            Mobile Web

                           Mobile Web

                                             Open Graph

                               Desktop Web                Desktop Web

            Desktop Web App                                               Desktop Web App



Thursday, October 18, 12

Contenu connexe

En vedette

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

En vedette (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Bear Douglas - Open Graph Montreal

  • 1. The Open Graph Distribution and engagement for every platform Bear Douglas Thursday, October 18, 12
  • 2. Like Like RUN EAT Like READ Like LISTEN Thursday, October 18, 12
  • 5. Native Apps Native Apps Mobile Web Mobile Web Open Graph Desktop Web Desktop Web Desktop Web App Desktop Web App Thursday, October 18, 12
  • 6. Play a Sound ▪ Like a Sound ▪ Post a Sound ▪ Follow a User ▪ Join a Group Thursday, October 18, 12
  • 8. Sharing in the app Thursday, October 18, 12
  • 9. Desktop Web: Newsfeed and Ticker http://a.url.can/go?here Thursday, October 18, 12
  • 11. iOS Native: Newsfeed & Timeline Thursday, October 18, 12
  • 12. iOS Native: Newsfeed & Timeline Thursday, October 18, 12
  • 13. Android Native & Mobile Web: Newsfeed & Timeline Thursday, October 18, 12
  • 14. 4 Steps to using Open Graph Thursday, October 18, 12
  • 15. 1. Model your data ACTION OBJECT https://developers.facebook.com/apps/.../opengraph Thursday, October 18, 12
  • 17. 2. Markup and expose your objects Thursday, October 18, 12
  • 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/lasagne Thursday, October 18, 12
  • 19. 3. Publish Actions POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagne Thursday, October 18, 12
  • 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 object's metadata GET http://mysite.com/lasagne Thursday, October 18, 12
  • 21. 4. Define your Aggregations Text Thursday, October 18, 12
  • 22. Walkthrough ▪ Creating Your First App ▪ Creating Objects and Actions ▪ Permissions and Authentication ▪ Development Tools and Tips Thursday, October 18, 12
  • 24. Read actions for better personalization GET https://graph.facebook.com/me/foodapp:cook? access_token=234876AB6865... Thursday, October 18, 12
  • 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
  • 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. Take advantage of Built-In Objects and Actions Thursday, October 18, 12
  • 29. Built-In Like with Custom Verb Text Thursday, October 18, 12
  • 30. User Intent POST https://graph.facebook.com/me/foodapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagne & fb:explicitly_shared=true Thursday, October 18, 12
  • 31. Let users add their own photos Thursday, October 18, 12
  • 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. 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. 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/actions Thursday, October 18, 12
  • 36. Localize https://developers.facebook.com/docs/opengraph/internationalization/ Thursday, October 18, 12
  • 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. Update your objects programmatically POST https://graph.facebook.com access_token=234876AB6865... & id=http://mysite.com/lasagne & scrape=true Thursday, October 18, 12
  • 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. Native Apps Native Apps Mobile Web Mobile Web Open Graph Desktop Web Desktop Web Desktop Web App Desktop Web App Thursday, October 18, 12