How To Create A Facebook Reveal Page Using Static HTML: iFrame Tabs

A reveal page Tab on Facebook are used to encourage new visitors to Like your page. To get your visitors to like your page an incentive such as a free gift, discount, exclusive content etc.. is offered.

Examples of Pages Using Reveal Page Tab

Digistore offers “Discount Codes, Unadvertised Specials, Free Monthly Giveaways.”

Sheets promises “Instant access to more content.”

What do you need to create a reveal page

Landing page And Reveal Image

You need to create an image 520px wide. This is going to be the first thing your non fans will see. You also need a landing page your fans will see, once they like the page.

If you don’t have a landing page you can use our FREE iFrame fan page template – Download template

iFrame App

You have two choices, you can build your own iframe tab app from scratch or you can use one of the third-party iframe applications mentioned in pervious post – The best Facebook iframe apps

You can learn more about building your own iframe application from scratch: Tutorial: how to create your own iframe application

I am going to show you how to create a reveal tab using a application called Static HTML iFrame Tabs by Jason Padvorac

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;

  Example:
  <img src=”https://www.yourwebpage.com/image.jpg”>

• External CSS (.css) and JavaScript (.js) files;
• 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.

  Example:

  <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

let’s get started on creating your reveal tab.

1. Add the Static HTML iFrame Tab Application to Your Page

First, you’ll need to add the Static HTML iFrame Tab application to your page – located here.
Follow the simple instructions that are also shown on the application page.

Here is a tutorial on how to install Static Html iFrame tab, if you get stuck – install Static iFrame app tutorial.

2. Add Reveal image and fan-only content

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.

Pre-fan content (Add Reveal image)
Add the HTML code to embed the reveal image in non fan content box, your images must be hosted elsewhere (on your company’s website, for example) and only referenced in your HTML code.

Below is the sample HTML code to use to embed the image into the application:

<img src=“https://www.yourwebpage.com/image.jpg”>

[optional] fans-only content (content only fans will see)
Your reveal content should provide your new fans with whatever you were offering, such as something to download, a discount code, or a link to the exclusive content. You might also want to thank people for liking your page.

3. Make your Reveal Tab the Default Tab

You’ll want to make sure that your new reveal tab is the first thing that visitors see when they have not yet liked your Facebook page. To do this, go to your edit page and Click on the “Manage Permissions” select “default landing tab” select your tab and then click on save.

The Final Reveal Page tab – Visit http://www.facebook.com/ilikethisfanpage