How to Create Rich HTML Tabs on Your Facebook Page

If you are a Webmaster or HTML developer, whether in a big company or a small business you should probably know by now that creating a Facebook page can be a very important social marketing tool these days. Hopefully, you already have a Facebook page created for your business; if not, you should definitely look into setting one up and reading up on some Facebook Marketing Tactics.

One important thing about these Facebook pages is that besides standard Facebook wall interaction, they allow you to create custom tabs where you can use HTML to design and build creative small boxes that can be mini-websites on their own.

Here are some examples of the Facebook tabs from Best Buy and Gap:

As you can see, one can get very creative with these – just like for your website design.

Why would you want to create these tabs? Well, it’s a good way to update your Facebook content and promote anything new. If you’re a store that sells products, you may want to create a new tab every time you have a big sale or to outline a new line of products. If you benefit from seasons/holidays, you can update the tabs according to seasonal sales and specials. There are tons of reasons, but the bottom line is that you want to create and constantly update interactive content and stay in touch with your Facebook audience.

So, how exactly do you do add these tabs and work with HTML?

You should add a Static FBML application to your Facebook page, which will allow you to create new tabs/boxes and render HTML code. If you’re having any problem adding the application, check out a detailed explanation from Greg Finn on Customizing the Facebook Page.

Once the FBML Application is added, you can use it to create new tabs and boxes. Just click on Edit next the FBML box and now you can name your tab/box at the top and insert your HTML code at the bottom.

Here you can design and build your layout using regular HTML. It can be as simple as inserting one big image, or building a mini-website.

A few things to keep in mind when working with this application:

1. The max width should be around 750px.

2. Some people find it easier to use table layouts here as they are nice and compact. However, if you’re a CSS stickler who absolutely hates tables, you can use a CSS-based layout.

3. CSS code is allowed. There are a few ways to get it in there. You can either:

• Use CSS at the top of the HTML by including it inside the <style></style> tags
• Use inline CSS within each element by using style attribute, like: <div style=”CSS here”>
• There is a way to reference external stylesheet by following Facebook rules on including files. You would need to specify a version number, which is a bit unusual.

Facebook will rewrite some CSS while rendering so that only elements within your box are affected and not the entire Facebook template.

4. You can include flash files as well. If you’re into flash design, you may just be looking for a way to embed a flash file using this application. You can do so by using the following FBML Code template:

<fb:swf  swfsrc=’http://www.yoursite.com/flash/flash-file.swf’ imgsrc=’http://www.yoursite.com/images/flash-image.jpg’ width=’650′ height=’408′ />

The way FBML includes flash files is that you first need to display an image. Once the user clicks on the image, the flash file then starts to play. In the code above, you need to specify the location of the flash file and the image (as well as width and height). The image can be a screenshot of the flash or a separate intro image; it’s up to you.

5. Image and File Hosting: It’s probably best if all images and other files are hosted externally. If you have a company website already, just host your images on that server. If not, you can look into getting some free file hosting.

6. Image bug fix in Firefox: One small, but annoying thing that I noticed is that some images can have unwanted space in between them in Firefox, which happened to me only when rendered through Facebook (and looked fine on a regular website). This can be especially annoying if your layout consists of images that need to be blended together.

I used the following CSS trick to fix the problem (inside <style> tag):

img {
display:block;
}

Just make sure that rule does not interfere with any other CSS you may have or cause any problems.

7. No javascript or other scripting languages are allowed – so just use HTML/CSS and, of course, FBML.

Finally, once you save the page, it will create the new tab and a box under the Boxes tab. This seems a bit redundant to me, so you can then delete the box itself or the Boxes tab altogether and just leave the Tab. Then you can also drag your new Tab to position it; whenever makes sense.

You can also add additional Tabs/Boxes by clicking on ‘Add another FBML Box’ at the bottom of the FBML Edit page.