Facebook - How to Invite a friend

1

Tagged

Stats

4,396 visits, 6,311 views

Tools

Share

Translations

This tutorial hasn't been translated.

Create a translation

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 24 Jan, 2013. Last updated 19 Feb, 2019

Introduction

Level: Intermediate to Advanced

Pre-Requisites:

1. Knowledge of Javascript and Facebook Developer Docs.

2. Read the tutorial on Facebook - How to get a list of friends

This assumes you have read the above tutorial listed in the pre-requisite requirements and are ready to implement a button that invites a player's friend to play your game. This tutorial also touches on how you can debug Javascript problems.

Edit Runtime.js

Open up runtime.js for your modified Facebook plugin and insert the code below to just before "pluginProto.acts = new Acts();". 

    Acts.prototype.InviteFriend = function (userid_, message_)
    {
       if (this.runtime.isDomFree || !fbLoggedIn)
          return;
       console.error("Before");	
       FB.ui({
          "method": "apprequests",
          "message": message_,
          "to": userid_,
       }, function(response) {
          if (!response || response.error)
             console.error(response);
       });
       console.error("After");
    };

Take a look at the code above. On line 1, the code Acts.prototype tells us that the InviteFriend function is an Action. It takes two parameters as input arguments to the function, they are: userid_ and message_.

Line 6 makes the all important call to FB.ui using the method "apprequests", the message defined by message_, and to the user defined by userid_. You can find out all about FB.ui, the generic helper for invoking Facebook dialogs. In our case, the method "apprequests" will create an instance of the Requests Dialog. You can read more about this on Facebook Developer Docs.

Debugging Plugin problems

Lines 5 and 14 are meant to display the text "Before" and "After" on the broswer console. This is a useful means of debugging your software. Let's say you see the words "Before" appearing in your browser console, but don't see the words "After", that would mean your plugin crashed somewhere in between these lines.

To activate the browser console for debugging. Follow these instructions for the browser of your choice.

1. Microsoft Internet Explorer: Press F12 to invoke the Developer tools. Select the Console tab.

2. Mozilla Firefox: Press CTRL+SHIFT+K - this opens something called the Web console.

3. Google Chrome: Press CTRL+SHIFT+I to open the Developer Tools, and then click on the Console icon.

4. Opera: Right click on the window and select Inspect Element. Click on the Errors icon and select the Javascript tab.

5. Safari: Google to see how to enable the hidden developer menu. After that you can simply enable the Javascript console.

You can now save runtime.js either with or without the two console.error lines placed there for debugging purposes.

Edit Edittime.js

Open edittime.js and scroll down to the section to declare a new Action. Paste these lines into the file. Remember to change the number index - 15, if required.

Notice that the input string parameters userid_ and message_ are defined here.

    AddStringParam("User ID", "The User ID being invited.");
    AddStringParam("Message", "The message being sent with the invitation.");
    AddAction(15, 0, "Invite User ID", "Invite friend", "Invite User ID <b>{0}</b> with message: <b>{1}</b>", "Invite User ID", "InviteFriend");

Ok, you're more or less done. You can change the version number if you like (at the top of the file).

Save edittime.js, and copy your plugin into Construct 2's plugin folder as explained in the previous tutorial.

Finishing touches

Fire up Construct 2, and follow up by adding a button that does the following, and you're set. You must have already gotten the list of friend info (as explained in the previous tutorial). I am assuming that the player has at least one friend in the tutorial, you will have to enter code to handle the special case when a player has no friends.

When you next run your game, click on the Invite button and the Requests Dialog (like the one below) will open up!

That's it, you're done!

  • 0 Comments

Want to leave a comment? Login or Register an account!