Facebook Cookbook - Jay Goldman [69]
fb_sig_user=12345&fb_sig_profile_update_time=1204849318&fb_
sig_session_key=123456789&fb_sig_expires=0&fb_sig_api
_key=123456789&fb_sig=123456789">
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 not (0). Take careful note of this one because it isn’t a boolean and it isn’t yes/no.
height
int
None
Height of the iFrame, in pixels. Note that this may be overridden if you turn on smartsize or resizable.
name
string
None
This is required only if you’re using resizable to resize the iFrame from the JavaScript API.
resizable
bool
false
Controls whether you can resize this iFrame dynamically using the JavaScript API. This can’t be used when smartsize is enabled (so you have to pick one or the other), and you’ll have to provide a name so that you can address it from your script.
scrolling
string
yes
Controls whether the iFrame has scrollbars. Note that this one isn’t a boolean or a 1/0, but rather one of “yes”, “no”, or “auto”.
smartsize
bool
false
When set to true, smartsize will automatically size your frame to fill the remaining empty space in your Canvas page.
style
string
None
Anything specified in this field will be applied to the iFrame as an inline CSS style.
width
int
None
Width of the iFrame, in pixels. Note that this may be overridden if you turn on smartsize or resizable.
Embedding Facebook Photos
Problem
I know my users have some great photos in their Facebook Photos app and I’d really like to be able to embed them in my FBML.
Solution
Use the fb:photo tag to embed photos from the Facebook Photos app. The simplest form is:
Discussion
You’ll likely have found the pid of the photo you’re embedding through the Facebook API’s photos.get() method (see Chapter 9 for more information). If you used FQL to find the photo, you’ll need to include the uid that you used in the query to find the photo so that Facebook can make sure that user is allowed to view it:
You can also specify a size parameter, similar to the fb:profile-pic with the same allowable sizes: thumb (t), small (s), normal (n), and square (q). See Worth a Thousand Words: Profile Pictures for a breakdown of the different sizes. The final optional parameter is align, which can be either left or right:
The fb:photo tag actually renders out a standard HTML img tag, so if I embedded a photo of my dog, Findley, from my Photos album of dog pictures, the FBML parser might ultimately insert this:
If you need to style the inserted image using CSS, just treat it like any other img tag.
Embedding MP3s
Problem
I want to embed a playable MP3 into my Canvas page.
Solution
Use the fb:mp3 tag. The simplest form is:
Discussion
The Facebook MP3 player (Figures 6-5 through 6-7) is designed to match the rest of the Facebook interface and should look right at home on your Canvas pages.
Figure 6-5. Facebook MP3 player (closed)
Figure 6-6. Facebook MP3 player (playing)
Figure 6-7. Facebook MP3 player (paused)
In these examples, the optional song and artist parameters were specified:
title="How to Speak Hip, Side 2" artist="Del Close