Facebook Mobile Hack NYC
The BlitzLocal team attended the Facebook Mobile Hack event in NYC on January 18th and took some notes on the newest updates to the mobile platform.
Read here to see what the Facebook engineers had to say, and hear what has worked for several case studies.
Intro: Facebook Platform for Mobile
How has the web changed since the early days?
- Photos!
- Facebook tagging (social)
- Games
- Not focused on rendering the best graphics, but social aspect
- 200 million people playing games on Facebook Platform
- The rise of mobile
- Across all levels of mobile devices
- 350M users of Facebook mobile
- Twice as engaged as desktop version
- Social + Mobile
- Friends, Newsfeed, search, notifications, requests, bookmarks
- Photography, websites, music, communication, games, books
Web Apps (HTML5) Development: Matt Kelly & Vikas Gupta
- How to facilitate sharing with friends
- Problematic when sharing over different types of devices
- Apps don’t exist across platforms
- Hard to share content between them even if apps exist
- How can Facebook fix this?
- The social channels
- Requests: user to user direct messaging
- Make sure they are super fast! Almost real-time
- News Feed: one to many sharing with friends
- Posting, view on wall, view on news feed
- Open Graph: Lightweight, seamless sharing
- Wherever your app lives or works, Facebook distributes properly so there are no holes.
- Bookmarks
- m.facebook.com
- Gives users a specific spot to get back to your app
- Mechanism for engagement
- Native facebook for iPhone
- Payments
- Use credits to monetize apps
- Build social from the ground up
- Search, login auth, directed to app
- Social apps work everywhere
- iPhone, laptop, android, ipad, android tablet
- HTML5 works across all platforms
Native App + Open Graph: Aryeh Selekman & Christine Abernathy:
- iOS and Android + Facebook platform
- Open Source Native SDKs
- Developer app settings
- Fields to configure iOS and Android apps
- Linking and app distribution works appropriately if these fields are filled out correctly
- Single Sign On (SSO) login without typing
- Login with facebook button
- Understanding Native Distribution
- If an iOS or app exists, all requests/News Feed Stories/Timeline stories will link directly to native app (or apple store if not installed)
- On android, requests/News Feed Stories/Timeline stories wil only direct to your mobile web app
- 5 Best Practices
- 1. Build a mobile web app
- HTML5: distribution on m.facebook.com on all webkit enabled touch browsers
- native wrappers
- take advantage of SSO capabilities
- 2. Implement SSO
- 3. Implement requests for app discoverability
- Rate now, invite friends, send requests
- 4. Leverage existing friend graph
- Promote activity and interaction
- Re-engagement
- Push notification through native channels to let you know your friends joined
- 5. Get your app on timeline
- Open Graph and Mobile Apps
- One API – distribution to ticker, Timeline, newsfeed
- Allows you to define what people do in your application
- Reading, listening, watching, etc.
- 4 Steps to get started using open graph
- 1. Define your actions and objects
- Action verbs
- 2. Design your Timeline aggregations
- Pictures, maps, represent actions and data that people send through
- 3. Markup and expose your objects
- Everything represented by underlying URL
- Where do objects live
- 4. Publish actions
- Object URL
- Action names
Native Distribution for Mobile Apps
Case Study: PhoneGap
- Pattern
- Embed a chromeless browser in a native app
- Create a bridge between the browser and the native code providing access to native APIs
- Write a web app
- Package the web app with the native code and deploy to devices
- Write once debug everywhere
- Take note
- HTML, JS, CSS included in an app package
- HTML loaded on file:// URI scheme, no cross domain request restrictions
- Engineering wise, approach is simple to extend to new platforms
- Support Platforms
- iOS, Android, BB, webOS, Symbian, Windows Phone (mango), Samsung Bada
- Mobile first!
- HTML5: write native code easily, scale like an app so width is design width – no pinch zoom etc
- CSS3: webkit transformations
- The future
- Tooling
- WebGL
- Facebook, Linkedin, Walmart use case
- Continue polyfilling HTML5
Case Study: Washington Post Social Reader
- Coding for the futures
- Everything you write effects possible futures
- Architect for the foreseeable futures
- Short term futures
- Building mobile second
- Use mobile to rethink boundaries
- Roll mobile learning back into the webapp
Case Study: Thuzi
- Hospitality app
- Social by design
- Send invites, RSVPs
- Share great offers with my friends
- Provide reviews of the experience
- Capture the moment for a special occasion (Timeline)
- Local by design
- Dining is a local experience
- Find a local restaurant
- Invite friends, redeem offers, find out what’s happening
- Native by design
- Want to ensure you have access to the newest native APIs
- Want to have the fastest app possible
- Want to guarantee formatting correctness
- More choices for monetization – iAds, etc
- Many existing open source libraries and blog posts and tutorials
- Are not dependent upon plugins or other 3rd party series for push notifications
