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
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
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