Download - Facebook - Open Graph on Mobile
![Page 1: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/1.jpg)
Open Graph on MobileLeveraging the Open Graph on Native & HTML! Apps
Bruce HazanMarch !"th #$!#m#d#
![Page 2: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/2.jpg)
800m+Monthly
Users
0.5bnDailyUsers
7mSites & Apps
Facebook on the web
![Page 3: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/3.jpg)
Facebook on mobile
2004 2005 2006 2007 2008 2009 2010 2012
!"#m+
2xEngagement
![Page 4: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/4.jpg)
LISTEN
READ
RUN
EAT
Like
Like
Like
Like
![Page 5: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/5.jpg)
![Page 6: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/6.jpg)
![Page 7: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/7.jpg)
![Page 8: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/8.jpg)
The Guardian
$ to $.%+ million Monthy Active Users in % months
![Page 9: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/9.jpg)
GoodReads
&&' increase in Daily Active Users
![Page 10: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/10.jpg)
()' increase in daily referrals from Facebook
![Page 11: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/11.jpg)
Open Graph
Desktop Web App
Desktop Web
Mobile Web
Desktop Web App
Desktop Web
Mobile Web
Native Apps Native Apps
![Page 12: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/12.jpg)
▪ Play a Sound▪ Like a Sound▪ Post a Sound▪ Follow a User▪ Join a Group
![Page 13: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/13.jpg)
Publish Actions from every platform
Desktop Web App
![Page 14: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/14.jpg)
Desktop Web: Newsfeed and Ticker
![Page 15: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/15.jpg)
Desktop Web: Timeline
![Page 16: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/16.jpg)
Desktop Web: Timeline App Views
![Page 17: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/17.jpg)
iOS Native: Newsfeed & Timeline
![Page 18: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/18.jpg)
iOS Native: Newsfeed & Timeline
![Page 19: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/19.jpg)
Android Native & Mobile Web: Newsfeed & Timeline
![Page 20: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/20.jpg)
ACTION OBJECT
!. Model your data
![Page 21: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/21.jpg)
!. Model your data
![Page 22: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/22.jpg)
". Design your Timeline Aggregations
![Page 23: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/23.jpg)
#. Markup and expose your objects to the Web
![Page 24: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/24.jpg)
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
![Page 25: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/25.jpg)
▪ 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
![Page 26: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/26.jpg)
% Pro Tips for OG Ninjas
![Page 27: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/27.jpg)
▪ Auto-login returning auth’d userson Desktop Web and Mobile Web:
▪ Prominently offer:
▪ EnableAuthenticatedReferrals
!. Authentication really, really matters
FB.getLoginStatus()
![Page 28: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/28.jpg)
". Trim your permissions
publish_stream
offline_accesspublish_actions
DEPRECATED
SUPERCEDED
![Page 29: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/29.jpg)
#. Upgrade existing users to publish_actions
https://graph.facebook.com/me/permissions/?access_token=TOKEN
{ "data": [ { "installed": 1, "email": 1, "user_likes": 1 } ]}
![Page 30: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/30.jpg)
INGRE-DIENT
INGRE-DIENT
INGRE-DIENT
$. Use Action and Object References
RECIPECOOK
<meta property=”APP_NAMESPACE:REFERENCE_OBJECT_TYPE” content=”REFERENCE_OBJECT_URL”/>
![Page 31: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/31.jpg)
&. 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_
![Page 32: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/32.jpg)
'. 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
![Page 33: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/33.jpg)
%. 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
![Page 34: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/34.jpg)
Open Graph
Desktop Web App
Desktop Web
Mobile Web
Desktop Web App
Desktop Web
Mobile Web
Native Apps Native Apps
![Page 35: Facebook - Open Graph on Mobile](https://reader037.vdocument.in/reader037/viewer/2022110118/554ef71cb4c90547648b496f/html5/thumbnails/35.jpg)
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