Create A Facebook Page Tab Using HTML IFrames

For those curious about how I created my Facebook welcome page…wonder no more. This tutorial aims to guide you through the step by step Facebook tab creation process.

If You Haven’t Yet…Create Your Fan Page
Go to http://www.facebook.com/pages/create.php

Install Static Html: iframe tabs from Apps

Go to http://apps.facebook.com/static_html_plus/

Click the button ‘Add Static HTML to a Page.’

Choose your fan page to add the Static HTML to. Confirm it again on the next page. Ok, now the app is installed successfully.

Adding Code to the Static HTML Application

At your profile home page, click ‘Welcome‘ on the left side menu.  (Give it a couple seconds to load.)

Design Your Facebook Page to Fit Properly

Before you add content to your Static HTML tab, you should have an idea of the design dimensions. This will insure that your graphic/media elements fit in the space provided.

The content width turns out to be 520px across.

Creating Your Facebook HTML code

All of the HTML code is going to need to be written to load your CSS without stylesheets. (e.g. style = “css goes here”)

Any images will need to be linked with absolute paths going to your domain. (e.g. http://yourdomain.com/images/img01.png)

I’ll make my HTML file available for download for anyone who wants it. Download Blake’s HTML.

Making Your HTML The Home Page

To make your new custom page the first page upon visit, go to ‘Edit Profile.’ Click ‘Manage Permissions’ and change ‘Default Landing Tab’ to your new page.

That’s It! Your Facebook Fan Page Is Live.

For anyone who wants to see my Facebook page, check it out here. Don’t forget to Like me!

Still having some trouble?
Here’s a short video of someone going through the Static HTML setup process on YouTube.