how to develop a facebook application?

IMPORTANT UPDATE
This tech post on developing facebook applications is obsolete. Please refer to the newest Facebook Application Developer Docs.

From the experience I gathered during Yahoo! HackU event at IIT-Kharagpur, I realised that many of the students had a lot of trouble developing facebook applications. So, in this post, we will learn how to develop a facebook application, right from downloading sdk, connecting to facebook (the dreadful authentication and permissions part), accessing your data and friends data and making a meaningful hack out of it.

Creating a new facebook application

You can create a new facebook application at Setup New App. At this point, Facebook might ask you to confirm your existence via mobile phone number or credit card. You can follow whichever is apt for you so that it enables you to create facebook apps. You might get errors during app creation if you have not done this step.

Give your app an appropriate name, agree to terms and conditions (I know, I know, no one reads these) and pass the CAPTCHA check to land in a new page which is as below. I named my app as "RecoRead" which suggests good reads based on my interests(music interests) declared in facebook.

Facebook App Creation landing page

Configuring your facebook application

There are a ton of settings that you can configure here, but we will focus on only the essential one's that is required to develop a web-based facebook app. We will need to configure exactly 4 parameters as below. I will configure them assuming http://www.ravikiranj.net is the site where I want this app to be hosted :-

Web Site > Site URL

http://www.ravikiranj.net

Web Site > Site Domain

ravikiranj.net

Facebook Integration > Canvas Page

http://apps.facebook.com/fbrecoread/ (Enter only fbrecoread in the box)

Facebook Integration > Canvas URL

This is by far the most important config which says, where should the facebook app redirect me after the user has granted appropriate permissions to my app. Since I host this in ravikiranj.net, I will configure this as http://www.ravikiranj.net/drupal/sites/all/hacks/fbrecoread/. If you don't own a webserver via web hosting service, read below to hack your own localhost server to act as a hosted webserver and get it working.

It's also very important to note down Application ID and App Secret which will be used later while developing our application. It will be specified as below.

facebook application id and secret

Local Webserver v/s Hosted Webserver

In the previous step, I assumed that you will own a hosted webserver (VPS or shared webserver) via web hosting company. However, if this is not the case, you need not worry, as you can configure your local webserver to act the same with a simple hack as below.

Basically, we add the below lines in our "/etc/hosts" file on linux or "C:\Windows\system32\drivers\etc\hosts" file in windows and thus it will make 'www.ravikiranj.net' or 'ravikiranj.net' point to our local apache server. Whenever you hit ravikiranj.net or www.ravikiranj.net in the browser, you're actually serving it from your local box. This method is also very effective for development purpose and once you have finalized your app, then you can move it to your production web server.

Download the Facebook PHP SDK

Once you're done with the previous step, its time to play around with the Facebook PHP SDK which will give you a head start on developing the facebook app. You can find it at Facebook PHP SDK. Either download the .tar.gz file from github or better install git package and clone/fork the repository via 'git clone https://github.com/facebook/php-sdk.git'.

Note that you need to check out the facebook php sdk into your canvas URL. I have checked out the facebook php sdk into http://www.ravikiranj.net/drupal/sites/all/hacks/fbrecoread/ which is the Canvas URL as mentioned above. In the facebook php sdk, you have 3 directories, namely, examples, src and tests. You can find a sample example.php file in examples directory, copy this file to fbrecoread directory and rename it to index.php.

In this file, modify the file path pointing to facebook.php in require, as we have moved the file to a different directory. Also modify the appId and appSecret to the one which you noted right after creating your application.

Once you're done with the above setup, hit your canvas URL path. I will hit http://www.ravikiranj.net/drupal/sites/all/hacks/fbrecoread/ on the browser and something like below shows up.

Facebook PHP SDK Startup page

Just to complete one more check, before we start hacking the facebook app, lets try to connect to the facebook app by choosing "Without Javascript and XFBML". It will open a new tab where it asks for your permission to let the app access your basic information as below.

Facebook App Permission screen

Once you provide permission to the app, you should get something like below where it displays basic information about your facebook account.

Facebook SDK Connect Page

If the above is successful, now its time to understand what's happening and write a custom facebook application.

Flow of a facebook application

Let us try to understand the flow of a facebook application first. First of all the most important lines are how to setup a facebook object using the php-sdk. To achieve this, lets create a new file called fbrecoread.php which contains fbrecoread class and has a constructor as below:-

Now facebook requires the user to permission to your application to access the user information (basic info, interests, likes, wall/stream etc). So now, we have to setup a link on the page if the user has not already authenticated our app and let the user permission our app. The full code block that achieves this is as shown below:-

You might be wondering what on planet earth does the above code block do !!! Don't worry ! lets break it down into simple parts and understand. In the 'displayHTML' function, we first check if there is a session already present i.e, the user has already authorized the app. If it doesn't exist or session has expired, we call 'showConnectToFB' function.

In 'showConnectToFB' function, we need to generate a login url which will redirect the user to grant our app appropriate permissions. The code which does this is as shown below:-

If you want additional permissions, such as accessing user's interests, likes and his friend's interests and likes, you need to pass them explicitly by filling the params array. If you don't need them, you can make params an empty array. The full list of permissions to access various resources of a facebook user account is listed at Facebook Permissions.

Note:

I have just added the markup to display a nice page which asks the user to permission our app in the $html string which is outputted to the browser. You can just dump the link, nothing much fancy required.

Extracting data out of Facebook API

Once your app has the permissions to access the user data, this is where the real power comes into picture. Let us now extract the user's interests, specifically user's music interests declared in facebook. We will then query Google News API via YQL (Yahoo! Query Language) on these music interests and suggest relevant articles for the user to read which may include where is the band performing next, when is their new album due to release etc.,.

I have also shown below how you can access the user's facebook stream and various other data. You can get them into PHP variables and loop over them to access individual properties. Likewise, you can also execute FQL (Facebook Query Language) queries to obtain the same. I have shown how you can extract the logged-in user's basic info and his friends info via FQL MultiQuery. You can read more about it at Facebook Query Language. Note that all users in FB have an unique ID called UID which will be used many a times whenever you use FQL.

FQL is very very powerful feature where you can combine/batch multiple queries (fql.multiquery) in one shot and in itself needs a detailed post to cover and explain the nitty-gritty details involved within it. To restrict the scope of this post, I will let you read about it and explore the same.

Extracting relevant content from Google News API via YQL

Once we extract the music interests, we query google news api to give us relevant news items via Yahoo! Query Language. To get only music related items, we might have to append "music" keyword (Eg:- "travis music") to all of your music interests so that the results picked up are only from music industry. You can learn more about using YQL at Yahoo! Query Language.

The final results looks like below, where on the left pane you can see all of your music interests declared in facebook and on the right pane you have all the relevant news items pertained to those music interests. You can access the facebook app at Facebook Recoread application. The complete source code is located at FBRecoread @ github. You can clone the repository via 'git clone git@github.com:ravikiranj/fb-recoread.git'.

final image of facebook recoread application

Caveats

  • Get the sample example from the facebook php sdk working in both connected and un-connected state, that will verify your facebook application configuration.
  • Get your local webserver to work as hosted webserver, this will really help you in debugging.
  • If you need to access a user's interests, or his/her friends interests, birthdays etc, you need to explicitly specify the permissions while generating the fb login/connect url.
  • If you get stuck with FQL, try executing the queries directly at FQL Query / FQL Multiquery.

Related Articles on Web

  1. Nettuts+ tutorial on creating facebook application
  2. How to write a facebook application in 10 minutes
  3. Developing a facebook application for absolute beginners