Creating a Facebook Application: “Hello World!”

An article by Prashish Rajbhandari    4 Comments

Many of us have spent hours playing games like Farmville, Sims, taking quiz like ‘When are you going to marry’, ‘Who will kill you’ etc in Facebook. Ever wondered how they are built? Ever wanted to built something like that? Ever felt like making your own app to amaze your friends? Don’t worry, it isn’t that difficult. In this series, I will talk about building a Facebook Application from scratch and by the end of it, you will be able to write your own customized application.

This will be the first of the many posts of my Building a Facebook Application series. Here you will learn how to write a ‘Hello World!’ Facebook application. So, hang tight and let the journey begin..

Requirements:

1. A Facebook account.
2. Web Hosting ( Domain + Space ).
3. If you are making a Facebook application for just practice purpose you can host the site locally from your computer.
4. PHP Skills.

Setting up localhost:

In this “Hello World!” demo, I have set up my Facebook application locally. You can use your own hosting by replacing the URL ( will explain later. )

Point to remember:

1. Facebook accepts only HTTP with SSL/TLS protocol (HTTPS) so you should ensure that your localhost supports SSL protocol.
2. If you are using your web hosting, then ensure that it supports HTTPS.

Here are some references to set up WAMP/MAMP/LAMP for HTTPS.

Registering Facebook Application:

1. Go to https://developers.facebook.com/apps/
2. It might ask you for authentication and some security questions. Put in user credentials that will handle the Facebook Application.
3. Click on “Create New App” on top right.

1. Pick any “App Display Name” and “App Namespace”. Name the application with some relevant name so that it can be recognized later. “App Namespace” is an unique identifier for your application. Its basically https://apps.facebook.com/ { App Namespace } and should be unique from other applications.
2. Agree to the Facebook Terms and then Click “Continue”.
3. This will create a dashboard for you application.
4. You will be given a “App ID” and “App Secret” for your application. You can save it down somewhere but it is not required in this tutorial.

Creating “Hello World!” PHP Page:

Now let us make a simple “Hello World!” php page in your computer.

1. Open any text editor and make a file “index.php”.
2. Write “Hello World!” program.

&lt;br /&gt;<br />&amp;lt;?php&lt;br /&gt;<br />echo "Hello World!";&lt;br /&gt;<br />?&amp;gt;&lt;br /&gt;<br />

1. Make a folder “facebook-app-demo” in your localhost folder.
2. Save “index.php” to that folder.

Integrate page with Facebook:

1. Go to “App on Facebook” tab on the bottom.

1. In “Canvas URL”, you need to put the URL from where the content of the application is pulled from. In our case, you need to put the root directory of the index.php i.e. http://localhost.com/facebook-app-demo/. (note: do not add index.php).
2. For “Secure Canvas URL”, just replace http by https.
3. “Canvas Page” is the name your typed in the “App Namespace”. You can change this by changing the “App Namespace”.
4. “Save Changes”.

Done:

Walla.. and you have just made your first Facebook Application. You can check your application at https://apps.facebook.com/ { App Namespace }.

Demo:

The demo of this application can be found at https://apps.facebook.com/my-first-app-demo.

Next Up:

This is an absolute basic “Hello World!” Facebook application. I just wanted to give you all the feel of how to make your first Facebook Application and how it works. In the coming posts, I will talk about Facebook Authentication, More advanced application that uses the Open Graph, Extracting user’s data, Connecting with other APIs (Google) etc..

Stay with me for more.

Subscribe to fortystones.

Follow @fortystones on Twitter.

Get updated from our Facebook Fanpage.