Social Connect with Facebook

This step-by-step tutorial covers how you can use the Social Connect plugin with Facebook. The topics covered in this tutorial are:

Setting up in Facebook

The first thing to do before we can even start using the plugin is to create the app in Facebook. To do so you will need to go to developers.facebook.com

newapp

To create a new app click on the Add a New App link, which can be found under Apps.

You will then need to select the platform that you are going to publish your game to. Don’t worry if you are going to publish to multiple platforms as they can be added later.

app-platform

Once you have decided a platform, follow the quick start guide as that will take you through the steps needed. Otherwise you can always skip it.

Your AppId

When you have successfully created your App then you can find your AppId on the Settings page of your new App.

Configuring Facebook for Browsers

To configure your app to work with browsers you will need to go to the Settings tab in your App.

Once on the page if you do not see a Website platform you will need to click on the Add Platform button and select Website.

add-platform

With the Website platform visible, all you have enter the Site URL input. Optionally you can also include a Mobile URL.

website-config

Configuring Facebook for Cocoon

Cloud Compiler – App Creation

To configure your App for CocoonJS you will firstly need to login using a Ludei Premium Account on to the Ludei Cloud Compiler.

If you do not already have a project for this app then you will need to create one now. Click on the New Project button.

project-info

Once you have created your app you next need to enable the Facebook Social Service found under the Services > Configuration in the sidebar.

If completed successfully a Facebook link should appear in the sidebar.

social-services

Go to the Facebook configuration page in the cloud compiler and enter your AppId. This is located on your Apps Settings page on developers.facebook.com.

social-facebook

Facebook – Android Platform

This step requires you to go back to Facebook Developers website and go to the Settings tab for your App.

If want to use your app on Android devices then you will need to add the Android platform. If it is not already visible you can click on the Add Platform button and select Android.

android

The Package Name should be the same as the Bundle ID you input into the Ludei cloud compiler. Enable the Single Sign On setting.

Key Hash
For the key hash it is recommended you install Google’s ADT Bundle. It is not mandatory but it is one of the fastest ways of creating the debug.keystore file needed to generate a valid Key Hash for Android.

To generate the Key Hash you can enter the following code into your terminal.

OS X:

Windows:

Key Hash: Another Way

Optionally another way of getting the Key Hash is to compile a version of the CocoonJS project/launcher and attempt to use the Facebook Social Service. When/if it fails the correct key hash will be logged out and you can input that into the Key Hash setting on Facebook.

Facebook – iOS Platform

This step requires you to go back to Facebook Developers website and go to the Settings tab for your App.

For iOS you will need to add the iOS platform. If it is not already visible you can click on the Add Platform button and select iOS.

ios

Make sure to enter the same Bundle ID that you used for the Cloud Compiler. Also enable Single Sign On. The other fields can be entered at a later time as need be.

Useful Docs for CocoonJS

More documentation helping the process of configuring your App for CocoonJS can be found at the following locations:

Initialising the App

With the configuration steps all complete, we can now start looking into how to use the App.

Assuming you have already included the plugin into your game (if you haven’t then this document is for you) the next step is to initialise the Facebook section of the plugin.

The initialisation phase has to be the first step before any other Facebook method can be called! This will automatically include the Facebook SDK. When that has been loaded you will have access to sharing, login and all that Facebook goodness.

CocoonJS: Don’t Forget

If you are using this plugin with CocoonJS then don’t forget to include the CocoonJS Library. It can be found in this plugins repo under the ‘lib’ folder. Also remember to tell that game that you are targeting CocoonJS!

Sharing

To pop-up a basic share dialog you can use the share method.

Login

Below is an example of the login functionality you can add to your game.

Firstly it will pop-up the Facebook login dialog. Note that it will not pop-up if the user is already logged into facebook and has allowed access to your app.

On success or failure the onLogin method will be called indicating success or not.

Best Use

Methods that use a pop-up window (the share and login methods) are best called inside of a user event callback on the Input Manager of Kiwi.

The Facebook SDK

If at any time you would access to the Facebook SDK to access more functionality then you can access them via the fb property.

Further Reading and Docs

That concludes using the SocialConnect plugin! By now you should hopefully be on your way to using Facebook in your games.

More Links and Documents:

If you have any questions/comments then write it down for us in the comment section below!

Share the joy

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">