Facebook Apps/Games are very popular and for security purpose, Facebook requires that they are run on https. However, as a developer, you need to buy and setup SSL certificate on your server which results in spending a lot of money and time. This can be quite cumbersome, especially if you are just getting started.

App42 PaaS provides you with a readymade environment to run your app on https with no additional cost. In this post, I will take you through the steps to configure your Facebook App and deploy it on App42 PaaS.

Just follow these simple steps to create a custom Facebook App and configure with a deployed application URL.

Create Facebook App:

To create a Facebook App, just follow these simple steps:

Step 1: Visit https://developers.facebook.com/apps and Click on the “+ Create New App” button on top of the screen. The screen appears as shown below

Step 2: Enter the App Name, App Namespace (app namespace used to create the URL for the apps on Facebook, say https://apps.facebook.com/jungleclutter/), App Category and press “Continue” to start the development process.

Step 3: Go to Facebook App’s Basic Settings page. Select “Disabled” for the Sandbox Mode option. See the images below.

Congrats, your Facebook App is now good to go! Just save your changes and skip the remaining details, which you can fill later on. Your next step is to paste the App ID into your application which you want to access from Facebook.

window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
    appId      : 'XXXXXXXXXXXXX',  // App ID from the app dashboard
    status     : true,            // Check Facebook Login status
    xfbml      : true            // Look for social plugins on the page
});

If you don’t have any sample application, I will recommend you to get Sample Jungle Clutter source code from ShepHertz git repository and switch to v1.0 application directory. There you will get Jungle Clutter source code, Open index.js file and do above changes.

Now let’s deploy your application on App42 PaaS. You first need to setup your environment with App42 PaaS by providing certain inputs which is required to run and deploy the App.

As in the above example, we will use ’demo’ as the name of the application which we shall build with the following inputs: Instance Type(shared), IaaS Provider(on which you want your application to deploy), Runtime, Framework and Web Server. Finally enter the desired Kontena power (Kontena is a virtualized container which runs your apps and services; One Kontena power is equal to 256 MB RAM and 128 MHz CPU). Hit enter and it will just take few seconds to create a virtual environment for your app.

Configure Facebook App

Now let’s configure the Facebook App to access the deployed application.

Steps 1: Go to your Facebook App details page and fill the Site URL, Canvas URL and Secure Canvas URL as shown in the below image and make sure to add ‘/’ or ‘?’ at the end of the URL.

Once you have filled in your Site URL, Canvas URL and Secure Canvas URL, click on “Save Changes” and you’re done!
Now visit you Facebook App URL https://apps.facebook.com/jungleclutter/.

You are now ready to deploy your application on App42 PaaS platform. That can be done by using the GIT URL or creating a binary (including all dependencies) on your local development environment. Here we are going to deploy your application using Binary source code.

Now visit your Facebook App once again and you will see the Login button to access Jungle Clutter App as shown below:

You can now play the Game!

Visit App42 PaaS Dev Center for more tutorials and samples. If you have any questions or require further assistance, please feel free to reach out to us at support@shephertz.com.