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
()' 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
Top Related