How to Easily Add an iFrame Reveal Tab to Your Facebook Page – no PHP required!

Updated February 27th, 2013 with the latest instructions!

What is a reveal-tab?

A reveal tab is a custom tab on your Facebook page in which you can like-gate your content. This means that your fans — people who have already liked your page — will be the only ones able to see the content on your tab. Everyone else — people who haven’t yet liked you page — will see something different, such as a message letting them know that they need to “like” your page in order to get that exclusive, fan-only content. A reveal tab is a great way to get more likes on your Facebook page.

An example of a Facebook reveal-tab

You can go to U Stand Out’s Facebook page to see my Facebook reveal-tab in action. 

Here is the pre-like version of the reveal-tab, which encourages viewers to “like” the page to access an exclusive download.

Your default, pre-like content should be something that encourages users to like your Facebook page, possibly by using something like an incentive, discount, or exclusive content.

Once visitors “like” the page, the image will change to unlock the form:

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. You don’t need to have a form — you can place the exclusive content directly on this page itself if you’d like. Or you can include a button instead of a form to direct people to your website. It’s up to you!

How to create a reveal tab on your own Facebook page

If you try to code an iFrame tab from scratch, it requires the knowledge of coding and PHP. I’m assuming most marketers don’t know PHP, and many of those that don’t also don’t have the resources to hire someone to do it for them. Thanks to Facebook applications like Static HTML, it’s easy to create a reveal tab. Here’s how to EASILY add an iFrame reveal tab to your Facebook page, without knowing much code:

Go to the Static HTML Application, and click Add Static HTML to a Page.

Select your page from the drop-down menu and click Add Static HTML: iframe tabs.

Head over to your Facebook page, and click on the Welcome tab on the top of the screen.

Next, you’ll want to add a simple HTML editor, which allows you to create static HTML content. Click Use this app under HTML

Here you will be able to edit the pre-like and post-like pages of this custom tab. First, you need to enter your post-like content. You can use HTML/CSS in these text fields. For example, if you’re using an image that links back to your website, include the following code:

<a href="http://yoursite.com"><img src="http://yoursite.com/image/file.jpg"></a>

Then click Fangate to edit the pre-like version of your reveal tab. Then click the checkbox next to Enable fangate, and click use and app instead.

On the next page, select the HTML app. Then Enter your pre-like HTML. If you’re just including an image here encouraging viewers to “like” your page, you can use the following simple code:

<img src-"http://yoursite.com/image/file.jpg">

Errors you might see in the Static HTML app

If you see the error message for Broken URLs, you may have to delete and re-add the quotation marks in your HTML code to fix the error.

If you see the error message for Insecure URLs, you can simply ignore that error message.

If you’d like to learn how to customize the reveal-tab image for your Welcome tab, you can read the step-by-step instructions here.

How to promote your reveal tab

In early 2012, Facebook took away the ability for you to make your reveal tab your default landing page unless you’re running an ad through their advertising platform. Instead, any new visitors to your page will see your main timeline page by default, and your updates there are visible to everyone — fan or not. This means you need to get a little creative regarding how you get visitors over to your like-gate tab. You can learn how to promote your reveal tab here; this article includes how to:

• Strategically name your app tabs and prioritize the order
• Pin a story promoting your reveal tab to the top of your timeline
• Link directly to your reveal tab from your website, like this