So I decided to have a go at getting one of my mobile games up and running on Facebook’s site, chatting to other game developers they warned me to steer clear as its a pain and it will eventually break when they change to the next API release etc… Of course I didn’t heed their advice and went ahead and gave it a try. The main reason being that Facebook now host game content for you, so you no longer need to host it on your own web site using up your own meagre bandwidth and best of all you do not need to buy and manage SSL certificates, whats not to like.

Exporting to Unity WebGL

So the first thing I did was export a build to WebGL gave it a quick test. However I didn’t like the Unity logo, app name or full screen button at the bottom of the screen so I opened up the exported index.html and commented out the following lines of html to remove them and provide a clean clutter free view of my game:

[sourcecode language=”html”]
<div class="logo"></div>
<div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
<div class="title">Tens Junior</div>
<p class="footer">&laquo; created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> &raquo;</p>
[/sourcecode]

Set the screen resolution

Ok, I wasn’t happy with the default screen resolution that Unity exported my game at so I changed it, taking into account that my game will be shown in a frame on Facebook, so I changed the canvas width and height in the Unity WebGL export settings dialog to 480×800. Lovely, it now fits on a 1080 display.

Create a Facebook App for your game

So I now have an app that I can submit to Facebook and have it hosted by them, the next thing to do is to go and create a Facebook app. To do that head over to the Facebook Developer Site and create an app. When creating the app ensure that you add the Facebook Web Games platform and in settings ensure that you have WebGL and Simple Application Hosting enabled. In general settings also ensure that you at least provide App Name, Email Address, Privacy Policy URL, App Icon (1024×1024) and select the Games category.

Uploading your game to Facebook to be hosted

In the Facebook Web Games section, locate the Simple Application Hosting section, just beneath that there is a link named “uploaded assets”, click that link, a new browser tab will open which takes you to the Manage Hosted Asset section, click the add and setup button to the top right then under Hosting Type select Unity (WebGL).

Now go to your Unity exported WebGL folder and zip up all the files, this should include index.html, TemplateData and Release folders, ensure that index.html is in the root of the zip. Go back to Facebook Manage Hosted Assets section and click the Upload Version button, select the zip you just created then upload. The file will show up as processing, after a while this will change to Standby, at this point you can push your app to production by clicking on the small Move to Production button (If you want to later replace the build with a new version, simply move the build back to Standby by clicking the Move to Standby button, delete the build then re-upload a replacement.

Once the build is live you can visit your app url (see the Facebook Web Games Page URL in the Facebook Web Games section of your apps settings). Visit this URL and you will be able to test the game. Note that your game will not go live however until it is reviewed by Facebook and approved.

Getting reviewed

I am quite lucky with my game because I do not require any extra permissions. The game only logs into Facebook, uses the players profile picture and shares the players progress via the share dialog. To get the ball rolling you need to click the Add Products button to left hand side of the screen in app settings then select “App Centre”, fill out a bunch of info about the app including short / long description, app icons / screen shots etc. Once that is added you can submit for review. Note that if you need any additional permissions such as publish_action then you will need to provide additional info during submission.

Finally don’t forget to make your app public (go to the App Review section of the apps settings and click the button at the top of the screen, this will toggle your app between live and development mode).

The end result can be seen by taking a look at Tens Maths IQ Challenge on Facebook.