dijexi.com

This article explains the basic steps needed to create Facebook Application. The steps and test application created in this example can be used as a template for your next more sophisticated applications. At the end of the article you will be presented with resources for the documentation, forum, blogs, and feeds to keep you up to date with the current Facebook platform status, since it is still evolving constantly.

First, you need to log on into Facebook Developer application. Click this link http://www.facebook.com/developers/.

Then, click “Allow” to let the Developer application access your profile.

You can now start setting up a new application. Go to the Developer application and click “Set Up New Application”.

A new page like this will appear:

Give your application a name, check to accept the Terms of Service, then click Save Changes. The application name cannot contain the word “face” since it will conflicts with the Facebook’s internal.

You’ll see some basic information about your application, like the following page:

Notice that the support and contact email addresses are pre-populated with the email address associated with your Facebook account.

The information that we must focus on now are:

• API key: this key identifies your application to Facebook. You will pass it with all your API calls later on your own application.
• Secret: Facebook uses this key to authenticate the requests you make. As you can tell by its name, you should never share this key with anyone.

Next click on the Canvas “tab” located on the left side of the page. Here you will setup the Canvas Page URL which is address where your application lives on Facebook and the and Canvas Callback URL which is the address where your application lives on your server, or the server where the application is being hosted.

On the page:

• Enter the Canvas Page URL for example: coba_app. Then, when users access your application on Facebook, at the address http://apps.facebook.com/coba_app, they will be taken to your canvas page. It’s a good idea to use your application name or something similar. It must be at least 7 characters long and include only letters, dashes and underscores.
• Enter a Canvas Callback URL for example: http://demo.vitraining.com/coba_app  .. replace demo.vitraining.com with your own server. Facebook will pull the content for your application’s canvas pages from this URL.

For now, just leave other options defaulted. Click Save Changes.

Almost done, now you can click Edit Settings link on the right side of the page to edit the URLs just entered before if you think they are not what you think should be.

We are about to create a simple PHP file pointed at the Canvas Callback URL we already defined before. Before that, we need to download the Facebook Client Library for PHP so that we can access all Facebook functions easily and securely.

If you have access to your server shell account and it’s a Unix based machine, do the following (assumed that you are the the root folder of your server, the Document Root is public_html, and the application resides on coba_app folder as defined in the previous step):

If you do not have shell access, you can do the above steps using File Manager application. First, click on the Download the Client Library link located on the bottom side of the My Applications page shown above. Then save the downloaded file on a folder on your local computer.

• Upload the Facebook Client Library file to your application folder, in this example public_html/coba_app (create one if it is not exist yet)
• Extract the library file on that folder
• Copy all facebook*.php files to the current folder
• Copy the jsonwrapper folder to the current folder

Viewed from File Manager application, your folder structure should be like the following. You can delete facebook-platform.tar.gz and the folder facebook-platform if you wish.

Next create a simple PHP script like the following, saved it with index.php name on the coba_app folder. It’s taken from the sample code provided by Facebook Application example code. Note the $appapikey and $appsecret that must match to your own API Key and Secret. The application is very simple, it lists the first 25 your friends ID on the page.

That’s it! You are done.

Next, point your browser to your Canvas Page URL: http://apps.facebook.com/coba_app. If you are not log in yet into Facebook you will be prompted to do so.

Next you will be prompted by Facebook application access authorization whether you will allow the newly created application to pull your profile information, photos, friends info, and other contents. Click Allow.

Wow! You are able to create Facebook application now, using just these 5 simple steps!

Final Note:

Facebook Platform is constantly evolving, so you need to keep up with the changes. The best ways to keep up with what we’re doing is to:

• Check the Documentation and the Forum.
• Keep an eye on the Facebook Developers blog. The Developers blog runs all our major announcements. You can subscribe to the blog here.
• Read the Platform Status Feed. The status feed is where we send out various announcements and updates on the current state of Facebook Platform. You can subscribe to the status feed here.

Akhmad Daniel Sembiring

vITraining.com – Qualified IT Products, Outsourcing, and Services

Ligarwangi.com – Linux, E-book, Coffee, Gift, etc