Uploaded bypherrera82
1,423 views

Bear Douglas - Open Graph Montreal

The document discusses Open Graph, Facebook's protocol for publishing and consuming information about activities people take part in on websites and mobile apps. It describes how developers can model data, markup objects and expose actions to enable sharing and personalization across Facebook platforms and third-party sites using Open Graph. The document provides best practices and tips for using Open Graph including reading actions, field expansion, built-in objects and localization.

Embed presentation

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

More Related Content

PPTX
Demchig monastery1
byZolzaya Zoloo
 
PPTX
Facebook Open Graph Protocol
byZolzaya Erdenebaatar
 
PDF
Build Features, Not Apps
byNatasha Murashev
 
KEY
Facebook Open Graph Overview
byCory OBrien
 
PDF
"Introduction Open Graph and Facebook Platform" - Facebook Developer Garage ...
byVijay Rayapati
 
PDF
Build social apps for Facebook
byMohammad Emran Hasan
 
PDF
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
byEngauge
 
PDF
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
bylinds313
 
Demchig monastery1
byZolzaya Zoloo
 
Facebook Open Graph Protocol
byZolzaya Erdenebaatar
 
Build Features, Not Apps
byNatasha Murashev
 
Facebook Open Graph Overview
byCory OBrien
 
"Introduction Open Graph and Facebook Platform" - Facebook Developer Garage ...
byVijay Rayapati
 
Build social apps for Facebook
byMohammad Emran Hasan
 
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
byEngauge
 
Apps, Timeline and Facepile: Making Sense of Facebook as a Non-Developer
bylinds313
 

Similar to Bear Douglas - Open Graph Montreal

PDF
Facebook on Rails
byCardinal Blue Software
 
PPTX
Facebook Open Graph - The Semantic Wallet
byJonathan Laba
 
PDF
Facebook f8 seoul
byDaeMyung Kang
 
PDF
Tech Headline - Facebook Developer World Hack Sao Paulo 2012
byRodrigo Castilho
 
PDF
Facebook Platform for Developers
byLidan Hifi
 
PDF
Facebook graph api
byFagner Moura
 
PDF
Facebook Connect in 3 Hours
byRyan Merket
 
PDF
A Survey of Petabyte Scale Databases and Storage Systems Deployed at Facebook
byBigDataCloud
 
PDF
Facebook permission
byseung hyun Seo
 
PDF
SMAZ6 (2012) - Exploring the Impact of Facebook Integration
byLaneTerralever
 
PDF
Facebook Garage / Open Graph Presentation
byIMA_School
 
PPTX
What's New on the Facebook Platform, November 2011
byIskandar Najmuddin
 
PPT
Facebook
byRae Clarke
 
PDF
My first facebook app
byMilan Steskal
 
PPT
Creating a Facebook App
byMindgrub Technologies
 
KEY
The next level of social integration
byMat Clayton
 
PDF
Toronto Garage
bymmmarks
 
PDF
Optimizing for change: Taking risks safely & e-commerce
byKellan
 
PPTX
Facebook for Nonprofits
byCanadaHelps / MyCharityConnects
 
PDF
Facebook for Business - Travel&Tourism by Milena Regos, Out&About Marketing
byMilena Regos
 
Facebook on Rails
byCardinal Blue Software
 
Facebook Open Graph - The Semantic Wallet
byJonathan Laba
 
Facebook f8 seoul
byDaeMyung Kang
 
Tech Headline - Facebook Developer World Hack Sao Paulo 2012
byRodrigo Castilho
 
Facebook Platform for Developers
byLidan Hifi
 
Facebook graph api
byFagner Moura
 
Facebook Connect in 3 Hours
byRyan Merket
 
A Survey of Petabyte Scale Databases and Storage Systems Deployed at Facebook
byBigDataCloud
 
Facebook permission
byseung hyun Seo
 
SMAZ6 (2012) - Exploring the Impact of Facebook Integration
byLaneTerralever
 
Facebook Garage / Open Graph Presentation
byIMA_School
 
What's New on the Facebook Platform, November 2011
byIskandar Najmuddin
 
Facebook
byRae Clarke
 
My first facebook app
byMilan Steskal
 
Creating a Facebook App
byMindgrub Technologies
 
The next level of social integration
byMat Clayton
 
Toronto Garage
bymmmarks
 
Optimizing for change: Taking risks safely & e-commerce
byKellan
 
Facebook for Nonprofits
byCanadaHelps / MyCharityConnects
 
Facebook for Business - Travel&Tourism by Milena Regos, Out&About Marketing
byMilena Regos
 

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
  • 3.
  • 4.
  • 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
  • 7.
  • 8.
    Sharing in theapp Thursday, October 18, 12
  • 9.
    Desktop Web: Newsfeedand Ticker http://a.url.can/go?here Thursday, October 18, 12
  • 10.
  • 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 tousing Open Graph Thursday, October 18, 12
  • 15.
    1. Model yourdata ACTION OBJECT https://developers.facebook.com/apps/.../opengraph Thursday, October 18, 12
  • 16.
  • 17.
    2. Markup andexpose 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 yourAggregations 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
  • 23.
  • 24.
    Read actions forbetter personalization GET https://graph.facebook.com/me/foodapp:cook? access_token=234876AB6865... Thursday, October 18, 12
  • 25.
    Read actions forbetter 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.
  • 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 ofBuilt-In Objects and Actions Thursday, October 18, 12
  • 29.
    Built-In Like withCustom 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 addtheir own photos Thursday, October 18, 12
  • 32.
    Let users addtheir 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 toOpen 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
  • 35.
  • 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 objectsprogrammatically 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