Facebook - Open Graph on Mobile
Upcoming SlideShare
Loading in...5
×
 

Facebook - Open Graph on Mobile

on

  • 3,263 views

Presentation at http://www.mobile-monday.de/events/kick-ass-m2d2-developing-facebook-html5-mobile-games-apps

Presentation at http://www.mobile-monday.de/events/kick-ass-m2d2-developing-facebook-html5-mobile-games-apps

Statistics

Views

Total Views
3,263
Slideshare-icon Views on SlideShare
3,170
Embed Views
93

Actions

Likes
2
Downloads
42
Comments
0

5 Embeds 93

http://www.sociallyperforming.com 84
https://si0.twimg.com 4
http://www.onlydoo.com 3
https://abs.twimg.com 1
https://www.facebook.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Facebook - Open Graph on Mobile Facebook - Open Graph on Mobile Presentation Transcript

    • Open Graph on MobileLeveraging the Open Graph on Native & HTML5 AppsBruce HazanMarch 19th 2012m2d2
    • Facebook on the web 800m+ 0.5bn 7m Monthly Daily Sites & Apps Users Users
    • Facebook on mobile 425m+ 2x Engagement 2004 2005 2006 2007 2008 2009 2010 2012
    • Like Like RUNEAT READ Like Like LISTEN
    • The Guardian0 to 3.9+ million MonthyActive Users in 5 months
    • GoodReads77% increase inDaily Active Users
    • Pinterest60% increase in dailyreferrals from Facebook
    • Native Apps Native Apps Mobile Web Mobile Web Open Graph Desktop Web Desktop WebDesktop Web App Desktop Web App
    • ▪ 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
    • 1. Model your data ACTION OBJECT
    • 1. Model your data
    • 2. Design your Timeline Aggregations
    • 3. Markup and expose your objects to the Web
    • 4. Publish Actions from every platform curl -F access_token=<access_token> -F recipe=http://myapp.com/object_id https://graph.facebook.com/me/myapp:cookObject URL Action Name
    • iOS Deep Linking▪ if the user has authorised your app: fb[APP_ID]://authorize# expires_in=[ACCESS_TOKEN_EXPIRATION]& access_token=[USER_ACCESS_TOKEN]& target_url=[ORIGINAL_LINK]▪ If the user has not authorised your app: fb[APP_ID]://authorize# target_url=[ORIGINAL_LINK]
    • 7 Pro Tips for OG Ninjas
    • 1. Authentication really, really matters▪ Auto-login returning auth’d users FB.getLoginStatus() on Desktop Web and Mobile Web:▪ Prominently offer:▪ Enable Authenticated Referrals
    • 2. Trim your permissions CATED D RE EP offline_access publish_actions RC EDEDSUPE publish_stream
    • 3. Upgrade existing users to publish_actions https://graph.facebook.com/me/permissions/?access_token=TOKEN {   "data": [     {       "installed": 1,       "email": 1,       "user_likes": 1     }   ] }
    • 4. Use Action and Object References INGRE- DIENT INGRE- COOK RECIPE DIENT INGRE- DIENT <meta property=”APP_NAMESPACE:REFERENCE_OBJECT_TYPE” content=”REFERENCE_OBJECT_URL” />
    • 5. er, what about: http://example.com/#!/foo/bar▪ OG needs ‘real’ URLs: http://example.com/foo/bar▪ Keep the address bar clean: window.history.pushState()▪ redirect based on the “facebookexternalhit” useragent string, or JS window.location=”/!#/foo/bar”▪ _escaped_fragment_ support coming soon...
    • 6. Read Data -> Better Personalisationuser_actions.music friends_actions.musicuser_actions.video friends_actions.videouser_actions.news friends_actions.newsuser_actions:APP_NAMESPACE friends_actions:APP_NAMESPACEuser_actions:soundcloud friends_actions:soundcloudhttps://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=TOKENhttps://graph.facebook.com/UID/APP_NAMESPACE:ACTION_NAMEhttps://graph.facebook.com/UID/soundcloud:favorite
    • 7. 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
    • Native Apps Native Apps Mobile Web Mobile Web Open Graph Desktop Web Desktop WebDesktop Web App Desktop Web App
    • Hack the GraphSimon’s Food Apphttp://tinyurl.com/simonsfoodappOG Documentationdevelopers.facebook.com/docs/opengraphWishlist (Official Sample App)https://github.com/facebook/wishlist-mobile-samplefacebook.com/sicross