In this article we will discuss how to get your HTML5 game onto Facebook. Before getting started you may want to look at the article Uploading Your HTML5 Game To A Web Host, as there it explains how to get your game onto the internet to start with. You will need to know how to do this before you can submit a game to Facebook itself.
WARNING! Please note that for publishing your game on FaceBook you will need access to a server with SSL certification (ie: the URLs for your site use the HTTPS protocol) or have access to a Public DropBox folder, since DropBox also uses HTTPS. For DropBox, you will need to have an older Free account, or if you are a new user, you will need to upgrade to Pro (or Business) to get access to the Public folder.
Become A Facebook Developer
To get your game onto Facebook, the first thing you will need (obviously!) is a Facebook account. You can sign up for one here: https://www.facebook.com/ Once you have your account, you then need to become a Facebook Developer.
A Facebook developer account extends your Facebook personal account with access to Facebook developer tools including Facebook application management. Visit the Facebook Developers homepage and click "Register Now" at the top of the page to add Facebook developer capabilities to your Facebook account. You must accept the terms of the Facebook Platform Policies and privacy policy to create an application.
Creating a Facebook application requires verifying a real person is associated with the Facebook account. You must associate a mobile phone number or a credit card with your Facebook account before receiving Facebook developer privileges.
You may then optionally share additional information about yourself, your current applications, and the types of applications you intend to create with your new Facebook developer account. You can edit your developer profile and contact settings through Facebook developer settings.
Congratulations! Your Facebook account now has developer privileges, so we can now go on to look at how to add an HTML5 game to your profile.
Register A New Application
From http://developer.facebook.com, click on Apps at the top of the page and select the "Create New App" option. This will then open a new window which prompts you for some basic details about your game.
You can name your application almost anything, although Facebook does apply a few rules, for example the name can’t contain the words "Face" or "Book". However you can use capitals and special characters.
Next you are asked to supply an app namespace. You use the app namespace to define custom Open Graph actions and as part of the application’s Facebook URL (ie: http: //apps.facebook.com/<app_namespace>). Make sure the app namespace is longer than 7 characters, contains no capital letters, and is unique among all applications on Facebook. Although it’s not required, it’s also probably a good idea to provide a namespace that is similar to the name you gave to your application.
Note that you can choose to make this a Test App. test apps have most of the same privileges that a published app has, only they are not visible to the public. You can find out more about Test Apps here: https://developers.facebook.com/docs/apps/test-apps/ it is recommended that you first create your game as a Test App, since it requires less details and fuss and you will want to test it first anyway before going "live" on Facebook. You can delete apps at anay time so there is no reason not to test first!
After you click Continue, Facebook performs a Captcha check to verify that you’re not setting up applications through an automated process.
You will then be taken to your App Dashboard page. Here you can configure your game, set details, create test accounts, track traffic... There is a lot of information available to you! However the first thing you want to do is go to the App Settings.
Settings
Before going any further, you'll want to fill out the settings for your game. For HTML5 games, Facebook requires that you host them elsewhere and then they will be shown within an iFrame on the Facebook page you create for them. However Facebook also requires that the game is hosted on a server with SSL certification, meaning that if you are hosting your game on your own site, you will have to buy this to be able to use the HTTPS protocol for URLs.
You can work around this limit if you have a DropBox account with a Public folder (you can access this either by upgrading to the Pro or Business version of DropBox, or if you have an older account with them). Dropbox links are all HTTPS so that makes them an ideal solution if you don't have your own server with the correct certificates.
So, from the Settings page, click the button labelled "+Add Platform" and select the FaceBook icon to show that you want the app to be part of the FaceBook pages.
This will then open a new section on the page for your game, where you need to fill in the following details:
The Canvas Page is the URL for the game, and while you are using a test app or until your game has been reviewed and approved for publishing, only you and your testers will be able to see it (more on testers later). Obviously we are not using Unity, so you can leave that option off.
Next you need to supply HTTP and HTTPS URLs for your game. Previously, you could supply only the HTTP link, but recent changes to Facebook means that you must supply an HTTPS URL otherwise you game will not be shown. it's worth noting too that the URL must end in either "/" or "?". So if the URL is for your "index.html" (which is what you would expect) you need to write it like this:
https: //macsweeneygames.com/games/catchthehaggis/index.html?
You can also fix the canvas width and height. The width can be either what you have set in your game, or fixed at 760px, however the height can be fixed to any size you require. In general you probably don't need to use these options.
With that done, click on the "Save Changes" button at the bottom of the page and your game will now be available for testing. you can copy and paste the link from this section into your browser and it should run as you expect.
Testing
If your app has been marked as a test app, or if your app is a production copy but not yet submitted for review and publishing, you can set up test users to play it. This is easily done from the "Roles" page (accessed from the menu buttons on the left).
Adding a tester is simply a case of clicking on the "Add Testers" button, then typing in the name of the Facebook user that you wish to select. They will then have access to your game.
Once testing has finished, you can create a final app listing for your game, and you should be able to assign it the namespace you reserved for the game. For more details see the documentation on test apps: https://developers.facebook.com/docs/apps/test-apps/
App Details
Your next stop (when ready to publish your game) should be the App Details window. The sections here describe what makes an app unique, display screenshots of the experience and let people login to start using the app. After people log in via an app details page, they’ll be sent directly to the app, whether it’s a web or mobile app.
Note that your app needs to have an app details page to become eligible for listing in the App Center. The app details page becomes the destination for people who search for your app on Facebook. To create your app details page, visit the App Dashboard and click the App Details tab in the left navigation.
App Info
You need to provide your app display name, its categories, tagline and description. The Detailed Description field is unique to the App Center and lets you add a longer, more detailed description. Before clicking the Submit button, make sure that your tagline does not contain your display name and your detailed description includes more detail than your short description.
Contact Info
Next, you need to complete the Contact Info section. In order to be listed in the App Center, you are required to enter a Privacy Policy URL, Terms of Service URL and either a User Support Email address or URL:
Listed Platforms
For HTML5 games, you then need to toggle the App Center Listed Platforms button for "App On Facebook" so that it shows "Yes".
You can ignore the Configure App Center Permissions part here, as since your app is a canvas app (HTML5), Facebook will not use this setting and will use the "signed_request" as the response type automatically.
Uploading image assets
You will need to upload icons, banners and screenshots for your app. These may vary based on the platforms the app supports and the image assets required will be displayed automatically in the App Details tab based on the supported platforms in the app's Basic Settings tab.
When creating your images, here are some guidelines to follow:
- Put the name of your app in the banner.
- Give important graphics some breathing space.
- Don't put logos and text against the border of images.
- Make sure banner images fill out the frame completely (and that they leave no white space, no rounded edges or no borders).
- Round the edges of icons. (We recommend that you use transparency with PNG files, not GIF.)
Refer to the examples that Facebook has here - App Center Guidelines - for help.
Screenshots
You need to submit at least three - and no more than five - screenshots for each platform that your app supports (out of web, Canvas, mobile web, iPhone, iPad, Android). These screenshots should display real game play and not contain any marketing materials or banners. App Center supports screenshot dimensions between 320 x 320 and 2048 x 2048 pixels.
If the aspect ratio of a screenshot doesn't fit with aspect ratio of the display box in App Center, it will be scaled so one dimension is perfectly fit to size and then cropped and centered accordingly. There are two designs for screenshots layout:
- One portrait and two landscape images, or
- Three landscape images
App Center will use the latter layout only if all three screenshots are landscape. Otherwise, the first layout is used and portrait screenshots always come before any landscape screenshots (so the first screenshot is always a portrait).
Submitting your App for the App Center
For your app to be listed in the App Center, it must meet the App Center Guidelines. Facebook reviews your app's images, additional app details, and URLs. If your app is rejected, they will explain why and give you suggestions for what to change. Once you make the changes they suggest, you can resubmit it.
Developers can preview their App Details page prior to submission by clicking the Preview link at the top of the page.
You submit your app by clicking the button at the top of the App Center section. Once it's submitted a message will be displayed indicating that the submission is pending review. This message will be updated if your app becomes listed in the App Center.
Once you have submitted your App Details page, the information in it can't be changed until your app is listed or you cancel the submission. Once your App Details page is listed in the App Center, all future changes to the page will also be subject to review.
The submission process is required for an app to be listed in the App Center, but all apps can continue to use the Facebook APIs and grow through bookmarks, requests, and sharing through the timeline and news feed. Submitting to the App Center is not a requirement, but it's highly encouraged, as the App Center provides a significant opportunity to promote your app.