MMLaboratory

Is your Facebook page dull and uninviting?  Maybe you’ve seen those really attractive Facebook pages and wondered, “How’d they do that?”

Given Facebook’s powerhouse status for marketers, isn’t it time you upgraded your Facebook page?

How can you help your brand stand out from the competition and increase the relevancy of your Facebook page?

The answer: Static FBML.  This article will share what you need to know to conduct a Facebook page makeover.

What Is Static FBML?

FBML stands for Facebook Markup Language, which is a subset of HTML.

Static FBML is a Facebook application that allows Facebook page administrators to create custom boxes and tabs on their Facebook pages. This application isonly available for Facebook pages, not for personal profiles or Facebook groups.

Adding Static FBML to Your Facebook Page

You can add Static FBML in four easy steps.

#1:  Make sure you are an administrator of the Facebook page so you have the ability to edit.

#2:  Go to the Static FBML application.

#3:  Click “Add to my Page.”

#4:  A window will appear that contains a list of the Facebook pages for which you are an administrator. Click “Add to Page” to add the application.

Static FBML is now added to your page.

Before you add content to your FBML box, you should have an idea whether you want to set up your FBML box as a tab or keep it as part of your wall on the left-hand column. That way, you can make the necessary image or video size adjustments so these components fit in the space provided.

Setting Up Static FBML as a Tab

To set up your FBML box as a tab, click on “Edit Page” under your Facebook page logo/avatar located on your wall.

Scroll down to the “Applications” section and locate the FBML app and click “Application Settings” (see below). Make sure that the “Tab” setting is “added”. Your FBML box is now added as a tab.

To the left of application settings you will see an “Edit” option on your FBML.  This is where you will ultimately paste your HTML code.  You can also add a “box title.”  The box title becomes the name of your tab.

Please note that your FBML box must be coded for a maximum width suitable for a tab.The maximum width for an FBML box for a tab is 520 pixels.

Setting Up Static FBML to Your Left Column Wall

The ability to have multiple FBML boxes encourages you to have an FBML box on your tab as well as part of your wall on the left-hand column (or JUST on the wall). Let’s add an FBML box to your wall.

Go back to your wall and click on “Edit Page” under your Facebook page logo/avatar.

Find the FBML box and click on “Application Settings” (shown below).

Make sure the “Box” settings are “added”. The “Box” setting is important so thatyou have the option of moving your FBML box to the left-hand column of your wall.  Go back to your wall, find your boxes tab and locate your FBML box.  Click on the pencil icon (shown below) and select “Move to Wall tab.”

Your new FBML box is now added to your wall.

Please note that your FBML box must be coded for a maximum width suitable for your wall. The maximum width for an FBML box on the left side of your wall is 180 pixels.

Click here, go to the wall and scroll down to see the ‘Useful Links’ box on SocialMediaExaminer.com’s wall.  You can drag boxes up and down the left side of your wall.

Adding Content to Your Static FBML Box

Now that you have an idea where you want to place your FBML box, it’s time to edit and add content. To begin, click on “Edit Page” located under your Facebook page logo. Scroll down to the “Applications” section and locate the FBML app, but this time click “Edit.” The FBML box will be empty.

This is the area where you can name the FBML box and add HTML code. Please note that FBML does not work with all HTML code.  For example, JavaScript does not work.  You’ll need to experiment.

If you scroll down to the bottom of the box, you can add additional FBML boxes.

The maximum number of FBML boxes you can have is 10.

Now let’s spice up your Facebook page. I’ll go over the two most popular enhancements using Static FBML – adding a clickable image and embedding a YouTube video.

How to Add a Clickable Image in Static FBML

When adding an image in the FBML box, I’ve found that the best place to host images is Photobucket. Using Flickr or Facebook photos caused issues for me. If it works for you, stick with it. The maximum width for an image in the FBML box for a tab is 520px.

There is no maximum height, but think of it as a landing page by keeping the scrolling to a minimum. Ask yourself: do you want users to scroll down to get the message or do you want to get the main point across once they’ve landed on your page?

Upload your image to your Photobucket account. Copy the direct URL to the image you intend to use in your FBML box. Next, you want to use this code:

<a href=”http://xxxxx” mce_href=”http://xxxxx” target=”_blank”><img src=”http://yyyyy” mce_src=”http://yyyyy” width=”##px” height=”##px”border=”0″ alt=” “></a>

Replace the xxxxx with the target URL. Replace the yyyyy with the direct link to your uploaded Photobucket image. Replace the ## with your width and height in pixels.

How to Embed a YouTube Video in Static FBML

As with images, I would recommend a maximum width of 520px for a tab. After uploading your video, you want to use this code:

<fb:swf swfbgcolor=”000000” imgstyle=”border-width:##px; border-color:white;” swfsrc=”http://www.youtube.com/v/xxxxx” imgsrc=”http://img.youtube.com/vi/xxxxx/2.jpg” width=”520″ height=”400″ />

Replace the xxxxx with your YouTube’s video ID. In both examples below, “MqqKPWhY4es” is my YouTube ID.

Example 1: In this YouTube link: http://www.youtube.com/watch?v=MqqKPWhY4es, all the characters after the “=” are the YouTube ID.

Example 2: If your YouTube link looks like this: http://www.youtube.com/watch?v=MqqKPWhY4es&feature=player_embedded, all the characters after the “=” and before the “&feature” will be the YouTube ID.

You can change the values of “swfbgcolor” and “imgstyle” to your preferences. The “imgsrc” is a bit trickier because it is a preview image. When a user clicks on the preview image, it turns into the video. To see a real-life example, you can go to theMarketwire page (see below screen shot). In order to change the preview image, you can replace the URL to a direct link to one of your Photobucket images (or any other source).

Make sure you open and close all tags and quotes.

Example of a clickable image with an embedded video

How to Set the FBML Box as the Default Landing Tab

The option of setting your FBML box as the default landing tab, rather than the wall, is one of the most relevant enhancements you can make to your Facebook page. This is where adding Google Analytics to your Facebook page helps tremendously with tracking.

In order to set your FBML box as your default landing page, go to “Edit Page” under your Facebook page logo and scroll down to “Wall Settings.” You’ll notice a section called “Default Landing Page for Everyone Else.” Visitors who are not fans of your page will see your newly created FBML box. Visitors who are fans will land on your wall.

That’s it!

Thanks to our friends at Social Media Examiner for putting this together