Multimedia Content Facebook Fan Page FBML

in face facebook, facebok, facebook apps, Facebook Fan Page FBML, facebook login, login face book, what is a facebook fan page

Facebook Fan Page has emerged as an important and big social media outpost for businesses relations and individuals. Fortunately, Facebook gives us ample flexibility to customize our fan page as per our needs and taste. One of the customization options at our disposal is - Static FBML (Facebook Markup Language). Although there are infinite customization possibilities with FBML, we as a user rarely use this powerful feature to its full extent. One such possibility is - 'Adding Multimedia Content to Facebook Fan Page'. Let's see how to do it the easy way.

You can embed various video/audio formats through FBML. Images can be inserted either through FBML or through normal HTML tags. Whatever media format you are using, make sure it's hosted on web, because an absolute URL is needed to embed the media through FBML.

Embedding Flash-based FLV (Video/Audio) File

Almost all multimedia components are embedded within a container. All you need is - calling the appropriate FBML tag with appropriate attributes. To embed a flash video, you need to host it on web with an absolute url directly fetching that video.

<fb:flv
src='http://path-to-flv-video...' /*Absolute url pointing to FLV video file. */
width='300' /* Width of video container in pixels. */
height='400' /* Height of video container in pixels. */
color='#FFBB00' /* Background color code, while movie is playing. */
salign='r' /* Alignment within container. (l-left,r-right,t-top,b-bottom) */
scale='showall'/* Flash attribute. (showall,noborder,exactfit) */
/>

The last attribute 'scale' supports three options. The 'showall' option plays the whole movie with original aspect-ratio, regardless of container dimensions mentioned by you. 'noborder' option fills the container body with the movie leaving no blank space within the container. If container size is smaller, this option may crop the movie. Last option 'exactfit' rearranges the movie size exactly matching the dimensions of the container. This may distort the movie if there is big difference between container and movie dimensions.

Embedding Flash-based MP3 Audio File

Embedding an MP3 audio file is a cakewalk. All you need is an absolute url pointing to the file, title of the album/song and name of the singer.

<fb:mp3
src='http://path-to-mp3-audio...' /*Absolute url pointing to mp3 audio file.*/
title='Name' /* Title of the song. */
artist='Artist' /* Name of the singer. */
album='Album' /* Title of the Album. */
/>

You can also provide width and height of the flash-based mp3 player. The 'height' attribute is fixed at 29 pixels and overrides the value provided by the user.

Embedding Photo

The best and simplest way to embed a photo involves using HTML '<img>' tag.

<
img src='http://path-to-mp3-audio...' /*Absolute url pointing to image file.*/
/>

You can align the image within the container (if any) using style attribute. Facebook provides FBML tag for embedding photos posted on Facebook. I've tried it, but it did not work for me. If you know about it, please do share in the comments below.

Embedding Shockwave Flash (SWF) Object

Embedding Shockwave Flash videos (e.g. YouTube videos) is a bit tricky. When you embed a YouTube video to a fan page, it does not play automatically. You have to click it to get it started. A workaround solution to this problem is to display the video image for the clicking action. Let's see how to do it.

<fb:swf
swfbgcolor='000000' /* Background color of flash video */
imgstyle='border-width:3px; border-color:white;' /* styling for the image */
swfsrc='http://www.youtube.com/v/xxxxxxxxxx&autoplay=1' /* Absolute url pointing to flash video. */
imgsrc='http://path-to-image file...' /* Absolute url pointing to image. */
width='340' height='216' /* Height and width of image and flash video. */
/>

You can observe xxxxxxxxxx in 'swfsrc' attribute. Open a YouTube video in a browser and copy the highlighted portion of url as shown below.

Replace the copied string with xxxxxxxxxx. Append '&autoplay=1' to the url to ensure video is played immediately after the user clicks the image.

YouTube allows you to embed custom-size videos. Make sure your image size matches the size of the video. Take the screenshot of the first frame or the initial black screen of a YouTube video of same size. You can use this image for 'imgsrc' attribute. Host it on any 3rd party image hosting service that allows direct linking (Eg: Photobucket). Update the width and height with your custom values. That's it!