5_OpenGraph

The Open Graph Distribution and engagement for every platform

The Guardian  to .+ million Monthy

Active Users in  months

GoodReads  increase in

Daily Active Users

Pinterest  increase in daily

referrals from Facebook

Native Apps

Native Apps

Mobile Web

Mobile Web

Open Graph

Desktop Web

Desktop Web

▪

▪

▪

▪

▪

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

Permissions Dialog

Sharing in the app

Publish Actions from every platform

Desktop Web App

Desktop Web: Newsfeed and Ticker

Desktop Web: Timeline

iOS Native: Newsfeed & Timeline

iOS Native: Newsfeed & Timeline

Android Native & Mobile Web: Newsfeed & Timeline

 Steps to using Open Graph

. Model your data

ACTION

OBJECT

. Markup and expose your objects to the Web

... <meta property="og:type property="og:type" " content="foodapp:dish content="foodapp:dish"/> "/> <meta <meta <meta <meta

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

. Publish Actions

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

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

. Design your Timeline Aggregations

. Read Actions

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

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

Nine Pro Tips

. Authentication matters

▪

▪

▪

Auto-login returning authed users on web and mobile web:

Prominently request users to Login

Enable Authenticated Referrals if appropriate

FB.getLoginStatus()

. Trim your permissions

offline_access publish_actions publish_stream 

. Upgrade existing users to publish_actions GET https://graph.facebook.com/me/ https://graph.facebook.com/me/permissions permissions? ? access_token=234876AB6865... { "data": [ { "installed": 1, "email": 1, "user_likes": 1 } ] }

. Use Object Properties References for better Aggregations and Feed stories

INGREDIENT

COOK

RECIPE

INGREDIENT

INGREDIENT

... <meta property="og:type property="og:type" " content="foodapp:dish content="foodapp:dish"/> "/> <meta <meta <meta <meta

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

. Use Action Properties & References for better Aggregations and Feed stories

COOK

OCCASION

RECIPE

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

. Tag People & Places; Add Messages

COOK

TAGS

RECIPE

POST https://graph.facebook.com/me/ myapp:cook access_token=234876AB6865... & recipe=http://mysite.com/lasagne & place= place =56783456736519 & tags= tags =12345,67889 &  message=  message =Even+Garfield+would+be+proud

. URL structure

▪

OG needs ‘real’ URLs:

▪

Keep the address bar clean:

 window.history.pushState()

redirect based on the useragent string, or JS

 window.location=”/!#/foo/bar”

▪

http://example.com/foo/bar

. Update your objects programmatically

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

. Read Data for Better Personalisation user_actions.music user_actions.video user_actions.news

friends_actions.music friends_actions.video friends_actions.news

user_actions:APP_NAMESPACE

friends_actions:APP_NAMESPACE

https://graph.facebook.com/UID/ music.listens  music.listens?access_token= ?access_token= https://graph.facebook.com/UID/news.reads https://graph.facebook.com/UID/ news.reads?access_token= ?access_token= https://graph.facebook.com/UID/video.watches https://graph.facebook.com/UID/ video.watches?access_token= ?access_token=  APP_NAMESPACE:ACTION_NAME?.. https://graph.facebook.com/UID/ APP_NAMESPACE:ACTION_NAME ?..

Native Apps

Native Apps

Mobile Web

Mobile Web

Open Graph

Desktop Web

Desktop Web

Hack the Graph

OG Documentation developers.facebook.com/docs/opengraph