Creating a custom Facebook tab using FBML

Recently we've been encountering questions about how to set up a Facebook page similar to the one we created for LightCMS. The secret is knowing how to get an applicaton called Static FBML to show up on your page. It's basically Facebook's version of HTML, and it lets you create customized tabs and landing pages that demonstrate your brand's uniqueness. With so many people now utilizing Facebook, Static FBML welcome pages are a great way to tell visitors what your business is all about.

First, there are some things you'll want to be aware of before you begin.

  • Static FBML can only be added to business / fan pages. It cannot be used on your personal profile.
  • You don't have to use any <header> or <body> type tags. Just start typing in your HTML (well, FBML).
  • Make sure you call external stylesheets rather than including styles between <style> tags. For example, use <link href="http://" rel="stylesheet" type="text/css" /> This is to accommodate IE, which, as you might imagine, doesn't work like all the other browsers.

Now, let's get started.

  1. To add the Static FBML app to your page, you will first have to have your Facebook fan page set up.
  2. Once there, click on the "Edit Page" link right below the main avatar graphic. You'll be presented with the editing screen, where you'll see a section called "Applications." At the bottom, you should see a "More Applications" section that should have Static FBML listed.
    fbml tutorial
  3. If it isn't listed there, just search for it in the search box up top.
    fbml tutorial 2
  4. Click on the Static FBML link to go to its site.
  5. On the Static FBML page, click the button that says "Add this to my page," and then select the page that you want to add it to. 
    fbml tutorial 3
  6. Return to the editing screen of your page, and look back under the applications section. You should now see something that says FBML. All you have to do now is click on "edit" and enter your information. You'll see a section to enter the name of your tab, and you'll also see a larger input box labeled FBML. Insert your code, and you've got a custom tab!
    final tutorial
  7. If you're interested in adding additional tabs to your page, you won't see that option with the rest of your application boxes. Instead, you'll have to click "edit" on an existing FBML box under your applications. In the bottom left corner of the editing window, you'll see a link that says "Add another FBML box."

    Clicking on that will create a new FBML box in your applications.

Remember that not all valid HTML is valid Static FBML. As far as I know, there isn't a definitive source for what is specifically valid and invalid. However, there are many great resources that help you to integrate some of FBML's cool features. Be sure to check out these other sites for more information.

Mashable's FBML HOW TO

Techipedia's FBML tutorial

HyperArts's FBML tutorial

So did you create a custom FBML tab? Drop us a link in the comments and let us see!

3 comments (Add your own)

1. Chris wrote:
I've started programming those as part of the "web-package" that I sell to my clients. They not only get customized web design-integrated into the CMS; they also get the option of a custom FBML fan page and Twitter background. I can also "pull" tweets into their website.

I really like Hyperarts tutorials, it helped me get started. Here's one I've done recently.

http://www.facebook.com/#!/pages/Copperfield-Church/135401009828842?ref=sgm

I'll be doing one for 100foldstudio soon.

http://www.facebook.com/100foldstudio

One other note: You can't have a "short" URL until you get 25 fans, then you can go to facebook.com/username and reserve a username for your fan page.

Tue, August 3, 2010 @ 9:53 AM

2. Chris wrote:
http://www.facebook.com/pages/Copperfield-Church/135401009828842?v=app_4949752878&ref=sgm

Updated URL for the Fan Page above

Tue, August 3, 2010 @ 9:55 AM

3. Neo Cambell wrote:
See this facebook fbml tutorial. The best I have seen on the net.

How to Create Facebook FBML Template, Part 1 & Part 2
http://www.expertcore.org/viewtopic.php?f=41&t=2030#p4857

Wed, November 3, 2010 @ 4:42 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free