Scribd
Upload
26 views

Open Graph Matt

The document discusses the Open Graph platform and provides tips for using it. It outlines the basic steps to model data as actions and objects, mark up objects with Open Graph metadata, publish actions to Facebook, define aggregations, and read actions. It also provides examples of publishing, reading, and updating actions and objects via the Graph API. Finally, it lists some top tips, including using authentication, letting users add photos, taking advantage of built-in objects and actions, localizing content, programmatically updating objects, and reading data for personalization.

Uploaded by

David Carrera
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Open Graph Matt

The document discusses the Open Graph platform and provides tips for using it. It outlines the basic steps to model data as actions and objects, mark up objects with Open Graph metadata, publish actions to Facebook, define aggregations, and read actions. It also provides examples of publishing, reading, and updating actions and objects via the Graph API. Finally, it lists some top tips, including using authentication, letting users add photos, taking advantage of built-in objects and actions, localizing content, programmatically updating objects, and reading data for personalization.

Uploaded by

David Carrera
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Monday, August 27, 12

The Open Graph


Distribution and engagement for every platform

Matt Kelly
Monday, August 27, 12

https://graph.facebook.com/me { "name": "Matt Kelly", "work": [ { "location": { "name": "Palo Alto, California" }, "position": { "name": "Developer Advocate" }, } ], "email": "[email protected]", fb_url: facebook.com/mk, "twitter": "@mattwkelly", "github": "mattwkelly"

Monday, August 27, 12

Like Like

RUN EAT READ

Like

Like

LISTE
Monday, August 27, 12

Monday, August 27, 12

Monday, August 27, 12

Native Apps

Native Apps

Mobile Web Mobile Web Open Graph Desktop Web


Desktop Web App

Desktop Web
Desktop Web App

Monday, August 27, 12

Play a Sound Like a Sound Post a Sound Follow a User Join a Group

Monday, August 27, 12

Permissions Dialog

Monday, August 27, 12

Publish Actions from every platform

Desktop Web App


Monday, August 27, 12

Sharing in the app

Monday, August 27, 12

Desktop Web: Newsfeed and Ticker

http://a.url.can/go?here
Monday, August 27, 12

Desktop Web: Timeline

Monday, August 27, 12

iOS Native: Newsfeed & Timeline

Monday, August 27, 12

iOS Native: Newsfeed & Timeline

Monday, August 27, 12

Android Native & Mobile Web: Newsfeed & Timeline

Monday, August 27, 12

Steps to using Open Graph

Monday, August 27, 12

. Model your data

ACTION

OBJECT

https://developers.facebook.com/apps/.../opengraph
Monday, August 27, 12

https://developers.facebook.com/apps/.../opengraph
Monday, August 27, 12

. Markup and expose your objects

Monday, August 27, 12

<head> <title>Lasagne</title> <meta property="og:type" content="foodapp:dish"/> <meta <meta <meta <meta property="og:title" content="Lasagne"/> property="og:description" content="yummy"/> property="og:url" content="http://mysite.com/lasagne"/> 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>


Monday, August 27, 12

http://mysite.com/lasagne

. Publish Actions

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

Monday, August 27, 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
Monday, August 27, 12

. Dene Your Aggregations

Text

Monday, August 27, 12

. Read Actions

GET https://graph.facebook.com/me/music.listens? access_token=234876AB6865...

Monday, August 27, 12

Walkthrough

Creating Actions and Object Types Hosting Objects Permissions and Authentication Publishing Actions from the Graph Explorer Reading Actions from the Graph Explorer Publishing Actions from the Mobile Web

Monday, August 27, 12

Top Tips

Monday, August 27, 12

Authentication matters

Prominently request users to Login

Auto-login returning authed users on web


FB.getLoginStatus()

Monday, August 27, 12

Let Users Add Their Own Photos

Monday, August 27, 12

message

Monday, August 27, 12

Take advantage of Built-In Objects and Actions

Monday, August 27, 12

Localize

Monday, August 27, 12

<meta property="og:locale" content="en_US"/> <meta property="og:locale:alternate" content="es_MX"/> <meta property="og:title" content="Pork Rinds"/> <meta property="og:locale" content="es_MX"/> <meta property="og:locale:alternate" content="en_US"/> <meta property="og:title" content="Chicharrones"/>
Monday, August 27, 12

GET http://mysite.com/pork

GET http://mysite.com/pork? fb_locale=mx

Update your objects programmatically


POST https://graph.facebook.com access_token=234876AB6865... & id=http://mysite.com/lasagne & scrape=true

Monday, August 27, 12

Read Data for Better Personalisation


user_actions.music user_actions.video user_actions.news user_actions:APP_NAMESPACE friends_actions.music friends_actions.video friends_actions.news 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?..


Monday, August 27, 12

Native Apps

Native Apps

Mobile Web Mobile Web Open Graph Desktop Web


Desktop Web App

Desktop Web
Desktop Web App

Monday, August 27, 12

Monday, August 27, 12

You might also like