facebook application development part one

download the facebook client library 

Once you have download the Facebook Client Library and extracted the contents you will be presented with a facebook-platform folder and within this a client folder (The PHP 5 client and the code base we will be using for this tutorial), footprints (A Facebook demo application) and a php4client folder (The PHP 4 client). 

To start off with we will create a folder called “tutorial” within the root “facebook-platform” folder.

Next we need to create to PHP files; index.php and config.inc.php. The contents of these files are displayed below: 

The index.php provides the foundation for the entire application. This is where the initial add page is created along with the embedded application.

1. First of all we need to include the facebook client library and the config.inc.php.

2. Next we instantiate an instance of the facebook class and force the user authentication before logging in.

3. Now we create an add application screen to be initially displayed when a user clicks to see your applications hompage. This code includes two simple facebook variables to display the users facebook username and to add the facebook add url for the application.

4. Finally we create the FBML code. This is the code that will be displayed for the embedded application. The code is very simple and is added using a Facebook Client API call $facebook->api_client->profile_setFBML(); This set the FBML when the Facebook application is added.

In this tutorial the config.inc.php will remain very simple and only includes two variables for the Facebook API key and a secret key. These are provided when you create your Facebook application in within the Facebook developer area (Detailed later in this tutorial).

download the tutorial code 

Download the facebook application development tutorial code.

integrating the application with facebook 

To actually add the application to Facebook you will need to go through the follwing procedures.

1. Upload the code within the facebook-platform folder to a PHP5 hosting environment.
2. Log in to Facebook and navigate to the Facebook developer page (http://www.facebook.com/developers/).
3. Click the “Set Up a New Application” button on the top right of the page.
4. Insert your desired application name and submit.
5. On setting up the application you will presented with an overview which displays basic application information including the API key and Secret required in your config.inc.php. Copy these two keys and insert them in your config file and then re-upload the file.
6. Next on the overview page click to edit your newly created application.
7. Next we need to insert the application details as follows:
   • The Callback Url – Add the URL to the root of the tutorial application folder you created and uploaded as above. I.E. http://www.yourdomain.com/facebook-platfom/tutorial/
   • The Canvas Page URL – Add your desired canvas page URL. This has to be unique to Facebook, although there is automatic validation to prompt you if it is not, so choose wisely. An example could be “andrewsellicktutorial” making the URL http://apps.facebook.com/andrewsellicktutorial/
   • Select the option to allow your application be added on Facebook.
   • The select users to be able to add your application on all pages.
   • Add your Canvas Page URL to the Side Nav URL. I.e. http://apps.facebook.com/andrewsellicktutorial/
   • Now save the application and that’s it.

To test it out navigate to the Canvas Page URL in your browser. You should then be able to go through the process of adding the application and finally seeing it displayed on your profile page.

This is a very basic example so I wouldn’t recommend users start to advertise their applications off the back of this tutorial. There will be more tutorials to come introducing more features and discussions on the Facebook Cache, its potential pitfalls and how to overcome them.

Feel free to play with the code and adapt it for your requirements and let me know how you get on…

I hope this has helped.