2 - Personalize

This tutorial walks you through personalizing the Friend Smash game experience for a logged-in player. Before you start, make sure you've set up authentication.

This tutorial walks through these steps:

1. Change the title screen
2. Change the gameplay

Step 1: Change the title screen

Once a player successfully logs in, we should show their name and profile picture on the front menu of the game. This will make the experience feel instantly personalized.

Firstly, locate and open the core.js file, which resides in the friendsmash/scripts directory. At the top of file you should see a boolean defined as follows: g_useFacebook = false;.
This boolean controls whether the game executes a code-path that we will now build out, implementing Facebook's key social features. Change g_useFacebook to true.

Next, open the ui.js file, also located in the friendsmash/scripts directory. This is where we will be doing the bulk of our work.

Toward the top of the file you should see a function named createMenu(). This function is called when the game first loads and does some basic setup to display the game's front menus, including the game's container and the play button. Toward the bottom of the function, you should see an if block that looks like so:

if (g_useFacebook) {
    ...
} 

Inside the if statement (note: not the lower 'else' section), you should see code that creates 'Brag' and 'Challenge' buttons. We will cover these functions later in this guide, but for now, scroll to the bottom of the if block and copy/paste in the following code:

FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        gPlayerFBID = response.authResponse.userID;
        welcomePlayer(gPlayerFBID);
        showScores();
      }
});

Here, we ask the Facebook SDK for Javascript for the login status of our active player. As we implemented a login redirect in PHP in the previous section of this guide, we should get a response saying the player is 'connected'.
Inside our callback function, we extract into the global variable gPlayerFBID the unique Facebook player ID of the connected player. We'll use this ID in various places throughout our code when we're performing actions specific to our connected player.

Next, we call the function welcomePlayer, passing in our newly established player ID.

Finally, we call showScores(), which will show a customized social leaderboard for this player. We'll cover exactly how this is implemented later in this guide.

Scroll further down the file and you should find the: function welcomePlayer(uid) { method. Now that we have the player's unique Facebook ID, this is where we can execute some code to pull in the player's details from Facebook and instantly customize their experience. Inside the function you should see an empty if block like so:

if (g_useFacebook) {
}

Add the following code into the if block:

FB.api('/me?fields=first_name', function(response) {
      var welcomeMsg = document.createElement('div');
      var welcomeMsgStr = 'Welcome, ' + response.first_name + '!';
      welcomeMsg.innerHTML = welcomeMsgStr;
      welcomeMsg.id = 'welcome_msg';
      welcomeMsgContainer.appendChild(welcomeMsg);

      var imageURL = 'https://graph.facebook.com/' + uid + '/picture?width=256&height=256';
      var profileImage = document.createElement('img');
      profileImage.setAttribute('src', imageURL);
      profileImage.id = 'welcome_img';
      profileImage.setAttribute('height', '148px');
      profileImage.setAttribute('width', '148px');
      welcomeMsgContainer.appendChild(profileImage);
  });

This code performs the following steps:

• Use the FB.api method to make an HTTP GET request to the Open Graph for details about the logged in player. This is available at the graph endpoint http://graph.facebook.com/me. Here we are specifically asking for the player's first name, by using the fields=first_name path extension. In order to execute this request successfully, we need to pass to Facebook the User Access Token, granted by the player to Friend Smash when they authed. However, you will notice that we aren't actually passing in a User Access Token explicitly anywhere. This is because both the JavaScript SDK does this automatically inside FB.api.
• Start the request and define a callback function which will be executed when the request returns a response. Inside the callback function, we're going to create two elements to place onto our page, a welcome message, which will include the player's first name, and an image, which we'll set to be their profile picture. Therefore...
• Create a new html div element named welcomeMsg, which will act as the container for our welcome message.
• Set the welcomeMsg's html to contain a string welcoming the player. We extract their first name from the Facebook response via response.first_name.
• Append the welcome message into the DOM.
• Then, create an image url to be the player's profile picture. We can formulate this url by using the player's unique player ID, which was passed to the welcomePlayer function. See the line: 'https://graph.facebook.com/' + uid + '/picture?width=256&height=256';.
• We then create the img html element, with the source url ( src ) parameter set to our formulated profile picture url. We then set some other basic properties on the image such as width and height.
• Finally, we also append the newly created image to the DOM.

Save the edited file and then open the page inside canvas by navigating to https://apps.facebook.com/YOUR_APP_NAMESPACE. The App Namespace was specified when you initially created the app on the Facebook Developer Site. Hopefully, if your canvas url is set correctly, the game will load into the Facebook canvas chrome. If you haven't done it previously and you are redirected to the Login Dialog, accept the permissions and head back to the game. You should now see the game has been updated to include your profile picture and first name, along with some additional buttons.

We've already gone a long way to making the game experience more social. Next up, we'll change the gameplay of Friend Smash to be social by design.

Step 2: Change the gameplay

If you click the play button now, you'll see the game is somewhat broken. That's because, by changing the g_useFacebook boolean to true, we've instructed the game that we should obtain our 'smash target' from the player's friends' data on Facebook, rather than from a celebrity. However, we haven't written code to fetch a friend's data yet. Let's do that now:

The code we need to change is located in a function named function initGame(challenge_fbid, challenge_name) inside the game.js file. This function is executed when a new game is about to begin. Open game.js now (it resides with the other scripts you've been working with inside friendsmash/scripts), and find the initGame(challenge_fbid, challenge_name) method.
About two thirds of the way through the function, you should see this code (truncated for clarity):

if (challenge_fbid == null)
{
    if (g_useFacebook) {
    }
    ....

Inside the if (g_useFacebook) { if block, copy/paste in the following code:

FB.api('/me/friends?fields=id,first_name', function(response) {
    var randomFriend = Math.floor(getRandom(0, response.data.length));
    gFriendID = response.data[randomFriend].id;
    gSmashUIText.innerHTML = "Smash " + response.data[randomFriend].first_name + " !";
});

These steps occur when this code executes, at the start of the game in social mode:

• Using the FB.api method, make an HTTP GET request to the Open Graph for details about the player's friends. This is available at the graph endpoint https://graph.facebook.com/me/friends. Note that we're getting ahold of the friends' Facebook IDs and first names.
• If this call returns successfully with a valid result, select a random person from the player's friend list, represented as an array response from the request. We do this using the getRandom helper function, declared lower in the game.js file.
• Once a random friend has been selected, extract their Facebook ID and name.
• Set the gSmashUIText.innerHTML text label with the instructional text: 'Smash FRIEND_NAME!'

Save the file, refresh the game and click the play button. The game should now select a random person to smash from your friend list and make them the subject of the smashing. Their profile picture should fly across the screen and their name should appear in the top left of the game's canvas! If you are interested in how the friend's profile picture is downloaded, take a look inside the spawnEntity function inside game.js. Specifically, observe how this line: newEntity.init("https://graph.facebook.com/" + gFriendID + "/picture?width=96&height=96", true); creates a new object within the game, based upon the friend ID provided at random from our list of friends.

Next steps

In a few short steps we have created a socially-enabled game, which is more fun to play and feels more personalized. Next, let's implement invites and challenges with requests to get better organic app distribution through Facebook.