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.
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.
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:
This is the sample we will be starting with. It contains the basic friend smash game with no social features enabled.
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:
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.
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.
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: