facebook - open graph on mobile

Open Graph on MobileLeveraging the Open Graph on Native & HTML! Apps

Bruce HazanMarch !"th #$!#m#d#

800m+Monthly

Users

0.5bnDailyUsers

7mSites & Apps

Facebook on the web

Facebook on mobile

2004 2005 2006 2007 2008 2009 2010 2012

!"#m+

2xEngagement

LISTEN

READ

RUN

EAT

Like

Like

Like

Like

The Guardian

$ to $.%+ million Monthy Active Users in % months

GoodReads

&&' increase in Daily Active Users

Pinterest

()' increase in daily referrals from Facebook

Open Graph

Desktop Web App

Desktop Web

Mobile Web

Desktop Web App

Desktop Web

Mobile Web

Native Apps Native Apps

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

Publish Actions from every platform

Desktop Web App

Desktop Web: Newsfeed and Ticker

Desktop Web: Timeline

Desktop Web: Timeline App Views

iOS Native: Newsfeed & Timeline

iOS Native: Newsfeed & Timeline

Android Native & Mobile Web: Newsfeed & Timeline

ACTION OBJECT

!. Model your data

!. Model your data

". Design your Timeline Aggregations

#. Markup and expose your objects to the Web

curl -F 'access_token=<access_token>' -F 'recipe=http://myapp.com/object_id' \ 'https://graph.facebook.com/me/myapp:cook'

Object URL Action Name

$. Publish Actions from every platform

▪ if the user has authorised your app:

▪ If the user has not authorised your app:

fb[APP_ID]://authorize# expires_in=[ACCESS_TOKEN_EXPIRATION]& access_token=[USER_ACCESS_TOKEN]& target_url=[ORIGINAL_LINK]

fb[APP_ID]://authorize# target_url=[ORIGINAL_LINK]

iOS Deep Linking

% Pro Tips for OG Ninjas

▪ Auto-login returning auth’d userson Desktop Web and Mobile Web:

▪ Prominently offer:

▪ EnableAuthenticatedReferrals

!. Authentication really, really matters

FB.getLoginStatus()

". Trim your permissions

publish_stream

offline_accesspublish_actions

DEPRECATED

SUPERCEDED

#. Upgrade existing users to publish_actions

https://graph.facebook.com/me/permissions/?access_token=TOKEN

{  "data": [    {      "installed": 1,       "email": 1,       "user_likes": 1    }  ]}

INGRE-DIENT

INGRE-DIENT

INGRE-DIENT

$. Use Action and Object References

RECIPECOOK

<meta property=”APP_NAMESPACE:REFERENCE_OBJECT_TYPE” content=”REFERENCE_OBJECT_URL”/>

&. er, what about: http://example.com/#!/foo/bar

▪ OG needs ‘real’ URLs:

▪ Keep the address bar clean:

▪ redirect based on theuseragent string, or JS

▪ support coming soon...

http://example.com/foo/bar

window.history.pushState()

“facebookexternalhit”

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

_escaped_fragment_

'. Read Data -> Better Personalisation

user_actions.musicuser_actions.videouser_actions.news

user_actions:APP_NAMESPACEuser_actions:soundcloud

friends_actions.musicfriends_actions.videofriends_actions.news

friends_actions:APP_NAMESPACEfriends_actions:soundcloud

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

https://graph.facebook.com/UID/APP_NAMESPACE:ACTION_NAMEhttps://graph.facebook.com/UID/soundcloud:favorite

%. Update your objects programmatically

curl -F 'scrape=true' -F 'id=http://myapp.com/object_id' \ 'https://graph.facebook.com/'

Note:▪ No domain-level refresh - you have to ping object-by-object▪ No API to show all the objects Facebook knows about ▪ Use the Graph Batch API to speed things up

Open Graph

Desktop Web App

Desktop Web

Mobile Web

Desktop Web App

Desktop Web

Mobile Web

Native Apps Native Apps

Hack the Graph

Simon’s Food Apphttp://tinyurl.com/simonsfoodapp

OG Documentationdevelopers.facebook.com/docs/opengraph

Wishlist (Official Sample App)https://github.com/facebook/wishlist-mobile-sample

facebook.com/sicross