How To Run Simple AJAX Requests in a Facebook Iframe Application

This tutorial assumes you already have a basic Facebook IFrame application up and running. If not, see our getting started tutorial.

First, we need a javascript function or library to handle our Ajax requests. To keep it simple, and cross-browser compatible, we use the Prototype Javascript Library. Specifically the version that is hosted and maintained by Google. To implement, add this to your canvas page header:

	<script src="http://www.google.com/jsapi"></script>
	<script>
		// Load AJAX modules
	   	google.load("prototype", "1.6");
	</script>

Next, create a DIV on your page to hold our AJAX enabled content. For example:

<div id="comments">Populating Comments....</div>

We need to create a separate file for the AJAX call to fetch and use to populate the div. So create a new file (I used simpleajax_divcontent.php in my example). Add whatever you want to that file. I used:

<?

//If we don't sleep then the DIV populates too quickly to see anything
sleep(3);

echo "Here are the comments from the Ajax page";

?>

I call that sleep function because the div would update too quickly to even see it otherwise (obviously in a real application you wouldn’t need to use it)

Now, back to our canvas page. Before the closing body tag, add the following Javascript to call the Updater function from the Prototype library. Substitute your file name for my ’simpleajax…’ name.

<script type="text/javascript">
new Ajax.Updater('comments', 'simpleajax_divcontent.php', { method: 'get' });
</script>

You’re done! One note: if you want to make Facebook API or XFBML calls on the page you are calling from the code above, you have to pass the fb_sig GET variables through the url ’simpleajax_divcontent.php?fb_sig=adfafdfafdqaf’ etc. This keeps everything authenticated. See our other post on the topic for more info.