Facebook Cookbook

Embedding MP3s

Problem

I want to embed a playable MP3 into my Canvas page.

Solution

Use the fb:mp3 tag. The simplest form is:

<fb:mp3 src="http://host.com/file.mp3" />

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:

<fb:mp3
    src="http://someserver.com/my.mp3"
    title="How to Speak Hip, Side 2"
    artist="Del Close and John Brent" />

You can also specify a width and height, which will not actually scale the player but will cut it off (at the time this was written, the height parameter actually did nothing). Specifying a width of 20 will give you Figure 6-8.

Figure 6-8. Facebook MP3 player with 20 px width

As you may have guessed, the MP3 player is actually an Adobe Flash widget that gets inserted into your page by the FBML parser. If you want to position it using CSS, note that it gets added to ...