Facebook Application From Scratch – 1

Today, we are starting a series of tutorials for Facebook Application development from scratch. In this series of tutorials, we will develop a fully functional Facebook application. The idea behind our application is simple enough, in this application users will be able to share cakes with their friends, cakes could be posted on users’ or users’ friends wall. Users will also be able to invite their friends to this application. After completing this tutorial you will be able to:

• Setup a Facebook Application
• Use Facebook Authentication for aplications
• Learn FBJS
• Learn Facebook Graph API
• Learn how to post data on users wall using Facebook Application
• Learn how to post data on users’ friends wall using Facebook Application
• Create a custom tab for your application

Let’s kick the app!

To develop Facebook applications you need to have a developer account on facebook.com. Click here and follow simple steps to create your developer account. Once you have created your developer account, go to:

http://www.facebook.com/developers/

At this stage you should have something similar to below screen. Click on the “Set Up New Application” button:

Tip: Click on any of below snapshots to view bigger image.

Create Application

Give your application a name and choose “Agree” for terms and click “Create Application”. Congratulations! your new facebook application has been created. Now we will look at some of configurations.

Basic Configuration

When you hit the “Create Application” button, you will be redirected to a page similar to below screen. Here you can configure your application according to your needs. For the sack of simplicity we will go for basic configuration. Later in this series of tutorials we will come back here to do more stuff.

For now you should see the same application name, you provided in last step  (Share a Cake in our case). Give your application some description. And click on ‘Facebook Integration‘ at the left side of the screen.

Canvas Settings

The area where people interact with your facebook application usually is called Canvas. The URL to access your applcation is called Canvas Page and the location where you host your files for facebook application is called Canvas URL.

Canvas Page is unique for every facebook application and subject to the availability. While Canvas URL is your server URL. Facebook does not host your files, you will need a server to store your application files.

Enter your values for Canvas Page and Canvas URL.

In last, choose FBML for Canvas Type in Canvas Settings. Difference between IFrame and FBML application is a topic – we are leaving for some later time in future.

Finally click on Save Changes button at bottom.

Final Step

Three elements Application ID, API Key and Application Secret are very important in order to run our application in the Facebook. You should notice hidden values for API Key and Application Secret in below screen shot. In your case you must be having some alpha numeric characters for them.

For now, just make a note for the values of Application ID, API Key and Application Secret. We will use this information later in this series.

We are done!

That’s all for setting up your Facebook Application. In upcoming days we are bringing more delicious CAKES for your Facebook Application development hunger. So stay tune with us.

If you like this article, please share it on your favorite website. It may help someone somewhere!