Mobile

:

How mobile games can plug into Facebook  for massive growth
Ali Parr Partner Engineer, Games

+ million monthly active mobile users (as of June

)

M
People

Mobile users are typically highly engaged & active

M
People

year

years

years

Facebook enables social apps on mobile
Goals for the mobile developer
▪ Acquisition

▪ Engagement

Spotlight: Wooga’s Diamond Dash - Mobile
https://www.facebook.com/DiamondDashGame

Facebook users are x more likely to spend On average, increase in spend from Facebook users

Spotlight: Freshplanet’s Songpop - Mobile
https://apps.facebook.com/songpop/

of mobile users login with Facebook. Facebook users spend more money & time than non-Facebook users.

Spotlight: BitRhymes’ Bingo Bash HD - iPad
https://apps.facebook.com/vegas-app/

On average, Facebook users play longer and play more sessions than other users, and spend more in game.

Demo: Introducing Friend Smash
▪ Sample application we’ll be building on today ▪ Building mobile integration
▪ iOS focus in this talk but same principle for Android

▪ Open Source - available at:

https://github.com/aliparr/friendsmash

What will we cover?
▪ Facebook SDK setup & login ▪ Requests ▪ Feed ▪ Graph API for Scores ▪ Cross Platform ▪ App Center

Our Native SDKs...

http://developers.facebook.com/android/

http://developers.facebook.com/ios/

Facebook SDK . for iOS
▪ Better user session management ▪ Modern Objective-C features support ▪

Automatic Reference Counting (ARC), Blocks,

▪ Ready to use UI views ▪

FBProfilePictureView, FBPlacePickerViewController, FBFriendPickerViewController

▪ Improved API Support ▪

Improved latency through batching, Strongly typed

iOS Integration
▪ Coming Soon ▪ Native Facebook support within the OS !

▪ Will offer login functionality

▪ Facebook SDK offers much richer feature set

▪ Continue to use Facebook SDK for full functionality

Facebook Login
The first step in enabling most of Facebook’s mobile functionality.

Login

Demo: Enabling Single Sign-On
. Configure your dev app settings

Enabling Single Sign-On
a. Add Facebook SDK Framework

Drag the FacebookSDK.framework folder from the SDK installation folder into the Frameworks section of your Project Navigator.

Enabling Single Sign-On
b. Add Facebook Resource Bundle

Drag the FacebookSDKResources.bundle file from the FacebookSDK.framework/ Resources folder into the Frameworks section of your Project Navigator.

Enabling Single Sign-On
c. Add SQL support

Add the ''-lsqlite . '' SQL library to the list of build dependencies:

Enabling Single Sign-On
d. Add the Facebook App ID details to your .plist
▪ ▪

Create a key called FacebookAppID with a string value, and add the app ID there. Create an array key called URL types with a single array sub-item called URL Schemes. Give this a single item with your app ID prefixed with fb:

Multiple iOS Apps? Use URL-scheme-suffixes...
▪ ▪ ▪

Typical scenario is free & paid. You want to launch the right one... Define ‘urlSchemeSuffix’ and pass into initWithAppId:urlSchemeSuffix:andDelegate: method
appDelegate.session  =  [[FBSession  alloc]  initWithAppID:@"480369938658210"                                                                                                permissions:permissions                                                                                                urlSchemeSuffix:@"free"                                                                                                tokenCacheStrategy:nil];

Modify the URL Schemes entry in plist from fbYOUR_APP_ID to fbYOUR_APP_IDYOUR_URL_SCHEME_SUFFIX and update developer app settings

Enabling Single Sign-On
. Create a session and hookup login
#import  <UIKit/UIKit.h> #import  <FBiOSSDK/FacebookSDK.h> @interface  AppDelegate  :  UIResponder  <UIApplicationDelegate> @property  (strong,  nonatomic)  FBSession  *session; @property  (strong,  nonatomic)  UIWindow  *window; @end -­‐  (BOOL)application:(UIApplication  *)application                        openURL:(NSURL  *)url    sourceApplication:(NSString  *)sourceApplication                  annotation:(id)annotation  {        return  [self.session  handleOpenURL:url];   }

Enabling Single Sign-On
. Create a session and hookup login
void  GameController::FB_CreateNewSession() {        AppDelegate  *appDelegate  =  [[UIApplication  sharedApplication]delegate];                          NSArray  *permissions  =  [[NSArray  alloc]  initWithObjects:                                                                                        @"email",  @"publish_actions",                                                                                        nil];        appDelegate.session  =  [[FBSession  alloc]  initWithPermissions:permissions]; }

Enabling Single Sign-On
. Create a session and hookup login
void  GameController::FB_Login() {        AppDelegate  *appDelegate  =  [[UIApplication  sharedApplication]delegate];        [appDelegate.session  openWithCompletionHandler:^(FBSession  *session,                                                                                                            FBSessionState  status,                                                                                                            NSError  *error)  {            if  (status  ==  FBSessionStateClosedLoginFailed  ||  status  ==  FBSessionStateCreatedOpening)  {                  [appDelegate.session  closeAndClearTokenInformation];                  appDelegate.session  =  nil;                  FB_CreateNewSession();            }            [FBSession  setActiveSession:  session];                                      UpdateView();        }]; }

Facebook Login - Best Practices
▪ Make Facebook login prominent

▪ Up-sell on the value of connecting

▪ Bring user’s friends in by default

Let’s build it!

Straight away, your app...
Gets easy login Can access friends Gets a bookmark Appears in Search

Straight away, your app...
Gets easy login Can access friends Gets a bookmark Appears in Search

Let’s focus on distribution...
Social Channels

Requests 1:1 Communication between users ▪ Lights up notification jewel

Feed

Post to user’s Timeline & appears in News Feed

Open Graph Structured content, Aggregations ▪ Appears in News Feed ▪ Scores & Achievements

User Flow from Social Channels

We’ll launch your native app, if installed Otherwise, we’ll send the user to the app store

What will we cover?
▪ Facebook SDK setup & login ▪ Requests ▪ Feed ▪ Graph API for Scores ▪ Cross Platform ▪ App Center

Requests
Use cases: Invites, gifting, missions, competitions, tournaments....
Sending Receive Push Notification Light up notification jewel

Requests
Use cases: Invites, gifting, missions, competitions, tournaments....
Sending Receive Push Notification Light upin notification list Appear notification jewel

Requests
Use cases: Invites, gifting, missions, competitions, tournaments....
Receive Push Notification Cross-Platform Light up notification jewel Appear in notification list (Web / iOS / Android / Mobile Web)

Requests
Implementation is easy, let’s do it!

NSMutableDictionary*  params  =  [NSMutableDictionary  dictionaryWithObjectsAndKeys: [NSString  stringWithFormat:  @"I  just  smashed  %d  friends!  Can  you  beat  it?",  nScore],   @"message",  nil];                         [appDelegate.facebook  dialog:@"apprequests"  andParams:params  andDelegate:nil];

Requests
Pro Tip - Frictionless Requests
▪ Will automatically send future requests without

prompting user
▪ Useful for Games to send a “Your Turn”

notification, to send lives/gifts to friends.

Requests
Pro Tip - Customise

Build your own friend selector for better results

▪ Use your game’s artwork for a more consistent

user experience
▪ Native dialogs will perform better

▪ Can customise selected friends...

Requests
Pro Tip - Filter
▪ What if you don’t support all platforms?

▪ Restrict Requests only to users that support your platforms... ▪ Can query the set of devices a user has via the Graph API

GET https://graph.facebook.com/USER_ID?fields=devices

What will we cover?
▪ Facebook SDK setup & login ▪ Requests ▪ Feed ▪ Graph API for Scores ▪ Cross Platform ▪ App Center

Feed
Use cases: Bragging...
▪ 1:Many Communication

▪ Exactly the same as on desktop web

▪ Publishes on user’s Timeline, appears in News Feed. ▪ Unstructured content

Feed

Feed Dialog
Implementation is easy, let’s do it!
NSMutableDictionary  *params  =  [NSMutableDictionary  dictionaryWithObjectsAndKeys:  @"Checkout  my  Friend  Smash  greatness!",  @"name",  @"Come  smash  me  back!",  @"caption",  [NSString  stringWithFormat:@"I  just  smashed  %d  friends!  Can  you  beat  my  score?",  nScore],  @"description",  @"https://young-­‐atoll-­‐3559.herokuapp.com/images/friendsmashlogo_small.jpg",  @"picture",  nil];                         [appDelegate.facebook  dialog:@"feed"  andParams:params  andDelegate:nil];

Graph API for Feed
▪ Same concept as using the dialog ▪ Requires ‘publish_actions’ permission

▪ Configuration parameters identical - message, picture, name, description, caption,

place, link etc
▪ Create your own dialogs, same benefits as with a custom friend selector

curl -F 'access_token=...' \ -F 'message=I am the best friend smasher around.' \ https://graph.facebook.com/USER_ID/feed

Deep Linking
▪ Recap - Feed & Timeline stories link

direct to native app.
▪ Don’t just send users to a generic

title screen, provide context.
▪ Parse target_url to provide

contextual experience.

Deep Linking
Implementation is easy, let’s do it!
NSMutableDictionary  *params  =  [NSMutableDictionary  dictionaryWithObjectsAndKeys:            @"Checkout  my  Friend  Smash  greatness!",  @"name",            @"Come  smash  me  back!",  @"caption",            [NSString  stringWithFormat:@"I  just  smashed  %d  friends!  Can  you  beat  my  score?",  nScore],  @"description",            @"https://young-­‐atoll-­‐3559.herokuapp.com/images/friendsmashlogo_small.jpg",  @"picture",            [NSString  stringWithFormat:@"https://www.mydomain.com/challenge_brag_%d",  m_nPlayerFBID],  @"link",            nil];                         [appDelegate.facebook  dialog:@"feed"  andParams:params  andDelegate:nil];

What will we cover?
▪ Facebook SDK setup & login ▪ Requests ▪ Feed ▪ Graph API for Scores ▪ Cross Platform ▪ App Center

Graph API for Scores
▪ Simple API specifically for games ▪ Post a positive integer score per player

▪ We generate interesting stories automatically

▪ Publishes on user’s Timeline, appears in News Feed

▪ N.b. Requires a server component (prevents cheating)

Publishing Scores

Publishing Scores
Implementation is easy, but there are a couple of steps...
Client Side

NSMutableURLRequest  *request  =  [NSMutableURLRequest  requestWithURL:[NSURL  URLWithString: [NSString  stringWithFormat:@"http://www.freeeel.com/friendsmash/og.php?score=%d&uid=%d",   nScore,  m_nPlayerFBID]]];                         [request  setHTTPMethod:@"POST"]; [[NSURLConnection  alloc]  initWithRequest:request  delegate:nil];

Publishing Scores

Server Side

Managing Scores
Use cases: Tournaments...
▪ Can easily delete scores, either per-user or for all users ▪ Great for weekly tournaments

Delete individual user score
DELETE https://graph.facebook.com/USER_ID/scores/

Delete all user scores
DELETE https://graph.facebook.com/APP_ID/scores/

What will we cover?
▪ Facebook SDK setup & login ▪ Requests ▪ Feed ▪ Graph API for Scores ▪ Cross Platform ▪ App Center

Cross Platform

Enabling Cross Platform
Same App ID

Bootstrap a new platform
King’s Bubble Witch Saga
▪ Successful canvas game ▪ Launching iOS version

▪ How do we take advantage of existing player base?

Bootstrap a new platform
King’s Bubble Witch Saga
▪ Use same Facebook APP ID ▪ Moment SSO is turned on: ▪ All existing users get mobile bookmark & search ▪ All iOS users start to receive notifications from

requests ▪ Native Facebook iOS App will launch game from Timeline and Feed
▪ Build continuous experience...

A Continuous Experience
King’s Bubble Witch Saga
▪ Same features on mobile as on canvas ▪ Facebook connected players sync: ▪ Progression ▪ Friends scores ▪ Purchases

▪ Non-Facebook connected players: ▪ Start from scratch

What will we cover?
▪ Facebook SDK setup & login ▪ Requests ▪ Feed ▪ Graph API for Scores ▪ Cross Platform ▪ App Center

App Center
▪ Also available on Mobile ▪ Send to mobile button especially powerful

Takeaways
▪ Facebook is a growth engine for both Android and iOS apps ▪ Getting started is simple ▪ Implement login to get distribution ▪ Effective social channels for additional distribution ▪ Requests, Feed, Open Graph ▪ Cross-platform enabled ▪ Bootstrap existing audiences

Resources
▪ Facebook SDK 3.0 for iOS ▪ Available at: https://developers.facebook.com/ios/ ▪ Facebook SDK for Android ▪ Available at: https://developers.facebook.com/android/ ▪ Friend Smash! ▪ Available at: https://github.com/aliparr/friendsmash/ ▪ Developer documentation ▪ Available at: https://developers.facebook.com/docs/