In this tutorial, we'll learn how to add a HTML5 game made with Construct 2 to Facebook, and how to integrate it with Facebook's features. If you haven't already, download the Free edition of the Construct 2 HTML5 game creator and get your game ready to publish!
The first thing you need of course is a Facebook account and I will assume you have one! I will also assume you have uploaded your game to a website.
You will then need to visit the Facebook Developers page. In the top right of the screen you should see an 'Add new app' button. Click it to make a new app!
Press the continue button. You may be asked to fill out a few security checks.
You will then be presented with the following screen:
There are 2 types of icons you can upload. One must be 16x16 pixels in size, and the larger one must be 75x75 pixels in size. Hold your mouse over the icon space to upload your icons!
You can leave App Namespace blank, that is not needed in the scope of this tutorial. For category, I chose Games with the subcategory Action & Arcade. Note: to be able to submit scores with the Facebook object, your app must be categorised as a game.
Now underneath basic info, click the App on Facebook tick box and enter the URL to your game:
Facebook is really picky about URLs here, make sure the URL ends with a forward slash or query string otherwise it will not accept it. Our game is located at:
http://www.scirra.com/demos/space-blaster/index.html
But this was not accepted! So to get around this we change it to one of the following (make sure you test the URL before entering it!)
http://www.scirra.com/demos/space-blaster/index.html?s=1
http://www.scirra.com/demos/space-blaster/
http://www.scirra.com/demos/space-blaster/
The ?s=1 is called a querystring parameter, s=1 is meaningless, I've just added it on to the end for Facebook to accept the URL.
For the Facebook plugin to work, you also need to tell Facebook about your website. Click Website and enter your main website. For example, for Space Blaster I entered http://www.scirra.com. You should now have two URLs entered like this:
Finally, Facebook needs to know your website's domain. This is the top-level.com, .org and so on. For example, for Space Blaster the domain is scirra.com. Under App Domain (in Basic info back at the top) type in your domain and press enter.
If you have a web-enabled app, or an iOS or Android native app, you can fill out the other fields accordingly.
Press Save Changes to update your app.
You will notice on the left a Submit to Search button:
This will list your game on Facebook search! Unfortunately at the moment you will have to wait until you have at least 10 monthly users, so share your game when it's done amongst your friends and then come back to this button at a later date.
Now on the left menu press View app profile page. Now start filling out more details about your game. The picture should be 180x180 pixels.
You can also click Add to my page in the left menu at the bottom, and select some pages to add your game to! This can help get people on pages you run to play your game as well.
Share your app's profile page around to promote your app. If you click Go to app at the top, your game will appear inside the Facebook window. Remember it's still hosted on your site - Facebook is just showing it in its own window.
Integrating the Facebook plugin
Now you have a basic Facebook game or app running on Facebook. Using theFacebook object in Construct 2, you can integrate with Facebook's features.
First of all, drop in the Facebook object to your game. In the properties bar, you need to enter your App ID.
You can get the App ID from the settings page earlier.
If you want to publish hi-scores on Facebook, also enter your App Secret. Do notenter the App Secret if you aren't going to use hi-scores! Entering your app secret is bad practice, but it is necessary to get the hi-scores system to work.
Adding Facebook features
You need to use the Facebook plugin's Log in action to enable integration. You cannot do this automatically: have a button saying "Log in" that the user must click. This will open a popup window and Facebook will request if the user wants to let the app access your account. They have to click Allow to log in.
The user can keep using your app if they are not logged in, but the Facebook plugin won't be able to do anything.
The permissions that the login screen asks the user to approve depends on what you set in the Log In action.
An important point is the fewer permissions you request from the user, the more likely they are to allow. In other words, do not ask for permissions you don't definitely need. Users are prone to avoiding logging in to apps that ask too much.
Here's what the Facebook plugin can do depending on permissions:
No permissions (both set to None)
- You can still get the user's name (e.g. to say "Welcome back, Joe Bloggs!")
- You can use the Prompt to share link, Prompt wall post, and Prompt to share this app actions. These bring up popup windows which the user can OK or cancel. For many games and apps, this is enough - you don't need to request any permissions at all for that!
- You can still get the user's name (e.g. to say "Welcome back, Joe Bloggs!")
- You can use the Prompt to share link, Prompt wall post, and Prompt to share this app actions. These bring up popup windows which the user can OK or cancel. For many games and apps, this is enough - you don't need to request any permissions at all for that!
Publish to stream permission
- You can do all of the above, and use the Publish wall post and Publish linkactions. These instantly publish without prompting the user. You should be verycareful not to annoy the user or they will ban your application. Always get the user to approve the action, and publish as little as possible.
- You can do all of the above, and use the Publish wall post and Publish linkactions. These instantly publish without prompting the user. You should be verycareful not to annoy the user or they will ban your application. Always get the user to approve the action, and publish as little as possible.
In fact, this permission is not recommended. It is probably always better to use the Prompt actions which require no permissions, since the user controls what is written and can cancel it. However, the permission is provided in case it is useful to some apps.
Publish scores permission
- You of course get the 'no permissions' features, but you can also use the Scores API.
- This means using Publish score, Request hi-score board and other features. The picture of the login dialog above for Space Blaster shows what the login dialog looks like for this: it requests "Publish games and app activity".
- You of course get the 'no permissions' features, but you can also use the Scores API.
- This means using Publish score, Request hi-score board and other features. The picture of the login dialog above for Space Blaster shows what the login dialog looks like for this: it requests "Publish games and app activity".
You must also enter your App Secret to use the Scores features. But don't enter your App Secret if you're not using Scores!
Facebook events
The Facebook object has some conditions that can help you determine the state of the user.
Is ready is true if the Facebook object is ready to be used. If it is not ready, the Facebook features are still being loaded. You can't use the Log in action until the Facebook object is ready.
On user logged in triggers after the user clicks Allow on the login screen opened by the Log in action. However, the user's name is not yet available - it will follow shortly.
On user logged in also triggers if the user re-visits your app later, and their login is remembered. It also triggers again for each layout you go to, on the start of the layout. (This is helpful if the user returns to your title screen - the event still triggers.)
On name available triggers a moment after On user logged in. Now the user's name is set, which you can access via the Facebook object's expressions. These expressions will be empty before this triggers.
Scores
If you have the user logged in with scores permission, you can use the scores actions. These can take several seconds to complete, so as with logging in, these work by using an action to make a request (like "publish score") which later triggers an event (like "On score submitted") when the action has completed.
Note that hi-score tables only show scores for the current user and their friends. You can't see all player's scores. This is how the Facebook Scores system works.
Also note that it is almost impossible to have a secure scores system in a javascript game. Hackers may be able to post fake scores. However, it shouldn't be important - scores are just a bit of fun, and fake scores can only be seen by that user and their friends, not everyone. So please don't worry too much about the security of hi-scores.
Not working?
At time of writing the Facebook platform is a little unreliable. The Facebook team appear to be constantly working on it, which means sometimes features are temporarily broken or unavailable. If you have problems, try again the next day.
You can also try changing some of the Advanced settings (with Basic settings open, click the Advanced link on the left menu). Here are some options to play with:
Sandbox mode: if you just want to test if the app is working for you, enable Sandbox mode. That makes the app visible only to you (and anyone else you've added as an app admin). Remember to disable it if you want your app to be public!
If the login screen doesn't appear to be working or is freezing (sometimes it gets stuck on XD Proxy), try setting Enhanced Auth Dialog to Disabled. This can fix problems with login.
The Canvas settings affect the appearance of the app inside the Facebook page when you click Go to app. You might want to try adjusting these, but generallyFixed width and Fluid height work well for most apps. Enabling Social Discoveryshould also help spread your app (it publishes things like "User is using MyApp").
Finally, you might want to try enabling Scores Auth Dialog Preview if you use scores.
If all else fails and you can't get it working, go to Account Settings - Apps and remove your app. Wait 5 minutes, then go back to your app. It should ask you to log in again.
Wrapping up
Last but not least, the Facebook plugin works on your own website as well! If the user visits your game's URL directly - outside of Facebook - they can still log in! That means you can still have users visiting your website directly logging in with Facebook, posting scores and so on. Very handy!
.jpg)
Posts
.jpg)
0 comments:
Post a Comment