Games on Facebook Tutorial

Overview

Facebook enables game developers to add social features into their games, providing rich social interactions between players while improving virality and enabling organic growth. This tutorial will show you how to implement Facebook's key social technologies into an existing game on the web.

We'll build on a sample game, Friend Smash, which was built in HTML5 and Javascript and runs in any modern desktop web browser.

The game initially has no social functionality, so we'll build out a full Facebook integration and use Facebook's technology to give users a better experience.

Setup

Friend Smash is open-source and available in Facebook's Samples on GitHub. Please download and extract the sample to follow along.

After you've extracted the GitHub sample, you should see two folders:

web-friend-smash/friendsmash This is the sample we will be starting with. It contains the basic friend smash game with no social features enabled.

web-friend-smash/friendsmash_complete This is the finished game with Facebook functionality. As you follow along in the steps below, remember you can also check your work against the code found within this folder to make sure you are on the right track.

In order to run the sample, you need the following:

• A Web Server that supports PHP (example: Heroku)
• A public URL for your game
• Your favorite browser

For speed and convenience, it might be worthwhile running a local webserver as you develop. Plenty of solutions exist on the web to help you get started, most of which are free and open source. Check out XAMPP as a starting point.

This tutorial will focus on the Facebook SDKs for Javascript and PHP and will mostly cover the development of the front-end, client-side portion of the game. There is a server-side component which provides some background services which will be discussed in passing, but most of this tutorial's focus will be on the player's experience in the browser. To complete this tutorial therefore, you'll need to be familiar with PHP, Javascript and the basics of programming for the web.

To begin, spend a little time getting familiar with the initial game. Once you have your web server up and running and hosting content from the web-friend-smash/friendsmash directory, navigate to index.php inside a web browser. You should hopefully see the game's front menu screen. Hit play and you'll see a simple game where celebrity photos launch on the screen. The goal of the game is to tap the right celebrity while their picture is still visible. If you miss 3 celebrity pictures or tap the wrong celebrity, the game ends and you're directed back to the title screen.

Next Steps

Though this is a little fun, the game would be more entertaining with social features. Ideally, you should be able to smash friend's pictures and interact with them on Facebook. We'll update the game to include these features in the next few steps.

Before you start development, create your Facebook App as described in Getting Started with Canvas.

This guide walks through the following steps:

1. Authenticate
2. Personalize
3. Invites and Requests
4. Bragging and Feed
5. Publish an Open Graph Story