Integrating with Facebook

With the game now uploaded to a server it is available for anyone in the world to play it. They can play the game, that is, if they know about it. One of the most difficult challenges any developer faces is getting the word out about their product. One of the easiest ways to spread the news is through social media sites, such as Facebook. GameMaker: Studio makes this easy as the functionality for connecting with Facebook is already integrated. We are going to add a Facebook login button to the frontend of the game, and we will add the ability for the player to post their scores to their Facebook walls.

  1. In order to use the Facebook functions, we need to have both a Facebook account and a Facebook developers' account. Go to http://developers.facebook.com/ and log in. If you do not have a Facebook account, it will prompt you to create one.
  2. Once we have logged in to the developers' page, we need to click Apps on the top menu bar. This will take us to the Apps page.
  3. Next we need to click on the Register as a Developer button. This will open a registration dialog that we need to go through. First we will need to Accept the Terms and Conditions, and then we need to supply a phone number to Verify the Account. This must be a valid number, as it will send a text message that is needed for verification. Finish the process as instructed.

    Note

    Always read the Terms and Conditions before you agree to them and ensure that you fully understand what it is you are legally agreeing to.

  4. Having completed the registration, we should find ourselves back on the Apps dashboard. There is a Create New App button close to the registration button. Click on it.
  5. In the Create New App dialog box, as seen in the next screenshot, we need to enter an App Name. This name does not need to be unique so long as we don't have another app with the same name. There are a few rules about naming conventions that you can read by clicking on the Facebook Platform Policies link. The optional App Namespace is for integrating into Facebook a bit deeper with app pages and using Open Graph, a notification tool. We will not need an App Namespace so we can leave it blank. We also do not need Web Hosting and can click Continue.
    Integrating with Facebook

    Note

    To learn more about Facebook Open Graph, App Namespaces, and more, check out the Facebook Developers API Documentation at https://developers.facebook.com/docs/reference/apis/.

  6. The next step is a CAPTCHA security check. Follow the directions and click on Continue.
  7. The app has now been created and we are on the Basic Info page. Here we can finish setting up how the game will be integrated into Facebook. Enter the base domain name of the game website in Basic Info | App Domains. This will allow the app to run on that domain and all subdomains. It should not include the http:// or any other element beyond the name of the root site.
  8. Under Select how your app integrates with Facebook, we need to select Website with Facebook Login, and then enter the exact URL where the game is located.
  9. Click on Save Changes as we are done with the basic info. The settings should look like the following screenshot with the appropriate domain information entered for your site:
    Integrating with Facebook
  10. Before we get back into GameMaker: Studio, we need to copy App ID: from the top of the Basic page.
  11. Reopen the game project and navigate to Resources | Change Global Game Settings.
  12. Go to the Facebook tab, as shown in the next screenshot, check the box for Use Facebook, and then paste the ID we copied into Facebook App Id. Click on OK.
    Integrating with Facebook
  13. We now have access to the Facebook app; now we just need to initialize it. Create a new script, scr_Global_Facebook, with the following code:
    facebook_init();
globalvar permissions;
permissions = ds_list_create();
ds_list_add(permissions, "publish_stream");

    We start by initializing Facebook, and then we create a global variable for a ds_list that will contain all the permissions we want to be able to request from Facebook. In our case we are just asking to be able to publish to the Facebook wall of the logged in user. All the options that are available can be found on the Facebook Developers' site.

  14. Open scr_Global_GameStart and execute the following line at the end:
    scr_Global_Facebook();

Adding a Facebook login button

