Facebook mobile platform

Transcription

1 Facebook mobile platform Velocity China, Dec 7 th, 2011, Beijing Xiaoliang David Wei : 9

2 We are a platform company >7 million websites / applications connected to Facebook >20 million new application installed every day Billion-dollar companies built success on top of the platform

3 We are a platform company >7 million websites / applications connected to Facebook >20 million new application installed every day Social distribution is the key Request Newsfeed stories

4 We are a mobile company Lots of growth Twice as engaged 350 M

5 Bring social distribution to mobile? >7 million websites / applications connected to Facebook >20 million new application installed every day? 350M

6 The social channels

7 Social channels in Facebook mobile Friend Requests News Feed Open Graph

8 Requests User to user direct messaging

9 Requests User experience Sending Receiving

10 Requests User experience Sending Receiving

11 Requests User experience Sending Receiving

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

13 Requests Interface options suggestions: array of friend IDs o: a single UID

14 News Feed One to many sharing with friends

15 News Feed User experience Posting View on Wall View on News Feed

16 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: ' picture: facebook_icon_large.png', actions: [{ name: 'Get Started', link: ' }], }, function(response) { console.log('publishstory UI response: ', response); });

17 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: ' picture: facebook_icon_large.png', actions: [{ name: 'Get Started', link: ' }], }, function(response) { console.log('publishstory UI response: ', response); });

18 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: ' picture: facebook_icon_large.png', actions: [{ name: 'Get Started', link: ' }], }, function(response) { console.log('publishstory UI response: ', response); });

19 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: ' picture: facebook_icon_large.png', actions: [{ name: 'Get Started', link: ' }], }, function(response) { console.log('publishstory UI response: ', response); });

20 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.'

21 Open graph Lightweight, frictionless sharing

22 Open graph Support <Who> <does> <what>

23 Open graph User experience Matt Kelly listened to High And Dry by Radiohead on Spotify.

24 Open graph User experience Matt Kelly listened to High And Dry by Radiohead on Spotify.

25 Open graph User experience Matt Kelly listened to High And Dry by Radiohead on Spotify.

26 Open graph User experience Matt Kelly listened to High And Dry by Radiohead on Spotify.

27 Open graph User experience

28 Social channels in Facebook mobile Friend Requests: one-to-one, strong signal News Feed: one-to-many, heavy content Open Graph: one-to-many, light content, frictionless

29 Additional features

30 Login User experience

31 Login User experience

32 Login User experience

33 Login User experience

34 Login User experience

35 Login Interface FB.login(function() { console.log( logged in ); }, {scope: ' '});

36 Bookmarks m.facebook.com Native Facebook for iphone Foursquare" Magic Land: Island" 3"

37 Payment

38 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); });

39 Search

40 Search: usage flows World War" App 2,000 monthly users"

41 Applications on multiple devices

42

43 Social apps work everywhere iphone android laptop ipad android

44 Performance

45 Building fast apps Data Batching FQL (fql.multi_query) Consider prefetching data (tradeoff) Using local storages to cache data (careful with privacy policy)

46 Building fast apps Static resources Asynchronous loading of connect JS library Cache image URL from Open Graph Consider using AppCache

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

48 Thank you! Velocity China, Dec 7 th, 2011, Beijing Xiaoliang David Wei : 9