Choosing between an FBML or IFrame Application(2)

Now, with XFBML, in addition to being able to embed things like fb:name and fb:profile-pic directly into your HTML, you can render any FBML tag by using server-side FBML. If you wrap your FBML inside fb:serverfbml tags, as in:


...then this opens an IFrame to Facebook on the page being served from your domain, and Facebook will render the FBML in there.

However, a fair amount of overhead is involved in opening the IFrame, and your CSS won't propagate into the FBML IFrame, so you won't want to put too many blocks of server-side FBML on a page. But if you need one or two snippets of FBML to make your application richer, or you want a large chunk of your page to use FBML, this makes that possible and pretty easy.

---

Preload FQL


Preload FQL lets you do these sorts of queries on both FBML and IFrame canvas pages, though it works differently for each. In general, you specify a few regular expressions that map to lists of FQL queries. If the page being requested matches any of the regular expressions, the corresponding FQL queries will be executed by Facebook when the user's browser sends the request to Facebook.

For FBML applications, the results get sent along to your application's servers when Facebook requests the FBML from you. Most of the time, this makes calls to the Facebook API unnecessary, even when you need fairly complicated data from Facebook to generate the page.

This is what the flow would look like for an FBML canvas page using preload FQL

FBML Canvas Page Using Preload FQL



Preloading FQL works differently with IFrames. In order for Facebook to send data to your server along with the request for the IFrame, it has to encode the data in the URL being requested. Instead of sending the FQL result set to your server, the Facebook server sends the FQL result data down to the user's browser, attached to the outer frame that contains the Facebook chrome on the canvas. You can choose whether you want to have a lightweight redirect occur, which encodes the FQL results in the request made for your IFrame page. Or, if you only want to access that data on the client side, you can use the PreloadFQL_get method from the JavaScript client library and rewrite parts of the page on the fly using the data after it's initially rendered.


IFrame Canvas Page using Preload FQL


Note that the preload FQL will only work on the first page that loads in your IFrame. If you point your links to apps.facebook.com URLs using target="_top" instead of just linking to different pages within the frame, you could use preload FQL on every page, but this would make all your pages load slowly