Facebook mobile platform

48
Facebook mobile platform Velocity China, Dec 7 th , 2011, Beijing Xiaoliang “David” Wei http://www.DavidWei.org www.facebook.com/DavidWei 微博: 魏小亮9

Transcript of Facebook mobile platform

Page 1: Facebook mobile platform

Facebook mobile platform

Velocity China, Dec 7th, 2011, Beijing

Xiaoliang “David” Wei

http://www.DavidWei.org www.facebook.com/DavidWei

微博: 魏小亮9

Page 2: Facebook mobile platform

•  >7 million websites / applications connected to Facebook

•  >20 million new application installed every day

•  Billion-dollar companies built success on top of the platform

“We are a platform company”

Page 3: Facebook mobile platform

•  >7 million websites / applications connected to Facebook

•  >20 million new application installed every day

•  Social distribution is the key

•  Request

•  Newsfeed stories

“We are a platform company”

Page 4: Facebook mobile platform

“We are a mobile company”

https://www.facebook.com/press/info.php

350M

•  Lots of growth

•  Twice as engaged

Page 5: Facebook mobile platform

•  >7 million websites / applications connected to Facebook

•  >20 million new application installed every day

Bring social distribution to mobile?

350M ?

Page 6: Facebook mobile platform

The social channels

Page 7: Facebook mobile platform

•  Friend Requests

•  News Feed

•  Open Graph

Social channels in Facebook mobile

Page 8: Facebook mobile platform

Requests User to user direct messaging

Page 9: Facebook mobile platform

Requests User experience

Sending Receiving

Page 10: Facebook mobile platform

Requests User experience

Sending Receiving

Page 11: Facebook mobile platform

Requests User experience

Sending Receiving

Page 12: Facebook mobile platform

Requests Interface

FB.ui({ method: ‘apprequests’, message: ’Learn how to make your mobile web app social’ }, function(response) { console.log('sendRequest UI response: ', response); });

Page 13: Facebook mobile platform

Requests Interface options

suggestions: array of friend IDs

to: a single UID

Page 14: Facebook mobile platform

News Feed One to many sharing with friends

Page 15: Facebook mobile platform

News Feed User experience

Posting View on Wall View on News Feed

Page 16: Facebook mobile platform

News Feed Interface

FB.ui({ method: 'feed', name: 'I\'m using the Hackbook web app', caption: 'Hackbook for Mobile Web.', description: 'Check out Hackbook for Mobile Web to learn how you can make your web apps social using Facebook Platform.', link: 'http://apps.facebook.com/mobile-start/', picture: ‘http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png', actions: [{ name: 'Get Started', link: 'http://apps.facebook.com/mobile-start/' }], }, function(response) { console.log('publishStory UI response: ', response); });

Page 17: Facebook mobile platform

News Feed Interface

FB.ui({ method: 'feed', name: 'I\'m using the Hackbook web app', caption: 'Hackbook for Mobile Web.', description: 'Check out Hackbook for Mobile Web to learn how you can make your web apps social using Facebook Platform.', link: 'http://apps.facebook.com/mobile-start/', picture: ‘http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png', actions: [{ name: 'Get Started', link: 'http://apps.facebook.com/mobile-start/' }], }, function(response) { console.log('publishStory UI response: ', response); });

Page 18: Facebook mobile platform

News Feed Interface

FB.ui({ method: 'feed', name: 'I\'m using the Hackbook web app', caption: 'Hackbook for Mobile Web.', description: 'Check out Hackbook for Mobile Web to learn how you can make your web apps social using Facebook Platform.', link: 'http://apps.facebook.com/mobile-start/', picture: ‘http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png', actions: [{ name: 'Get Started', link: 'http://apps.facebook.com/mobile-start/' }], }, function(response) { console.log('publishStory UI response: ', response); });

Page 19: Facebook mobile platform

News Feed Interface

FB.ui({ method: 'feed', name: 'I\'m using the Hackbook web app', caption: 'Hackbook for Mobile Web.', description: 'Check out Hackbook for Mobile Web to learn how you can make your web apps social using Facebook Platform.', link: 'http://apps.facebook.com/mobile-start/', picture: ‘http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png', actions: [{ name: 'Get Started', link: 'http://apps.facebook.com/mobile-start/' }], }, function(response) { console.log('publishStory UI response: ', response); });

Page 20: Facebook mobile platform

News Feed Interface options

to: a UID whose wall you want to post on

user_message_prompt: a string such as 'Tell your friends about building social web apps.'

Page 21: Facebook mobile platform

Open graph Lightweight, frictionless sharing

Page 22: Facebook mobile platform

Open graph Support

<Who> <does> <what>

Page 23: Facebook mobile platform

Open graph User experience

Matt Kelly listened to High And Dry by Radiohead on Spotify.

Page 24: Facebook mobile platform

Open graph User experience

Matt Kelly listened to High And Dry by Radiohead on Spotify.

Page 25: Facebook mobile platform

Open graph User experience

Matt Kelly listened to High And Dry by Radiohead on Spotify.

Page 26: Facebook mobile platform

Open graph User experience

Matt Kelly listened to High And Dry by Radiohead on Spotify.

Page 27: Facebook mobile platform

Open graph User experience

Page 28: Facebook mobile platform

•  Friend Requests: one-to-one, strong signal

•  News Feed: one-to-many, heavy content

•  Open Graph: one-to-many, light content, frictionless

Social channels in Facebook mobile

Page 29: Facebook mobile platform

Additional features

Page 30: Facebook mobile platform

Login User experience

Page 31: Facebook mobile platform

Login User experience

Page 32: Facebook mobile platform

Login User experience

Page 33: Facebook mobile platform

Login User experience

Page 34: Facebook mobile platform

Login User experience

Page 35: Facebook mobile platform

Login Interface

FB.login(function() { console.log(‘logged in’); }, {scope: 'email'});

Page 36: Facebook mobile platform

Bookmarks

Native Facebook for iPhone m.facebook.com

Foursquare"

3"Magic Land: Island"

Page 37: Facebook mobile platform

Payment

Page 38: Facebook mobile platform

Payment Interface

FB.ui({ method: 'pay', credits_purchase: false, // This is the item ID defined in your game or app order_info: 'locket' }, function(response) { console.log('sendPay response: ', response); });

Page 39: Facebook mobile platform

Search

Page 40: Facebook mobile platform

Search: usage flows

World War"App 2,000 monthly users"

Page 41: Facebook mobile platform

Applications on multiple devices

Page 42: Facebook mobile platform
Page 43: Facebook mobile platform

Social apps work everywhere

android

ipad android

iphone laptop

Page 44: Facebook mobile platform

Performance

Page 45: Facebook mobile platform

Building fast apps

•  Batching FQL (fql.multi_query)

•  Consider prefetching data (tradeoff)

•  Using local storages to cache data (careful with privacy policy)

Data

Page 46: Facebook mobile platform

Building fast apps

•  Asynchronous loading of connect JS library

•  Cache image URL from Open Graph

•  Consider using AppCache

Static resources

Page 47: Facebook mobile platform

Documents Hackbook (Sample App) fb.me/hackbook Showcase fb.me/mobileappshowcase Documentation developers.facebook.com/mobile HTML5 Resource Center developers.facebook.com/html5

Page 48: Facebook mobile platform

Thank you!

Velocity China, Dec 7th, 2011, Beijing

Xiaoliang “David” Wei

http://www.DavidWei.org www.facebook.com/DavidWei

微博: 魏小亮9