Building my first Facebook Application

So I went through the Facebook documentation on how to build an app. It was very easy and straightforward. There was an example app called Footprints. I downloaded the PHP code along with the Facebook PHP client library and FTP'd it to my host. I thought of using the example code as my initial code and i'd just build on top of it. I had to also set up a MySQL database on my host for the app to run. You just run an SQL script provided in the Footprint sample app.

Configuring the app on facebook was a breeze. You go to: http://www.facebook.com/developers/ and click on Set up New Application.  Facebook gives you an Application key and a secret key to use on your client code.

You just need to specify the Canvas url which is the absolute path to your index.php on your host. For example:

Canvas Callback Url : http://myhost.com/myapp/index.php

Of course you need to supply the Canvas Page Url. This is like searching for a domain name. I wanted to get apps.facebook.com/MusicGuru but it was already taken so I just chose apps.facebook.com/SongGuru

Then i went back to the Footprints PHP code and entered the App key and Secret key on the config.php.

So after setting this up, i was ready to test the Footprints app.

I went to apps.facebook.com/songguru to see what it looked like.

The first problem I ran into was a minor database config error.

Warning: mysql_query(): supplied argument is not a valid MySQL-Link resource in /.../footprints/lib.php on line 11

So, the fix was just to specify 'localhost' as the IP address of your database on the config.php file

// The IP address of your database
$db_ip = 'localhost';

Another error was when I clicked on Step button:

Warning: Missing argument 3 for FacebookRestClient::notifications_send(), called in /.../footprints/lib.php

The fix was to add a 3rd parameter to this API call:

$result = & $facebook->api_client->notifications_send($to, ' stepped on you. ' .'../apps.facebook.com/songguru/.', 'app_to_user');

Another error was this:

Fatal error: Call to undefined method FacebookRestClient::feed_publishActionOfUser() in /.../footprints/lib.php on line 58

Turns out that this API call is obsolete:

$facebook->api_client->feed_publishActionOfUser($feed_title, $feed_body);


So I replaced it with this:

$facebook->api_client->feed_publishUserAction($feed_title, $feed_body);

After that most of it seemed to work. I could see stuff saved to the database.

Now it was time to create the functionality for SongGuru. So i got rid of some example code and retained the important ones for logging in, displaying the name, and publishing the stream. Next thing to do was create the client side stuff. When i configured my App earlier, I had been deciding whether to use an iframe or FBML for my Canvas render method. I chose the FBML of course. The iframe approach was too easy. I wanted to burden myself with Facebook code.

So with FBML, you don't need to put 'html' and 'body' tags. This is already taken care of by the canvas. You can put html tags, css, javascript and FBML (Facebook's tag-based API calls). And so i put all those.

When I tested the app once again I was wondering why my Javascript wasn't working??? If you choose FBML as your render method, most of your javascript functions will not work. You have to use FBJS which is Facebook's own Javascript wrapper functions. For example:

myAnchor.href = 'blogger.com' becomes myAnchor.setHref('.blogger.com')
myButton.value = 'Submit' becomes myButton.setValue('Submit')
myDiv.innerHTML = '' becomes myDiv.setTextValue('')

Setting css classes would have to be like this:

document.getElementById('panel').setStyle('visibility', 'visible');

Facebook canvas already has the clearfix css class defined so you do not have to write your own clearfix rule. Just add class='clearfix' to your tags that need it.

Also getElementsByTagName and getElementsByName do not work. You can only use getElementsById.

You can also make Facebook Javascript API calls inside the canvas. For example:

Facebook.showPermissionDialog('publish_stream,read_stream');

This will display a dialog box asking the user's permission for automatic updates by the app.

To sum it up, it was very easy creating a Facebook app. I love how Facebook created their APIs. Of course you need to think of something interesting to create. My next post will talk about the app I made.