Now that we have Facebook active, we can implement it into the game. We will start by adding a login button.

  1. Create a new Sprite, spr_Button_FacebookLogin, with Remove Background unchecked, load Chapter 9/Resources/Sprites/FacebookLogin.gif, and center the origin.
  2. Create a new Object, obj_Button_FacebookLogin, attach the sprite we just created, and then set Parent to obj_Button_Parent.
  3. Add a Mouse | Left Pressed event and attach a new Script, scr_Button_FbLogin_MousePressed, and have the user log in to Facebook.
    facebook_login(permissions);
  4. Open MainMenu and add a single instance of the button below the START button.
  5. Next, we need to let the players post to their walls. For this we will add another button to the score screen. Create a new Sprite, spr_Button_FacebookPost, with Remove Background unchecked, load Chapter 9/Resources/Sprites/FacebookPost.gif, and center the origin.
  6. The score screen is all code, so we don't need a new object, but we do need to add code to the existing scripts. Open scr_ScoreScreen_Create, and add a variable for the Y placement, width offset, and height offset of the button.
    postfb_Y = 340;
postfb_OffsetW = 64;
postfb_OffsetH = 16;
  7. Next we will create a new Script, scr_Menu_Button_FbPost, which will control the functionality.
    if (isVictory)
{
    status = facebook_status()
    if (status == "AUTHORISED")
    {
        draw_sprite(spr_Button_FacebookPost, 0, screenX, postfb_Y);
        if ((win_Y > postfb_Y - postfb_OffsetH && win_Y < postfb_Y + postfb_OffsetH))
        {
            if ((win_X > screenX - postfb_OffsetW && win_X < screenX + postfb_OffsetW)) 
            {            {
                draw_sprite(spr_Button_FacebookPost, 1, screenX, postfb_Y);
                if (mouse_check_button_pressed(mb_left)) 
                {
                    myTitle = "Destruct";
                    myCaption = "Play this game at yournamesite.com"
                    myText = "I just destroyed the " + room_get_name(room) + " Towers playing Destruct!";    
                    myImage = "http://yoursitename.com/Destruct/Thumbnail.gif"; 
                    mySite = "http://yoursitename.com/Destruct/"      
                    facebook_post_message(myTitle, myCaption, myText, myImage , mySite, "", "");                    
                }
            }
        }
    }
}
}

    We only want to post to Facebook if the player defeats a level, so we start by checking the win condition. We check the status of the Facebook connection, as we want to display the button only if the player is signed in. If the player is signed in, we draw the button on the screen and check to see if the mouse is hovering over it, as we did with all our other buttons. If the button is clicked, we create some variables for the message title, caption and text, an image, and a link back to the site. We then post a message to Facebook. The function also has two additional parameters that are for using more advanced Facebook actions, but we are leaving these blank.

    Note

    To see what advanced options are available, see the Facebook Developers' API Post page at https://developers.facebook.com/docs/reference/api/post/.

  8. In order to draw this on screen we need to reopen scr_ScoreScreen_DrawGUI and execute the script we just created:
    scr_Menu_Button_FbPost();
  9. Save the game and click on Create Application. It is OK to overwrite the existing project files.
  10. Open WinSCP and connect to the FTP server.
  11. Transfer all the files over to the server. Click on Yes to All when prompted to confirm the overwriting of the files.
  12. We also need to transfer over the image we want to include in the post. Open Chapter_09/Resources/Extras/ and transfer Thumbnail.gif over to the server into the Destruct folder.
  13. Open a browser and go to the game site. When the game loads up, we should see the new button just below the START button as shown in the following screenshot:
    Adding a Facebook login button
  14. Click on the Log Into Facebook button. A pop-up window, like the next screenshot, should appear. If nothing happens, check to see if the browser has blocked pop ups and unblock it. When the pop up does appear, we just need to sign into our Facebook account.
    Adding a Facebook login button
  15. Play a level successfully. When the Score screen appears we should see the POST TO FACEBOOK button, as shown in the following screenshot:
    Adding a Facebook login button
  16. Click on the button and then go to your Facebook page. We will see a new post that has been shared with the world, which will look like the following screenshot:
    Adding a Facebook login button

Congratulations! The game is now available for everyone to play and is being exposed to the world through Facebook. The goal for any developer is to create interesting games that everybody enjoys playing and is able to complete. But how do you know whether that is occurring? Are people getting stuck in the game? Is it too easy? Too hard? After all the hard work that went into making the game, it would be a shame to not know any of these answers. This is where analytics come in handy.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.188.227.4