Facebook Pages for Business Tutorials | Web Page Design Tutorials Home

How to Create iframe Tabs for Facebook Pages

In previous tutorial, we already created a simple Facebook Page. A simple Facebook Page looks the same as a Facebook personal account. Let’s take a look at the tabs of a newly created Facebook Page again:

create facebook iframe tab

The default tabs of a Facebook Page are Wall, Info and Photos.

For a Facebook personal account, the above tabs are good enough. However a Facebook business page may require some additional tabs, for example, About Us, Company Information, Our Service, Our Products, etc… Actually additional tabs can greatly enhance contents of a Facebook Page and provide more useful information to customers.

Now we are going to discuss how to create new tabs on Facebook Pages.

We already create another new Facebook Page (MoneyBusters)  before. We will use this MoneyBusters Facebook page to create a new tab (Make Money Team). Moreover this new tab (Make Money Team) will also be the landing page (i.e. homepage) of MoneyBusters Facebook page.

To give you some idea how the new tab works, let’s take a look at the final result of MoneyBusters Facebook page.

create facebook iframe tab

Okay! Let’s see how to create a new tab for MoneyBusters Facebook Page.

The basic information of MoneyBusters Facebook Page is shown in the diagram below:

create facebook iframe tab

In order to add a new tab, you need to access the Facebook developer page. Click on the "Developer" link at the footer.

create facebook iframe tab

Note:
Facebook will require to confirm your account if this is the first time you have accessed developer page.

Once access the Facebook Developer page, Click on the"Apps" link on the top menu as shown in the diagram below.

create facebook iframe tab

The Apps screen appear. Click on the "Create New App" button to create a new App. Actually a new tab created on a Facebook Page is also consider as an App.

create facebook iframe tab

A New App window pop up. Enter a name for the new App in the App Display Name field.

create facebook iframe tab

The App Setting screen appear. Enter the required information and change the tab icon (optional) as shown in the diagram below.

create facebook iframe tab

Each field of the App Setting is explained in the diagram below:

create facebook iframe tab

As you can see, the new tab is simply an iframe that displayed contents from your hosting account.

Note:
Developers are not allowed to use FBML to use Facebook server to render contents a few months ago (about March 2011).  Now developers can only use iframe to display contents of new tabs of Facebook Pages.