Facebook Cookbook

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:

<fb:photo pid="12345" />

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:

<fb:photo pid="12345" uid="12345" />

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:

<fb:photo pid="12345" size="t" align="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:

<img pid="2079254" uid="561415460" src="http://photos-g.ak.
facebook.com/photos-ak-sf2p/v168/16/97/561415460/n561415460_2079254_773.jpg" />

If you need to style the inserted image using CSS, just treat it like any other img tag.