How To Create A Facebook Landing Page or Tab

One of the questions I get the most from clients is how to create a custom landing page or tab in a Facebook Page. It’s really not difficult, but it does require a little skill and knowledge.

If you’re developer, there’s a developer app with some great documentation. If you’re not, there’s a Static HTML: iframe tabs application that provides a friendly way of setting up a custom tab without too much pain. It even has built-in reveal functionality, which is the ability to present additional content to visitors after they press the Like button.

Here’s what you do:

Step 1: Install the Static HTML: iframe tabs Application

Install the Static HTML: iframe tabs application on the Facebook Page. If you administer several, you’ll be presented with a choice of pages to choose from.
Install Static HTML: iframe tabs in a Facebook Page
Then go to the page and click on the new “Welcome” tab that was added by the application.
Click on "Welcome"
This brings up the application’s interface.
Static HTML interface

Step 2: Create Your Content

As you can see in the screenshot above, your content can consist of HTML, CSS, Javascript or anything that you might have in a web page. You can be as simple or elaborate as you like. For the Kaiscapes page, I simply created a image in Photoshop and uploaded it to this website.
Kaiscapes Facebook Landing Page image
Then I entered some simple code to display the image in the application.
Code to display the landing page image

Then I created a second image in Photoshop to reveal to the visitors after they press the Like button.
Kaiscapes Facebook Thank You image
This time, the code sends them to this website if they click on the image.
Reveal function code

Then click on the “Save and view tab…” button at the top.

Save and view tab button

You’ll get a message saying your tab has been saved, and be able to view it as a fan or non-fan. At this point, I should echo the warning that Facebook forbids autoplaying any media on tabs. Make sure your content doesn’t autoplay anything, or Facebook may shut your page down.

Step 3: Make This Your Landing Tab

The last step is to make this tab the default when visitors come to the page. Click on “Edit Info” at the top of the page.

Edit InfoClick on “Manage Permissions.”

Manage Permissions

Set the Default Landing Tab to the one you just created.

Set Default Landing Tab

At this point, you’re pretty much done. If you want to change the name of the tab to something else, click on “Apps” while you’re in Edit Info.

Click on Apps

Then click on “Edit Settings” for the application.

Edit Settings

A popup will appear where you can change the Custom Tab Name.

Custom Tab Name

Originally published at Kaiscapes by Peter Liu.

Leave a Reply

Your email address will not be published. Required fields are marked *