Best Practices for Games on Facebook

 

Overview

Building games on Facebook typically involves developing an app for Facebook Canvas. A Canvas app is simply a web application loaded into an iframe and presented from within theapps.facebook.com domain, appearing to players as if the game is served from facebook.com.

In this document we will discuss some best practices to enable you to build seamless and immersive play experiences on Canvas, including:

  1. Authentication
  2. Sharing
  3. Invites
  4. Monetization
  5. Canvas Performance

If you’ve never built a game for Facebook Canvas, please see our Canvas Games Tutorial, which will walk you through the basics of setting up and configuring your web game on Facebook.

Authentication

Streamline your login implementation

Players on Canvas are guaranteed to be logged into Facebook. However, you’ll need to ask players to grant permissions to your game before you can use any of their information, or even know who they are. While there are a number of ways to do this, the preferred option is to use the JavaScript SDK to check for authorization using the FB.getLoginStatus method, and if necessary to request authorization using the FB.login method.

Remember that, until the callback you passed to FB.getLoginStatus has fired, you can’t make calls to methods that require an access token to be available (such as FB.api), so be sure to put those calls either in the callback or in code that runs only after the callback is complete.

You should treat our Facebook Login Best Practices as a checklist for your implementation. It will help you achieve a high-quality, trustable login experience across all of our supported platforms.

For an overview of login-related topics, please see our guide to Login for Games on Facebook.

Make your login flow more appealing

By using the JavaScript SDK to build a client-side login experience, you gain some extra control over what happens when the login dialog appears. By loading some simple game graphics in the Canvas iframe before launching the dialog, you can give players a taste of the game before they log in, helping them to make a more informed decision about granting permissions to your game.

Magic Kitchen, showing some gameplay assets behind the login dialog

Provide context when re-asking for permissions

If a player doesn’t grant a requested permission on login, or you’re asking for more permissions than when they last logged in, ask for them again in a way that helps them understand why they should grant them to your game.

Friend Smash explaining why the game is better with friends

For example, in Friend Smash, the game needs access to the user_friends permission in order to show one of the player’s friends as a ‘smash’ challenger. If the player hasn’t granted user_friends, the game gently reminds them that their experience will be better if they grant the permission. This gives players better context on the permission request and allows them to grant it when better informed about its benefit.

  • Login Overview

Use the same app ID on mobile and facebook.com

If your game exists on mobile platforms as well as on Facebook, make sure to use the same Facebook App ID on each platform. When a player grants permissions to your app on one platform, they won’t have to grant any extra permissions to play that app on other platforms.

Additionally, by using the same app ID for your mobile game, players on App Center will see a ‘Send To Mobile’ button beside the ‘Play Game’ button, which will send a notification directly to their mobile device prompting them to install your game on that device.

Data from our partners shows that players who play the same game on both web and mobile are consistently more highly engaged than players who play on a single device.

Provide a continuous experience

When a player logs in to a game using their Facebook account, they often expect that their game state is maintained when they log in next time. If it makes sense to provide a continuous experience in your game, you can use Facebook data to assist in providing this experience.

By logging in with Facebook, your players are providing you with a consistent ID that you can then use to persist their experience for future game sessions. Further, this ID is consistent across mobile and web, so you can use this to synchronize their experience across platforms.

Display prominent social context

When a player grants permissions to your game, you can get information about the player and their friends who play your game, and use that to provide a social context within the game, which helps players feel more engaged.

Some apps do this by providing a friends’ progress bar UI in the game. Others display a scoreboard positioning the player amongst their friends.

The friend bar in Dragon City

Adding social context to your game makes players feel more connected.

Prioritize your localizations using Insights

By looking at Insights for your game, you get detailed demographic information about your players and their locales. Keep an eye on this information regularly, and make sure that your game’s content is localized for the most prominent locales.

Demographic information about player languages is available in Insights

Sharing

Define sharable moments

As players make progress in your game, they’ll often want to share this progress with their friends. When designing your game, make sure to define moments in the gameplay that will encourage sharing. These moments might be a new high score, a level completion, or unlocking new inventory items.

Ensure that players can share these moments easily when they occur, by presenting a share button along with the announcement in-game. The more interesting these sharable moments are, the more likely they are to attract new players from your players’ friends.

