This is a basic tutorial showing you how to build a Facebook landing page using a application called Static HTML iFrame Tabs (by Jason Padvorac its easy to use and allows you to add 2 landing pages: 1 for non-fans, and 1 for fans.
There are other Static HTML / iFrame type applications available now too, read post The Best Facebook iFrames Apps
You need to have your Fan page setup first – read this tutorial
You Need SSL Web Hosting
The Static HTML app has had https functionality since its release, but it only hosts code/text — if you’re hosting content from a different server (for content besides text, like images, video, sound) you’ll want to have a server that has https enabled.
Files that MUST Be HTTPS Within Static Html App
- Images — <img /> tag;
- Embedded files, such as Flash and Video. YouTube is served over SSL, so you can simply change its embed-video URLs from “http” to “https” and they work fine.
<iframe title="YouTube video player" width="480" height="390" src="https://www.youtube.com/embed/A7F2X3rSSCU" frameborder="0" allowfullscreen></iframe>
If you want to get https (SSL) web hosting I recommend HostGator Business Plan, to get $9.94 off on any order, enter the promo code on the order page DISCOUNTCODE994OFF ,you will also need a domain, we recommend you get domain hosting at Name Cheap
1. Create a call to action image
A really cool trick you can use for the “html” part of this method is that you can create a .jpg file and store it on a server somewhere and then simply link it on the static html iframe tabs application area using just one line of code:
You can hire someone to create a graphic image 810px wide (previous tab size was 520px by 800px.
Example of call to action landing page Take a Sheet fanpage
2. Add the static HTML: iframe tabs App
The app you need for your custom page is called “static HTML iframe tabs” located here. If you’re logged into Facebook, you can add it to your Page. It is essentially a blank canvas where you can add whatever content you want, including custom images and links via standard HTML.
3. Setup your tab
Once you’ve added the static HTML iframe tabs app, click “Welcome” in the tab menu below your company’s profile image. This will bring up the apps settings.
In the Fan box – just put a link to your image or html code
Below is the sample HTML code to use to embed the image into the application:
(optional Non fans – only content) – this is where your content goes for fans that have not liked your page yet. So you could put something to entice fans to like the page, like my page and I reveal more information to you..something like that
You can add standard HTML to the page as you would any website, including images, text, links, and other formatting.
4. Change Tab name
If you want to change the tab name, to something more appropriate, like “Special deals,” or latest news,” depending on how you plan to use your Page. Click on “edit info”
then click on “apps”
Select static HTML iframe tabs app – edit settings
You should see a pop up window – Change tab name
5. How To Add More Tabs
You can add up to 12 welcome tabs. When you are in the static html app, click on “FAQ & Help Center “
Click on entry for “How do I add more than one tab?“ click on the second tab
You will be taken to the static app page, click add to your page on the left side of navigation
Select your fan page to add a second welcome tab
The Final Fan Page landing tab – Visit http://www.facebook.com/fanpagetemplates
Any problems leave a message on the developers Facebook page – help
Thats it! let me know what you think of this tutorial, by leaving a comment below