Facebook Cookbook - Jay Goldman [70]
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 a div with the class mp3player_holder and a unique generated ID (e.g., mp3player_swf_fb_mp347f05b50e5add7c4380642047f05b50e5b392399159624), so you can find it in the DOM and apply whatever styling you’d like.
This isn’t the super-high-performance media-playing widget you might hope, so a few notes on compatibility and display:
The player supports only MP3-formatted files, so formats such as WMV or Ogg Vorbis are out.
The file’s bit rate must be an increment of 11 KHz (11 KHz, 22 KHz, and 44.1 KHz all work).
The song and artist fields have to be ASCII characters or they won’t display properly, so non-ASCII foreign languages (e.g., Kanji) are out of luck.
Adding song="" or artist="" will result in the title being displayed as “No Title” and the artist as “Unknown Artist,” respectively (rather than not displaying them). Leave the parameters out if you don’t want them in.
Keep in mind that embedding multiple Facebook MP3 players on one page is entirely possible, but they don’t have any intelligence built in to pause each other, so your users will end up with overlapping sound if they play more than one simultaneously.
Embedding Adobe Flash
Problem
I’ve made the most brilliant Adobe Flash piece ever created, and now I want to stick it in my FBML.
Solution
Use the fb:swf tag to embed Flash. The simplest form is:
Discussion
The FBML parser will automatically add a few Flash variables to your embed that you can then use in your Flash movie (these are similar to the parameters added by the fb:iframe tag—see Embedding an iFrame), shown in Table 6-6.
Table 6-6. Flashvars added by the FBML parser
Name
Type
Description
allowScriptAccess
string
This parameter is always set to “never” by Facebook, so that your embedded Flash movies can’t access any page-level scripts.
fb_sig_profile
int
If this Flash is being loaded in a Profile, this is the uid of the Profile owner. If it’s being loaded in a Canvas page, this will be blank.
fb_sig_time
int
A timestamp of when this signature information was generated.
fb_sig_user
int
The uid of the current user (a.k.a. loggedinuser).
fb_sig_session_key
string
The current Facebook session key.
fb_sig_expires
int
The session expiration time.
fb_sig_api_key
string
Your application’s API key, which the Flash movie will need if it’s going to make any API requests.
fb_sig_added
bool
Indicates whether the current user has added your application.
fb_sig
string
An MD5 hash of all the parameters with names that start with fb_sig_ plus your application’s secret key. See Enhancing security in your Flash later in this recipe for how to use this to enhance security.
There are a number of additional parameters you can use to tweak your Flash, listed in Table 6-7.
Table 6-7. Parameters for fb:swf
Name
Type
Default value
Description
Swfsrc
string
N/A
The URL of the Flash you want to embed. This is the only required field.
Align
string
left
Pick either “left”, “right”, or “center”.
Flashvars
string
None
Include any variables you want passed to your Flash movie here, making sure to URL encode them first. Facebook will automatically append a number of variables to your embed, as mentioned earlier.
Height
int
None
Height of your Flash, in pixels.
imgclass
string
None
CSS class to apply to the image specified in imgsrc.
imgsrc
string
spacer.gif
The image that will be shown in place of your Flash when it can’t be displayed or in places where the user needs