Chapter 10
Facebook App
10.1 Source Code
All the distribution project files and examples are available at the website http://HTML5GameEnginesBook.com/. All the code, graphics, and sound are licensed free for personal and commercial use (MIT and CC-BY-3.0). However, for this chapter, it is recommended to use the Heroku base as your starting point for your game.
10.2 Introduction
The focus of Part III of this book is the various ways to run HTML5 apps offline and purchase them through app stores. Therefore, it seems odd to include a chapter about Facebook. Our games will not run offline with Facebook. However, the extremely large audience on Facebook (arguably the world’s biggest web site [70]) trumps the offline requirement to be included in Part III.
We want our game in front of as many people as reasonably possible. Facebook attracts lots of gamers, and it would behoove us to have our game available to users within their preferred medium of entertainment, particularly if there is a strong social aspect to the game. Facebook is not difficult to support. Like the Chrome Web Store chapter, this chapter will be very process-driven.
10.3 Setup
Naturally, the first step is to get a Facebook account. Chances are high that you already have one (BTW, this book’s Facebook page is located at http://facebook.com/HTML5GameEngines). The next step is to go through the developer registration process. Follow these steps:
-
Visit the Facebook Developer Page:
Go to https://developers.facebook.com/apps. When you navigate to the Facebook developer portal, you will see either your dashboard if you have an app, buttons to create an app, or a “Register Now” button to get started. If you have not visited this page before, you will probably see Figure 10.1. -
Sign up as a Facebook Developer:
Facebook developer system requires deeper verification than acknowledging an email. Fill out the related information and give Facebook your phone number or a credit card for identity verification. See Figure 10.2. - Install the Developer App:
The Facebook developer app is the starting point to getting apps on Facebook.
Once you work through the registration process, next time you visit the developer portal, your “Register Now” button will become a “Create an App” button. The welcome screen is now a dashboard. See Figure 10.3.
Facebook has essentially developed its own language for developing web apps on its platform. They have a very rich and diverse API that can fill many books (and it does). One word used a lot is “Canvas.” That is their term for content presented to users when they visit a page. We will be using a Facebook canvas to develop our Facebook game, and the Facebook canvas has little to do with our HTML5 canvas. Fortunately, we don’t necessarily have to be too concerned with the bulk of the Facebook language (Graph API, Social Channels, Facebook Credits, etc.) to get our game loaded and running.
10.4 App Registration
Now that we are registered as a Facebook developer, we need to register our app. Click new app. Type in the name, namespace, and check if you would like free hosting by Heroku. Namespace is a unique identifier similar to Android and iOS app identification. The difference is that only letters and underscores are allowed. Finding a name that is not taken, particularly one called “test app”, is difficult. You may need to get creative or just use gibberish if you are simply testing. See Figure 10.4. In this book, we will be using Heroku.
10.4.1 Heroku Setup
Heroku has been the main app hosting partner for Facebook since late 2011 [71]. They have a diverse set of platforms to choose from, such as PHP, Python, Node.js, and Ruby. Node.js is a rare and welcomed choice from hosting providers. If you are building a multi-player game, which is common for social games, Node.js handles it well due to the architecture of the environment. This book does not go into detail about Node.js. Instead, we will be using normal PHP as our platform because we are already familiar with it after working with Impact. See Figure 10.5.
Once you save and submit, your app will be created instantly, and you will be taken to its hosting page. It will look something like Figure 10.6, and your Facebook app setup page will look like Figure 10.7. Your Heroku page comes prepopulated with lots of useful Facebook features, such as logging in, seeing a list of users, and more. For our purposes, we are only keeping app login.
Heroku uses a toolkit (which they call “toolbelt”) that includes SSH, Git (msysgit for Windows), and other utilities. They install into your system PATH and are used for developing and deploying your Facebook application. After installing their toolbelt, launch a command prompt and login. See Figure 10.8.
Then immediately follow the login with the Git clone command sent to you in your registration email. Your Heroku system is ready for development. You can edit the sample source code and push it back to Heroku when finished (“git push heroku”).
10.5 Tic-Tac-Toe on Facebook
Any game could run on Facebook. Our Tic-Tac-Toe game just happens to fit well because Facebook IFRAME apps must run at 720 pixels width to not need to scroll. Our Tic-Tac-Toe game runs at 600, so we are good. To get our app in there, we need to load index.php and replace the content with our game. Note that there is nothing particularly remarkable about this file. We could just replace this with our entire tictacoe.html as-is, and it would work fine. However, then we wouldn’t be making use of Facebook’s services.
First, find the JavaScript includes and add the CreateJS suite. See below:
<script type =" text / javascript "
src ="/ javascript / jquery -1.7.1. min.js"></ script >
<!-- Added Tic Tac Toe -->
<script src =" createjs -2013.05.14. min.js"></ script >
<script src=" tictactoe_easeljs .js"></ script >
Next, clear out the unneeded tags, the body “onload” event, and the login link. See Listings 10.1. After you make the changes, run these commands to push your changes to the server:
git commit -a -m 'your comment '
git push heroku
<body onload =" onload (); ">
<h1>Welcome to Tic Tac Toe .
<?php
if ($user_id) {
?>
Draw an X.</h1><br>
<canvas id=" canvas " width =" 600" height ="600"
style =" background - color :#000000 "></ canvas>
<?php
} else {
?></h1>
<div class ="fb -login - button "
data - scope =" user_likes , user_photos "></ div>
<?php
}
Listing 10.1. Facebook Tic-Tac-Toe body.
If the user is not logged in, he will be presented with a login link that launches the standard Facebook login window, as seen in Figure 10.9. If the user is logged in, the canvas with Tic-Tac-Toe will be loaded, as seen in Figure 10.10.
10.6 Summary
This short chapter did not touch any social aspects, which is one of the pillars of Facebook. Heroku includes the entire Facebook PHP SDK, JavaScript SDK, jQuery, and sample code widgets to get you going. Now that you know how to get a basic app running on Facebook, experiment with the API to add social aspects. Facebook puts your app in sandbox mode to help you develop so you can release when ready. Also, within the code, Heroku shows how you can run your app on localhost so you don’t have to constantly push to their server. Experiment. Have fun with it.
The sample Tic-Tac-Toe game is included on the book’s website, but you are encouraged to use Heroku’s starting base instead. The next chapter is back to offline distribution through native desktop installers. It will cover both Mac and Windows.