Saturday, January 31, 2009

Using the Share-button to post multimedia (audio, video and flash) in FBML

I have been frustrated in trying to find out how to add multimedia using the share button. The FBML fb:share-button documentation (http://wiki.developers.facebook.com/index.php/Fb:share-button) provides an example of sharing video, but does not give all of the meta information that you can use if you want to share other media types -- they just link to another page which hides the info -- and it is only revealed if you click on the rather innocuous link: "How do I make sure the Share Preview works?". arghhh...

I had gone to that page numerous times and it was only in desperation I discovered it. Anyway, here is the "hidden" info:

Multimedia Tags

The ideal way for you to connect video and media files to the share link is to make the URL in the link point to an html page that contains the <meta>/<link> tags described above (title, description, image_src) along with some additional <meta>/<link> tags:

Audio (required)

<meta name="title" content="page_title">
<meta name="description" content="audio_description">
<link rel="image_src" href="audio_image_src_url">
<link rel="audio_src" href="audio_src_url">
<meta name="audio_type" content="Content-Type header field">

Audio (optional)

<meta name="audio_title" content="audio_title (eg. song name)">
<meta name="audio_artist" content="audio_artist_name">
<meta name="audio_album" content="audio_album_name">


Video* (required)

<meta name="title" content="video_title">
<meta name="description" content="video_description">
<link rel="image_src" href="video_screenshot_image_src_url">
<link rel="video_src" href="video_src_url">*
<meta name="video_height" content="video_height">
<meta name="video_width" content="video_width">
<meta name="video_type" content="Content-Type header field">

Video (example)

Here is an example Flash Video embed:

<embed src="http://www.example.com/player.swf" flashvars="video_id=123456789" type="application/x-shockwave-flash" width="300" height="200"></embed>

For that video, the appropriate metadata would look like this:

<link rel="video_src" href="http://www.example.com/player.swf?video_id=123456789">
<meta name="video_height" content="200">
<meta name="video_width" content="300">
<meta name="video_type" content="application/x-shockwave-flash"><meta name="video_type" content="application/x-shockwave-flash">

No comments: