How to Write Your Own Facebook App in 5 Minutes

Do you know that the Facebook Apps Directory now contains more than 350,000^ Facebook applications for their 300 million users.

Whether you are looking to embed presentations in your Facebook profile or want to share your favorite books and movies with friends or just want to spend time playing a word game with strangers, chances are that there already exists a Facebook app to solve your problem.

However if you are feeling a little more adventurous and want to develop your own Facebook App that works the way you want* and doesn’t carry any third-party branding or advertising, here’s a an easy tutorial to help you get started.

[*] Check out apps.facebook.com/digitalinspiration.

[^] For comparison sake, the Apple iTunes store is relatively bigger as it has about 85,000 apps for their 50 million iPhone + iPod Touch users worldwide.

How to Write a Facebook Application in 5 minutes

check

The Plan: We’ll write a basic Facebook app that will have links to our social profiles and a Google site search box. Later, you can expand the idea to build slightly more complex applications that contain RSS feeds, video clips, etc.

Things you need: You don’t have to be a "geek" for writing basic Facebook Applications. All you need is some knowledge of web programming languages and some free space on a web server where you’ll host your Facebook app (which are nothing but simple PHP files).

OK, let’s get started.

Step 1. Assuming that you already have an account on Facebook, add the Developer application to your Facebook profile and then click "Set Up New Application".

Step 2. Give your new Facebook App a name, agree to the terms and then upload some image for your application logo.

Step 3. From the Application settings, choose Canvas and set FBML as the rendering method. The other option is IFRAME but we’ll use FBML for the moment to keep things simple.

Step 4. Using any WYSIWYG HTML editor (or even notepad), write the content that you want to display inside your Facebook application.

In this example, we are adding just two hyperlinked images with a Google search box and therefore the code looks something like this:

Step 5. Log in to your web server where you’ll be hosting the Facebook App and create a sub-directory called "facebook". So if you domain is example.com, the Facebook app can be accessed from example.com/facebook.

Under the facebook directory, download (wget) the application template and rename the file to index.php. Replace the API Key and the Secret key in index.php with real values and also copy-paste the HTML (that you created in Step 4) into the index.php file.

Step 6. While you are inside the "facebook" directory, download the Facebook library (through wget) and extract the files in this archive via gunzip and tar. Now execute the following command to move facebook.php and other library files outside the facebook-platform subdirectory.

$ mv facebook-platform/client/facebook*.php .

Step 7. We are almost done. Go back to your Facebook Application page in the browser, click "Edit Settings" and set the values for Canvas.

• The Canvas Page URL – choose a nice vanity URL for your Facebook application.
• The Canvas Callback URL – location of the web service where your files are hosted (in our case, this will be example.com/facebook).

That’s it. Anyone can now add your Facebook app to their profiles either in the Boxes tab or in the sidebar of the main profile page.

Check the "Stay Connected" box on this Facebook page for a working demo.

Extend your Facebook Apps

We just created a basic app but you can make it more useful with simple modifications. Some ideas:

#1. You can incorporate RSS feeds in your Facebook apps though a feed parsing library like SimplePie.

#2. You can track your Facebook application usage via Google Analytics. Just add the following code in the PHP code.

#3. You can use the same CSS Styles and color schemes for your Facebook Apps that are used on the main Facebook site.

#4. If you want to embed YouTube video or Slideshare presentations in your Facebook apps (as shown here), you should use the <fb:swf> tag.

#5. Instead of using a plain search box, you should consider using the Google AJAX search API (see example) as that will let you customize the look and feel of search results to match other elements on the Facebook page.