Facebook Cookbook

Wide Versus Narrow Profile Boxes

Problem

I know users can drag my Profile Box from the wide body of their Boxes tab into the narrow sidebar, and I’d really like to be able to display different content when they do. How can I send different info to Facebook?

Solution

Facebook provides two tags that differentiate where the content should be shown: fb:wide and fb:narrow. It will be left as a task for the reader (that would be you) to determine which is which. There are no parameters for either tag.

Note that these tags aren’t used on a Canvas page in the same way as many of the other tags in this chapter. You’ll need to pass your FBML as a parameter to the Facebook API’s Profile.setFBML() method, which will update the cached Profile Box for the specified user. For more information, see Getting and Setting Profile FBML.

Discussion

If you call the Facebook API’s Profile.setFBML() and don’t pass in fb:wide or fb:narrow tags, everything you do pass in will be placed in both locations. Neither box has a height constraint, so you’re free to make your content as tall as you’d like (though keep in mind that people are more likely to remove your box if it takes over their entire Profile). The wide box is 388 pixels wide with an 8-pixel left margin and no right margin, so if you want them to be balanced, go for a width of 380 pixels. The narrow box is 190 pixels wide, with a left margin of 10 pixels and no right margin, so go with 180 pixels if you want balanced margins.

Don’t forget that there are ...