• Choose a category
• All
• Classic-Fiction

By Root 708 0

of creating apps with really rich Ajax interactions, which can even run outside of Facebook (provided that the user is logged into Facebook in another window or tab).

Since there’s no server-side code, there’s nothing for you to download. The first step is to create what’s known as a “channel page” on your server, which uses a library developed by Facebook to enable communications between your site and Facebook without running into cross-domain scripting limitations. Create a page on your site called xd_receiver.html and enter the following HTML into it (you can copy and paste from http://wiki.developers.facebook.com/index.php/Cross_Domain_Communication_Channel):

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Now you can create the HTML pages for your app. Load the Client Library JavaScript into the of each page:

When you’re ready to start making API calls, instantiate a Facebook API Client object, passing in your app’s API key and a domain-relative URL to the xd_receiver.html page:

var api = new FB.ApiClient('1234567890123456789', 'xd_receiver.html', null);

That’s about it for setup! Now you’re ready to build your JavaScript-based app.

Discussion

If you’re doing a lot of JavaScript development and aren’t already using Firefox with the Firebug add-on installed, I highly recommend you make the switch (see Use Firebug (No, Seriously) for more info about Firebug). Apple has recently added some fantastic developer tools to Safari, which is quickly becoming an excellent platform for building JavaScript apps. Microsoft’s Internet Explorer 8 has some really compelling JavaScript features (particularly the debugger), but we won’t see it in reliable production for some time yet.

There are eight methods in the JavaScript Client Library that give you control over the Canvas page that your app is running inside:

FB.CanvasClient.startTimerToSizeToContent()

iFrames in Canvas pages are sized to fill the remaining space in the page by default. If you would like your iFrame to adapt to the content you put in it, call FB.CanvasClient.startTimerToSizeToContent() and Facebook will start a timer that regularly checks in on the content and resizes appropriately.

FB.CanvasClient.stopTimerToSizeToContent()

When you are ready to have the iFrame stop resizing, call FB.CanvasClient.stopTimerToSizeToContent(), and it will revert to the default behavior.

FB.CanvasClient.setSizeToContent()

If you want to make a one-time adjustment to the size to match the content (rather than having it continuously adjust), call FB.CanvasClient.setSizeToContent().

FB.CanvasClient.setCanvasHeight()

You can manually adjust the height of the Canvas by calling FB.CanvasClient.setCanvasHeight(). Note that the width is always set to 646 pixels.

FB.CanvasClient.add_windowSizeChanged(), FB.CanvasClient.remove_windowSizeChanged()

These two methods let you add a listener to the window’s event so that you can be informed of changes to the window’s size and adjust appropriately.

FB.CanvasClient.get_timerInterval(), FB.CanvasClient.set_timerInterval()

These final two methods let you get and set the timer interval used in FB.CanvasClient.startTimerToSizeToContent().

The Wiki’s JavaScript Client Library page (http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library) has some great sample code on it which demonstrates retrieving a user’s friends and how to make a bunch of API calls in batched mode to save bandwidth and increase performance.

The library currently supports Internet Explorer 6 and 7, Safari 3, and Firefox 2 and 3 (the Wiki currently says that the beta of Firefox 3 is unsupported, but