How to Create Facebook Tabs — The Dead Easy Way

click here to send an art card from

March 10, 2011 — the infamous day all Facebook fan pages received a
much-needed face lift. What does this mean for Facebook tabs? Well perhaps
initially, a cloud of dust and some confusion. After a month, the dust has pretty
much settled and the new tabs are better, simpler and ready for this,
even faster! Which brings us to this newsletter’s focus:

  • better: the look of the new tabs
  • simpler: the hook, line and sinker on tabs
  • faster: how-to create your own tab now

Better: The Look Of The New Tabs

What did we have before March 10th, 2011? Facebook tabs appeared horizontally across
the top of our fan pages. Now, Facebook tabs appear vertically along the left-hand
side of our Facebook fan pages. Ah, better yes? Yes! This means a greater
number of tabs have immediate visibility for our page visitors. A maximum of eight
tabs appear at any one time. To see more than the default eight tabs, users click
“More” below the last tab to reveal any additional hidden tabs.
click here for an example

Ultimately this means we can have alot of content pages. While
realistically, this provides greater flexibility, we should keep the old adage in
mind — simpler is better. The more options a page visitor has to select
from, the greater confusion in their mind and the less control we have in directing
their engagement path.

Ready for one, well maybe two, more bonuses? Tab names can now be longer and
we can brand an icon associated to our tab.

Simpler: The Hook, Line and Sinker On Tabs

Ready for a bit of tech talk? Plug your ears and let’s attempt a shallow
dive, shall we?

Prior to March 10, 2011, tabs were implemented using custom Facebook code known
as FBML. Now, tabs are implemented using a framework known as iframes
— which is muchos simpler. Note: all existing tabs using the old FBML
technology will still work and yes, modifications to all associated FBML code is
still possible.

But let’s talk iframes? Don’t panic, just yet! The cool thing is, iframes
provide greater ease in associating web content to our tab and greater flexibility.
Now we can really dream a dream! Iframes enable implementation
of a huge array of web applications to attract, engage and create raving
fans and customers! Actually, pretty much any web page can be hooked up to what
is called an iframe application.

Limitations? Page width, for one. Pages are limited to a width of 520px. Ensure
all your content within your page, including images are less than 520px, otherwise
you’ll be left with a fan page with scrollbars. Two, you are limited to whatever
the Facebook decision makers say you can or can’t implement on your page. For example,
Facebook policy forbids autoplaying media on web pages associated to your tabs.
Make sure your tab doesn’t autoplay anything, or your page may get shut down!

Faster: How-To Create Your Own Tab Now

Ready to hook up your own Facebook fan page tab? Two choices: you’ve
got some time
and want to understand the ins and outs of creating an
iframe application and hooking up a web page versus you’ve got no time
and want the fastest, simplest route to getting your tab now. This blog post uncovers
the latter route — in other words, I want it now. If you are interested
in how-to create an iframe application however, let us know. We’ll be glad to cover
it in a future newsletter.

Can we interest you in a little Three-Stepping?

Step 1: Install a third-party iFrame tab application

  1. Click
    Static HTML: iframe tabs
    , to hook into a third-party iframe tab application.

  2. To add a tab

    To add this app to your fan page, click on “Go to App” on top of this screen, and
    select one of your fan pages to add this app to.

  3. To access the HTML editor for this third-party tab

    To go to the HTML editor for your page, click “Welcome” on the left-hand side of
    your fan page, in the tab navigation area. When the page loads, the HTML editor
    will appear in the middle of your screen.

Step 2: Get started now with the third-party iFrame tab editor

  • Why two editor boxes?

    Two editor boxes will appear. In either box, you can write your normal website markup
    (also know as HTML code) or you can link to a web page anywhere on the internet.

    • If you leave the bottom editor box blank, fans and non-fans will both see the HTML
      content you entered in the box above.
    • If you add HTML content to the bottom editor box, non-fans will see the top
      content and fans-only will see the bottom content. Hint:
      This is a great way to create exclusive content for your fans!
  • What exactly can be entered in the editor box?
    • Normal website markup, otherwise known as HTML, can consist of anything you would
      use on a regular website: HTML, CSS, JavaScript, etc …
    • Or simply add a reference to an existing webpage like this:

      Copy the following snippet of code into either or both of the editor boxes, and
      replace with the url of the page you want to use. Note: to make
      this work, you will need to remove all other HTML from the editor box. Note: the
      page will be put into the 520px wide by 800px tall tab. If it doesn’t fit, scrollbars
      may appear. This might not be what you want!

Step 3: Ready for the home stretch and your own Facebook tab

  • How do I make this the default landing tab?

    To change the default landing tab of your page:

    1. Click “Edit Info” when you are on your fan page. Select “Manage Permissions” from
      the left sidebar.
    2. You will see an option called “Default Landing Tab.” From there, you can select
      which tab your fan page will default to.

      For an easy tutorial with pictures, click here

  • How do I change the name of my tab?

    To change the name of your page:

    1. Click “Edit Info” when you are on your fan page. Select “Apps” from the left sidebar.
    2. Then under the “Static HTML: iframe tabs” app (look for the star icon) click ‘Edit
      Settings.’ There will be an option to type in a custom name for your tab there.
      Additional tabs names are modified the same way.
  • How do get rid of resulting scrollbars?

    To prevent vertical scrollbars from appearing, check the “No scrollbars” box above
    the top editor box. This will automatically include a script in your page that will
    resize the iframe vertically and prevent scrollbars.

    To prevent horizontal scrollbars from appearing, make sure that your content is
    less than 520 pixels wide.

There we go — three easy steps to creating a new Facebook tab on our fan page!

click subscribe a the top right of this page, to never miss a post

Know of anyone who has a Facebook fan page or should be interested in having a fan
page? Share this post with them — they’ll be glad you did!

let nova Terra Studios create for you, or someone you know, the ultimate Facebook fan page

Share...Share on FacebookPin on PinterestTweet about this on TwitterShare on Google+Share on RedditShare on LinkedIn
It's about kicking PASSION into ACTION ~

Your Supercharged Bundle


  1. Joy Reynaldo (@joyreynaldo) - January 31, 2012

    Wonderful! Thanks so much for the easy instructions. Finally put up my first FB tab today 🙂

Leave a reply