The native share dialog, as seen in a browser

Create explicit Open Graph stories

Open Graph stories allow players to describe their actions in your game in a structured way. However, not all stories are created equal. Actions that happen without the player taking extra steps to share are considered implicit actions, and the stories they create get limited distribution.

When a player takes extra steps to share their actions, you can mark them as explicit, indicating that the player made a conscious choice to share them. Stories created by explicit actions create carry more weight due to the increased intent behind their creation, so they get much more distribution than stories from implicit actions.

While implicit actions can be published for things like leveling up and gaining new powerups, explicit actions should be published at key sharable moments.

By building an integrated sharing experience, you can make it easy for players to share moments within your game. However, not all players will give your game permission to write Open Graph actions on their behalf. By catering for these players with an alternative sharing flow, you can maximize virality.

  • Explicitly shared Open Graph stories

Offer multiple ways to share

With the Share Dialog on Android, iOS and Canvas, you can provide an alternative two-step sharing mechanism to players who don’t grant write permissions to your game. When a player reaches a moment that they want to share, you can check the permissions they’ve granted, and ifpublish_actions hasn’t been granted, show them a button that launches the native dialog. The Native Share Dialog supports both Open Graph stories and link-based feed posts.

A sharable moment in Candy Crush Saga
  • Native Share Dialog

Show engaging content

When a player chooses to share their content, this gives your game a chance to gain new audiences. Shared content is often the first thing that players’ friends see from your game.

Make sure that your content is enticing in the context of a player’s friend who’s never seen your game before. If you have rich in-game characters, be sure to add these to your images, and don’t reuse imagery for multiple objects.

Open Graph stories in Criminal Case

Invites

Make invites and requests easy

Invites and requests sent by your players to their friends are an important acquisition and retention channel. Make sure that it’s easy for players to invite their non-playing friends to play the game, and to request assistance or items from playing friends in order to keep them engaged.

Many games do this by adding a friend bar to provide social context along with a consistent request / invite interface. Other games prompt players to invite their friends to help when they run low on lives or resources. Choose an approach which best suits your game.

Asking for lives via requests in Candy Crush Saga

Build a custom multi-friend selector

When players send requests & invites, they’ll usually want to target these to specific people. Facebook provides a simple dialog that allows players to filter and select the specific friends they want to target, but you can create your own custom filters based on sets of friend UIDs to help players select subsets of their friends quickly and efficiently. Those filters can be based on in-game context, for example friends who played recently, or friends who’ve reached a certain level.

You may find it preferable to build your own custom multi friend selector that matches the look & feel of your game. In this case, you should always have provide players with the ability to search for friends by name, or by filters. Finally, to ensure policy compliance, you should never force players to select all friends when using a multi friend selector.

  • Multi-friend selector

Enable frictionless requests

By using frictionless requests, players can opt to not be prompted when sending repeat requests to friends. This cuts down the requests flow by a click, and is easy to enabled. Frictionless requests are especially useful in games that rely on requests for progress, such as turn-based games.

Frictionless requests in Candy Crush Saga

Use App-to-User notifications efficiently

You can use App Notifications to alert groups of players or individual players about events inside your game that require their attention. For example, App Notifications could be used to warn a player that their base is under attack, or inform them that a new item or level pack is available in the game.

App Notifications from War Of Mercenaries and Criminal Case

While this is a powerful re-engagement channel, it requires careful use in order to keep from being spam-throttled. Facebook enforces a minimum threshold for clicks on notifications sent, and if your game drops below this threshold, you will be unable to send further notifications. This threshold can be seen in the insights for your app.

App Notifications click-through Rate graph in Insights

To avoid dropping below the threshold, start by sending notifications to your most engaged players only, and send a small number of notifications at first to measure the clickthrough rate. Use player locale information to send notifications to players during their most engaged hours. Once your clickthrough rate is maintained above threshold, you can start to expand your audience.

  • App Notifications

Monetization

Optimize your store

The price of your items in your in-game store plays a big part in converting players to payers, so make sure to choose price points that are sensible and appealing to players.

When showing multiple package prices, make sure to highlight the best-value item, and show players the saving they make by choosing this item.

