5_opengraph

8/2/2019 5_OpenGraph

1/42

Distribution and engagement for every platformThe Open Graph


2/42


3/42


4/42


5/42

The Guardian

to .+ million Monthy

Active Users in months


6/42

GoodReads

increase in

Daily Active Users


7/42

Pinterest

increase in daily

referrals from Facebook


8/42

Open Graph

Desktop Web

Mobile Web

Desktop Web

Mobile Web

Native Apps Native Apps


9/42

Play a Sound

Like a Sound Post a Sound

Follow a User

Join a Group


10/42

Permissions Dialog


11/42

Sharing in the app


12/42

Publish Actions from every platform

Desktop Web AppDesktop Web App


13/42

Desktop Web: Newsfeed and Ticker


14/42

Desktop Web: Timeline


15/42

iOS Native: Newsfeed & Timeline


16/42

iOS Native: Newsfeed & Timeline


17/42

Android Native & Mobile Web: Newsfeed & Timeline


18/42

Steps to using Open Graph


19/42

ACTION OBJECT

. Model your data


20/42


21/42

. Markup and expose your objects to the Web


22/42

...

Lasagne


23/42

. Publish Actions

POSThttps://graph.facebook.com/me/foodapp:cook

access_token=234876AB6865...

&

recipe=http://mysite.com/lasagne


24/42


25/42

. Design your Timeline Aggregations


26/42

. Read Actions

GEThttps://graph.facebook.com/me/foodapp:cook?



27/42

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

Walkthrough


28/42

Nine Pro Tips


29/42

Auto-login returning authed users

on web and mobile web:

Prominently request users to Login

Enable

AuthenticatedReferrals if

appropriate

. Authentication matters

FB.getLoginStatus()


30/42

. Trim your permissions

publish_stream

offline_accesspublish_actions


31/42

. Upgrade existing users to publish_actionsGEThttps://graph.facebook.com/me/permissions?


{

"data": [ { "installed": 1,"email": 1,

"user_likes": 1 } ]}


32/42

INGRE-DIENT

INGRE-DIENT

INGRE-DIENT

. Use Object Properties References

RECIPECOOK

for better Aggregations and Feed stories


33/42

...

Lasagne


34/42

OCCASION

. Use Action Properties & References

RECIPECOOK

for better Aggregations and Feed stories


35/42

POSThttps://graph.facebook.com/me/foodapp:cook


&

recipe=http://mysite.com/lasagne

&

occasion=http://mysite.com/mybirthday


36/42

TAGS

. Tag People & Places; Add Messages

RECIPECOOK


37/42

POSThttps://graph.facebook.com/me/myapp:cook


&

recipe=http://mysite.com/lasagne&

place=56783456736519

&

tags=12345,67889

&

message=Even+Garfield+would+be+proud


38/42

. URL structure

OG needs real URLs:

Keep the address bar clean:

redirect based on the

useragent string, or JS

http://example.com/foo/bar

window.history.pushState()

window.location=/!#/foo/bar


39/42

. Update your objects programmatically

POSThttps://graph.facebook.com

access_token=234876AB6865...&

id=http://mysite.com/lasagne

&

scrape=true


40/42

. Read Data for Better Personalisationuser_actions.musicuser_actions.videouser_actions.news

user_actions:APP_NAMESPACE

friends_actions.musicfriends_actions.videofriends_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?..


41/42

Open Graph

Desktop Web

Mobile Web

Desktop Web

Mobile Web

Native Apps Native Apps


42/42

Hack the Graph

OG Documentationdevelopers.facebook.com/docs/opengraph

5_opengraph

Documents