How to make custom Facebook Fan Page tabs with FBML, Part 1

UPDATE 2-14-2011: FBML is going away – learn about Facebook iframe tabs on Facebook Pages here

UPDATE 3-10-2011: Easily create and manage custom Facebook Page Tabs with SplashLab Social – Now available!

If you have started to dabble in the new wave of “social media marketing” you probably made your business/brand/company/band/etc a Facebook Fan Page. These are basically just like regular Facebook user profiles except instead of a business having “friends”, they have what are (more accurately) called “fans”. This seems like a good idea since Pages provide a great way for companies to interact with their customers. That part of Fan Pages is a good idea, and everyone seems to have a link to “find us on facebook!” now because of it! But there are challenges.

It’s hard to brand a Facebook Page. You can change the Profile Picture and upload photos and videos, etc, but it all feels very much like Facebook still. This consistent visual look is one of the great things about Facebook, but if someone finds your company on Facebook before ever visiting your regular website, your ability to educate the visitor about your products or services is extremely limited. And if you send someone to your Facebook Page from your regular website, there is no clear way to route them back to where the sale will actually be made. It can be a problem. Once they hit Facebook you are at the mercy of whatever users post on the Wall or write in the Reviews tab.

Again, this is the good thing about social media and “the web 2.0”. Getting direct feedback from customers and being able to engage in dialog with them in invaluable. But doing so at the expense of your brand seems unnecessary. Fortunately with some planning and effort you can get the best of both worlds from a Facebook Fan Page: branding/sales and customer feedback. The key is using FBML to make custom Facebook Tabs and Boxes. Using these you can leave all of the great default Facebook social functionality intact and also:

add boxes next to the Wall with your own images, logos, colors, links and text
add entire custom Tabs complete with video, audio, comments, blog content, Twitter feeds, and much more
make one of these custom Tabs the default “landing” tab for your Facebook page

With a little bit of work your Faceook Page can become truly yours; featuring products, services, specials, newsletter signup forms, and more. All with your brand’s colors and styles! It’s just takes a little FBML know-how.

So what is this FBML stuff, then?

“FBML” stands for Facebook Markup Langauage. It is much like HTML. A Facebook “FBML Page” is a combination of both FBML tags and HTML tags. One reason for the addition of FBML tags to regular HTML is to make it easy to include special Facebook features in a Page, like the visitor’s Facebook name or a list of their Friends.

Another reason for FBML is that Facebook wants to maintain a clean and secure website, so some regular HTML tags (especially ones related to Flash and JavaScript) have been “disabled” and replacement FBML tags are offered in their place (sometimes). For instance you cannot just use the HTML <embed> or <object> tags. If you want to include Flash video, you have to use the “<fb:swf>”:http://wiki.developers.facebook.com/index.php/Fb:swf FBML tag.

Here are some helpful pages to educate yourself on FBML. In these wiki pages are useful bits like which FBML tags are available, and which HTML tags aren’t.

If you already know how to make web pages with HTML then FBML is easy. There are bugs, quirks and “gotcha’s” of course, but the general principal is the same as HTML. The tag list and css tips, combined with the testing area, will have you making sharp FBML pages in no time.

But how and where does one go about typing and entering all these FBML tags? In the context of simply wanting to add custom tabs to a Page, there are two ways: