Facebook fan page has emerged as a major social media outpost for businesses 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) */
/>
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 3 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. */
/>
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.*/
/>
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 didn't worked 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 doesn't 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. */
/>
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.
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!
If you have any questions, feel free to ask them in comments below.
Image Credit: pshab
Continue Reading
