Facebook Cookbook

Embedding an iFrame

Problem

I was smart and didn’t build my app as an iFrame, but now I need to put an iFrame inside the page.

Solution

Use the fb:iframe tag to embed an iFrame inside of FBML. The simplest form is:

<fb:iframe src="http://www.someserver.com/" />

Discussion

The embedded iFrame actually gets all kinds of interesting goodies appended to the embedding URL (these are similar to the parameters added by the fb:swf tag; see Embedding Adobe Flash), which you can use in that page to render more intelligent content. If you take a peek at the HTML rendered by the FBML parser, you’ll see something like:

<iframe src="http://www.someserver.com/?fb_sig_in
_iframe=1&amp;fb_sig_time=1206929247.1825&amp;fb_sig_added=1&amp;
fb_sig_user=12345&amp;fb_sig_profile_update_time=1204849318&amp;fb_
sig_session_key=123456789&amp;fb_sig_expires=0&amp;fb_sig_api
_key=123456789&amp;fb_sig=123456789"></iframe>

Two important things to note: you can’t use fb:iframe in a Profile Box, and you can’t use FBML inside the iFrame, since it won’t be parsed by the FBML parser. There are a bunch of additional options you can include as parameters in the fb:iframe tag, which are listed in Table 6-5.

Table 6-5. Parameters for fb:iframe

Name	Type	Default value	Description
src	string	N/A	The URL of the content you want to load into the frame. Facebook will automatically append a number of parameters to your URL, as noted earlier. This is the only required field.
frameborder	int	1	Sets whether the frame has a border (1) or ...