Category Archives: Social Apps

Getting Started With Facebook App Development

1 Reply

imageYou all on facebook must have tried FB Quizzes and Apps. Nowadays, many are playing Mafia wars, Yoville and regularly going through funny and insane quizzes like “When will you die?” or in general playing “What? Why? When? Who?”.

In spite of being useless apps, multitude of people are rushing towards such apps…

don’t believe me! Have  a look on stats of an application (A “who” quiz) that I launched,  four days ago:

 

image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

but, look writing these applications are pretty straight right, and further with facebook platform API support, it becomes a breeze, though it adds its own idiosyncrasies and difficulties. And with all that things comes an easy way to make money by showing ads, and other revenue models that  can offer you considerable amount of money.

 

Getting Started

 

Add facebook developer application

To start with, every developer who wants to develop facebook applications need to add “facebook developer application“. [ Here, I assume you already have a valid facebook user account ]

image

 

A WebServer / web space running required middleware language

Next you will need a web space (host) to host your application. A facebook application is basically a web application that communicates with facebook platform with its REST APIs.

These REST APIs functionality are available in the form of libraries for different platforms, that allows you to use facebook API without writing a lot of extra code. facebook has created there own PHP client library.

Other than that, there  are plenty of unofficial libraries for supporting application development in your preferred language or framework.

I will be demonstrating here app development using the default PHP facebook API client library.

Facebook Application Architecture

Facebook Application Architecture copyrigths Apress Publishers

Facebook provides your application to users when they request it through Facebook Application directory or follow some link pointing to your application. As you can see above, each time a Facebook user interacts with your application, It causes a series of server interactions with the Facebook server farm and your server. Each time a user requests something from your application  through Facebook,  that request is passed to your server to create the initial REST call to the Facebook API. Once your response to construct a display call (in FBML and HTML) and passes that back to the Facebook server. Facebook processes  this information (the embedded FBML and JS) and creates an HTML response to the user. Because of the constant passing of information between servers,  there  is an additional level of complexity that can complicate tracking down bugs. You also need to consider this constant interaction when developing your application because you don’t want to make unnecessary API calls that will slow down your application.

Download Client-Library

As discussed earlier, you can choose one from many available client libraries available for your favourite language. We will be using official facebook PHP Client Library, for other languages you can get one from unofficial libraries.

Once you’ve downloaded the library unzip it into a folder and upload to your webserver from where it is accessible by your PHP scripts. So you would have something like /php_include_directory/facebook/ and in that folder you will have the entire Facebook PHP Client Library (folders: client, footprints, php4client). I’m using PHP5 so my examples will be using the “client” directory of the library. The client library contains files and folders shown below:

image

 

Create Your Application Profile And API Key

go here, and create an application profile

image

 

Choose a name for your application. This is important because it’s what users will see when they are browsing the application directory. Currently the name field is the only thing used when searching for applications. So it’s doubly important at this point.

 

image

 

Next fill out the Canvas Callback Url with the location of your script. This is the public URL on your webserver where the Facebook application will be, also fill out the “Canvas Page URL”. This is your application URL within Facebook. For example if the application was called “Play the DemoApp ” then the application URL could be: “DemoApp” which would make the full URL: http://apps.facebook.com/DemoApp/.

 

image

All of these settings can be changed anytime, even after the application has been created 

 

Get the API Key and Secret

image

You should never disclose the API Secret key (Hmm… Isn’t that what secret means?), the API key is used to uniquely identify your application and Secret is used for authentication purpose and during REST API calls.

 

So far, we have selected a webserver that supports your chosen middleware language (in our case PHP), now we can start writing our application.

Select your IDE

You can write your PHP applications on any suitable editor, even on notepad but that hearts a bit, so you can choose some common free or proprietary IDEs from here on wikipedia, further in addition below is a list of some common IDEs:

So, lets make our Demo App, what it will do:

  • It will ask for user authorization to allow fetching user information via APIs
  • List some information about user
    <?php
        // Name: index.php
        // My Demo App

        // facebook API library
        require_once '../facebook-platform/php/facebook.php';

        // The API key + secret
        $api_key = "546dcaef3d4c5666c5eef65c4c15e196";
        $secret = "57secret57secret57secret57secret";

        // Create the object containing API Client
        $facebook = new Facebook($api_key, $secret);

        // Shows standard "allow application" dialog, if user has not authorized
        $user_id = $facebook->require_login();
    ?>

    <?php
        // all API calls of form xxxx.function are called in the way xxxx_funtion in PHP API Client
        // call the users.getInfo facebook API
        // more details at http://wiki.developers.facebook.com/index.php/Users.getInfo
        $userdetails = $facebook->api_client->users_getInfo($user_id,'name,pic,profile_url');
        echo "<h2> Demo App </h2>";
        echo "<img src='".$userdetails[0]['pic']."' />";
        echo "<br />Name:".$userdetails[0]['name'];
        echo "<br /><a href='".$userdetails[0]['profile_url']."' >Go to profile</a>";
    ?>

Save it as index.php and upload it under proper directory at your server, so that references to php client library are correct.Next, launch your browser, and type your application facebook application canvas url, it would be like: http://apps.facebook.com/<app-name>When you will run it, you will see the following screen:

 

image

 

This screen is a result of our following line of code

$user_id = $facebook->require_login();

which causes facebook to show a standard prompt, through which our application gets permission to fetch user info from facebook profile datastore via API calls.

Click Allow to continue using app.

next we issue another API call:

$userdetails = $facebook->api_client->users_getInfo

This causes the REST API calls, and finally $userdetails contains the following value as an array:

image

 

which  we later print out using echo in out format:

image

It is to be noted that all facebook applications run on the facebook page and thus are allowed a fixed space called application canvas, the blue box marks the facebook canvas in snapshot below:

image

(Click to enlarge)

Where to go from here:

What you have learned here are bare basics of FB App platform, for further information you can see following places:

You can start playing with APIs without any need of coding by going to developer tools.

image

 

Resources and Further Reading

Book: Apress Facebook API Developers Guide (Mar 2008)

Forums: Facebook Forums

Hope you like this post providing some insight of facebook application development, please comment your views and post any queries freely.

Thanks for reading! 🙂