Price points in Criminal Case

Localize pricing

With Local Currency Payments, it’s possible to do granular localized pricing. Use demographic targeting to localize prices for your most popular regions.

By supporting pricing in local currency, you can simplify the purchase experience, giving you more flexibility, and giving your players a way to make purchases in games using their local currency.

You can find in-depth documentation here:

  • Local Currency Payments Overview
  • Payments Tutorial

Sales & Events

Run sale events to help convert players into payers. These work well when linked to seasonal holidays. You can also run extra value weekends where in-game currency goes further than usual, enticing players to purchase and spend in-game currency in larger amounts.

Payer Promotions

Payer Promotions help you get players to pay more in your game. Facebook sponsors this feature, enabling you to offer certain people a discount on your game’s virtual currency, such as $3 of value for free.

Offer Daily Rewards

Rewarding players for logging in on consecutive days is a great way to increase retention but also helps monetization as players get a sense of the benefit of having more coins/currency within the game.

Daily rewards in Slots Craze

Canvas Performance

Design for a fluid Canvas size

Facebook supports Fluid Canvas, to allow a developer to use as much of the Canvas page real estate as possible while maintaining the Facebook Chrome (header) and right sidebar (ticker). With this feature, developers can increase the dimensions of their game and provide a full-screen-like experience. One major benefit of this approach is that the Facebook Dialogs (Feed, Requests, etc.) can appear seamlessly without the jarring user experience that can occur when using Full Screen mode.

Fluid Canvas is not currently supported for Unity games. If your game cannot support variable height and width due to image asset restrictions or game balance (e.g. a 2D side scroller), consider using a background color or image that fills the entire Canvas space while centering your game.

Handle Dialogs and Popups over Flash games

If your game uses Adobe Flash, Facebook will hide all Flash when dialogs and popups are triggered. This is to ensure that the Facebook DOM elements always have a higher z-index than other content. You can gracefully handle this by specifying a callback function for when Flash content gets hidden, and passing it to the hideFlashCallback parameter in the FB.init method on the JavaScript SDK.

When this function gets called, you may want to pause gameplay and display a placeholder graphic instead of the Flash content. For more details read our guide on Handling Dialogs and Menu Popups.

The setURLHandler method in the JavaScript SDK allows a developer to assign a callback method which will be executed whenever a player clicks a link that would direct them back to the current Canvas URL. For example, consider a player is currently playing “My Great Facebook Game” on Canvas when they notice a Request notification from their friend asking for help in “My Great Facebook Game”. Normally clicking this request would reload the page and reset the player’s current state.

If the developer implemented setURLHandler their callback method would be called, passing in the target URL as a parameter. This could then be used to transition the current game into a state to process the request. In the example above rather then reloading the page, the game could immediately prompt the player to assist their friend, a quick and seamless user experience.

function onURLHandler(data) {
  alert(data.path);
}

FB.Canvas.setUrlHandler(onURLHandler)

Optimise performance with static resources

In order to improve the performance of your Canvas page, Facebook attempts to automatically determine which static resources are important to your game’s load time, and fetches them to the browser before contacting your server to get the contents of the iframe. Currently, it does this for Microsoft Internet Explorer versions 8-9 and Google Chrome, although we expect to add more browsers in the future.

Facebook’s automatic systems will provide a modest performance improvement, but you may be able to further improve page load times by explicitly specifying which resources should be prefetched. For best results, we recommend that you specify the largest static resources that are related to the execution of your app (CSS, JS, and SWF files).

To see what resources are being prefetched, you can retrieve the staticresources connection on the Graph API Application object. You can also find this information on the HTML source of the canvas page, although the Graph API method returns much more information.

To influence what is prefetched, you can include the Javascript SDK and call these methods on each page load: FB.Canvas.Prefetcher.addStaticResource and FB.Canvas.Prefetcher.setCollectionMode.

It’s important that your static resources have the appropriate HTTP headers, otherwise Facebook will ignore them. See FB.Canvas.Prefetcher.addStaticResource for details.

Finally, you can measure the page load performance using FB.Canvas.setDoneLoading. This data will be available in the Insights tool.

Source taken from facebook