How To Add Multimedia Content To Facebook Fan Page Using Static FBML

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.

Facebook Banner


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 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. */
/>

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 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. */
/>

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 Video Url
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!

If you have any questions, feel free to ask them in comments below.
Image Credit: pshab

If you enjoyed this article, get email updates (it's free).

blog comments powered by Disqus

NEXT POST: Newer Post PREVIOUS POST: Older Post Home
 

About Rajeev Edmonds

MintBlogger author - Rajeev EdmondsRajeev Edmonds has been blogging since 2006 about digital marketing, social media and of course about problogging. He specializes in WordPress installation and Thesis theme customization. He is the founder and editor of MintBlogger, Fresh Tech Tips and Taste Defined.

Since April, 2012, he's making his living entirely from his blogging efforts. He holds a post graduate degree in computer applications and loves to dig in CSS/HTML code. Read more →

Get Custom Design For Your Blog

Website showcase Nothing converts better then a unique blog design with a branded look n' feel.

Get a unique design for your blog that brings more leads and prospects for your business. Give a new skin to your existing theme to stand out in the crowd. Change theme and see the difference!

Request a Free Quote NOW!

Start Your WordPress Blog

WordPress logo Are you planning to start your own self-hosted WordPress blog? You can get one today!

This is right time to get started. Claim complete control over your WordPress blog hosted on a reliable and powerful web server. Be the owner of your WordPress blog without any restrictions.

Claim Your Free Blog Setup NOW!