How to create your own simple php facebook application using Heroku 2013 | 2014

Facebook provides a quick and robust user friendly interface to develop your apps. In this tutorial let us see how to create your own custom made PHP application on Facebook using Heroku (Cloud platform). We will be using GIT to deploy our apps on Heroku. If you don’t have a Heroku account yet, sign up at Heroku’s official website.  Heroku’s free service gives you up to 5 MB of free database, 100 MB disk space & a 2TB/Month on bandwidth.  Using GIT in the beginning might be a little confusing but you would get it pinned to your mind after knowing a few commands.

Step1: Registering with facebook as an app developer:

If this is not your first time creating a facebook app, skip to Step 3.After logging in to your facebook account, go to facebook app dashboard. Hit the ‘Register as Developer’ button that’s located in the top right corner. A pop up box asks you to re-enter the password.

Enter the password and hit Submit. Accept the terms and conditions on facebook after reading it and click on Continue. Next, a dialog box requests you to enter your mobile number. After entering it, facebook will send a confirmation code to your mobile. Use it to verify your account. A dialog box that asks for preferred programming languages, experience level & type of apps that you will be building appears.

Now, choose Heroku under ‘Where do you host and distribute your apps?’ section. Now, hit ‘Continue’ button. After you have set up, the final confirmation message will appear.

Proceed After clicking ‘Done’.

Step 2:  App name and namespace settings

Now that you have done the basic Setup and confirmation process, Facebook will redirect you to its app developer dashboard. Click on “Create New App” button.

Choose an Application name and an app namespace. Choosing app namespace is optional. It’s what that will appear in your facebook application URL as ‘https://apps.facebook.com/<Applicationnamespace>’.So if you want your app url to be ‘https://apps.facebook.com/myapplicationname’,then enter myapplicationname as namespace and don’t forget to choose your application’s category.

          Enter the captcha confirmation.If it is successful you will enter into your app details page. Here, you are just shown the basic information about your app such as App Secret and App Id. Remember to keep your App Secret safe!

Step 3:Heroku’s Free Hosting for your facebook App:

Initially facebook provided Heroku sign up along with the App Creation process. Later in 2013, facebook has made some changes to its application hosting. You have to manually sign up with Heroku and configure it. After signing with Heroku, you have to install Heroku toolbelt  depending upon your platform. It contains Heroku client & Git bundled together. To start with the procedure, run your command prompt and enter the following commands

Login to Heroku : To login to Heroku , enter Heroku login in the command prompt. Enter your email and password to proceed.

Creating your app’s storage : To host your app you need some storage space which is provided by creating a git repository using ‘heroku create’ command. You can create it with a name using ‘heroku create <appname>’.This will create your facebook app at http://<appname>.herokuapp.com.Type ‘git init’ command to initialize to that repository. Now clone your app using ‘git clone git@heroku.com:<appname>.git  -o heroku’ command. This will basically create a copy of what’s present in the app directory in your local hard drive in the form of a folder with that app name. In windows you can usually find it at ‘C:\Documents and Settings\<user>\<appname>’

     Now anything you add to this folder will be made available in your app’s storage space if you key in “git add . “ & git commit  –am “<some commit message>” in your command prompt. Don’t close your command prompt. Keep it open.

To know more of these commands visit here

Step 4: Building a simple app with facebook’s PHP SDK

Download PHP SDK from facebook and copy ‘facebook.php’ , ‘base_facebook.php’ , ‘fb_ca_chain_bundle.crt’ files to your application’s directory in your local computer. Now to make a simple app that authenticates the user and displays his/her name, copy this to a file called ‘index.php’ and save it in your application’s directory.

This code can also be found at facebook developers docs here

Note that facebook.php must be present in the directory where index.php is present else use require ‘<subdirectory>/facebook.php’, where <subdirectory> is the directory that contains ‘facebook.php’ file in the root folder of your app directory.

Enter your app id , app secret , app namespace from the app details page

Code :

<?php

    require 'facebook.php';

    $app_id = 'APP_ID';

    $app_secret = 'APP_SECRET';

    $app_namespace = 'APP_NAMESPACE';

    $app_url = 'https://apps.facebook.com/' . $app_namespace . '/';

    $scope = 'email,publish_actions';

    // Init the Facebook SDK

    $facebook = new Facebook(array(

         'appId'  => $app_id,

         'secret' => $app_secret,

));

// Get the current user

$user = $facebook->getUser();

// If the user has not installed the app, redirect them to the Login Dialog

if (!$user) {

        $loginUrl = $facebook->getLoginUrl(array(

        'scope' => $scope,

        'redirect_uri' => $app_url,

        ));

        print('<script> top.location.href=\'' . $loginUrl . '\'</script>');

}

?>

After saving it, your files might be present in the local repo like the one shown below.

Now type git status  to see which files have been modified. Type git add .  in command prompt. This basically updates the index. Then type  git commit  –am “blabla” and finally git push Heroku master command to update the changes.

Step 5: Connecting facebook with Heroku apps 

We need to link this Heroku app with our facebook app. To do this , go to https://developers.facebook.com/apps, click on your App and hit ‘Edit Settings’ link present it will open up App summary page below.

Enter the canvas URL as the Heroku application url i.e., http://<appname>.herokuapp.com and https://<appname>.herokuapp.com for secured canvas url and hit “Save Changes”. Also make sure to turn Sandbox mode ‘Off’ if you wish to make your facebook app go public i.e., if you want to share your application with others else only you can see it privately.

Finally your simple php facebook app is present at ‘https://apps.facebook.com/<Applicationnamespace>