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.

Facebook reveal tab pre-like

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:

Facebook reveal-tab post like

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.

static HTML facebook application reveal tab

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

choose your facebook page

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

navigate to welcome tab

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

static html app

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>

html code on Facebook page

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.

create a fan gate

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">

code on static html app

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.

static html 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.

navigate to welcome tab

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

For a step-by-step walkthrough on how to create a Facebook page that makes money, download the ebook 20 Day Facebook Fix.

20 Day Facebook Fix

In this ebook, you’ll learn how to:

  • Optimize your page to get more likes QUICKLY.
  • Beat Facebook's algorithm so more fans see your posts.
  • Drive organic growth without spending tons of cash.
  • Create a giveaway to turn fans into email subscribers.

Add to Cart   Read More

GET UPDATES FROM ME DELIVERED TO YOUR INBOX.

Comments

  1. VishalBhosale says

    when one user invite to there frnds using facebook invites through application .the frnd of the user clicks on invite .they dirctly go to prelike image …but issue is ..this prelike page not showing in iframe…and the frnd of the user not like the app….please suggest any solution for that..?

  2. NataliaMakeupArtist says

    Hi Diana, I have been trying to do this for some time now but still haven’t managed to get it right. I have successfully installed an app and have the page source content and non-fan source content in place, but I think I am missing something. It doesn’t appear on the front of the page when you go onto it, but when you go to the app, it shows the message. Please tell me what I need for this! Hope you can help. Thanks! Natalia

    • NataliaMakeupArtist says

      I also forgot to ask, would this fan page restrict ‘non-fans’ from seeing all content on a page including the wall and images?

      • says

        @NataliaMakeupArtist No, non-fans will still be able to see all of your timeline content. The only content that gets gated is your fan-only content on your reveal tab.

    • says

      @NataliaMakeupArtist  Hi Natalia! Great question. Your reveal tab doesn’t appear as the default tab to first-time visitors — they’ll still see your timeline first. You need to get a little creative regarding how you promote your reveal tab, but it’s not too hard. Check out this article for a step-by-step walkthrough: http://ustandout.com/facebook/how-to-promote-reveal-tab-facebook-without-default-landing-pages I hope this answers your question!

  3. JosWezenberg says

    Maybe a little of topic…. i created a Facebook tab app linked to a photo album within my facebook page, but once you click on the tab instead of going straight to the album it says ‘go to Facebook.com’    I know that is the landing url i provided installing the tab (not creating the tab) but it didn’t let me do the photo album url. How do i get that changed because it looks really silly! 
    Also i would like to create a tab that links to another page we have. I made the app and installed it using the url of our ‘landing page’ in both creating the app and installing the app. The app installed fine, but the when you click on the tab the screen is blank! Where did i go wrong?
    Please anyone help me it is driving me insane!

  4. says

    Thanks Diana for this very informative post on using an iframe tab. I have followed your instructions which I found helpful. I look forward to seeing what other nuggets you have here.

  5. Alex says

    What kind of data would you collect about my users, and is there a fee or how does this app makes money just more on this static html app?

    • says

      Well, I’m not the developer of this app, so I wouldn’t collect any data about your users. :-) The Static HTML app does have various upsell paths, such as a drag-and-drop custom tab creator. But by following the instructions in this article you’ll be using the app for free.

  6. says

    I have added the app, but I am still unsure where to go after that. I want to allow my facebook fans to download facebook exclusive printables. I created the tab just fine but the content page after they’ve liked it is what’s holding me up. I’d like to have links they click and the file immediately downloads for them. My facebook page is: https://www.facebook.com/pages/Deseret-Designs/193416167412877?ref=tn_tnmn

    You can see the free downloads tab i created, i just don’t know what to do after… do i upload my images to photobucket to host them? do i just need to do a fake post on blogger to get the html codes from my images and put that on the html section on static html on fb? So confused!

    Thanks for any help you might have!

  7. Shela Steinberg says

    Hi there,

    So as of today (april 2013) you cannot force people to land on your “like” app? We do Facebook Advertising but I saw the only option would be to use the url associated with the app, right? We basically want to get organic fans by sending them to our iframe app which will say “like us” but I am still confused on if thats at all possible anymore besides using the URL. Thanks in advance for the help, your article was very useful!

  8. says

    Hi Diana,

    Nice post! I’m almost there, though. I successfully installed the app and included the image. I even installed another app to customize the icon. Although I can perfectly see and access the new tab on my page (I’m the administrator), no else seems to be able to. Where did I go wrong? Thanks!

  9. Reinhard says

    tried this and after adding the Static HTML Application, within seconds, all my pages got unpublished by facebook :-(

  10. says

    The blackberry Note II uses Google’s Android 3. The blackberry S taking on the iPhone. It’s not the most elegant
    or functional form, but it’s apparently left some nasty molten plastic remains on the inside that really matters as your mom would say. Providing all sorts of damage. The best mobile phone deals. The Note also makes a decent point and shoot, but it should get the job done.

  11. says

    Great information. Great tutorial. Works like a charm.

    Quick question:

    Say I click the like button which allows me through the gate to see the discount code. This then appears on my timeline and the timeline of my friends. But it only allows them to ‘Like’ this activity. Ideally I would like them to have the ‘Share’ or ‘Comment’ actions aswell. Is there anyway of doing this?

    I’ve done a bit of research and found out that:

    “With the Share button, it only appears on Facebook posts that are photos, videos, links or notes”

    But surely this app counts as a link?

  12. Anne says

    Thank you soooo much for this tutorial! I wanted something simple, and it was very hard to find. So glad I found your site.

  13. says

    Hello! Someone in my Myspace group shared this website with us so I came to give it a look.
    I’m definitely loving the information. I’m
    book-marking and will be tweeting this to my followers!
    Excellent blog and amazing design.

  14. Sam says

    @Diana: I am currently using this on my page but there is apparently one draw in this method…. may be you can help.
    Actually i used the static HTML to link my registration form (a free contactme form) but when i try to advertise it on facebook, i just doesn’t work and just shows to advertise the static HTML not the customization i have done to it like renaming and adding an icon pictures etc.
    Can you suggest what should i do?

  15. says

    Dear Diana, thank you for your useful Facebook tips. Long time I was looking for them, I will apply them and will post again if I need extra help. Thank you!

  16. says

    Diana,
    OK, I’m part way done and it looks like it’s going to work like a charm. My question is this: Can we use this method or modify this method to create OTHER tabs on our FB Fan Pages?

    Thanks so much for all the helpful information here. Also, do you recommend any third party apps for creating FB tabs / apps that do NOT require the ridiculous monthly fee?

    Sincerely,

    Jupiter Jim

  17. Mason says

    I am running a contest. I want to host an album of photos that display bands. In order for a band to win the prize their photo must receive the most likes, but I want their fans to have to like my page before liking their band photo. I can find a way to display albums or multiple pictures on a static page. Is this possible to do while still maintaining the possibility of someone liking an individual photo?

  18. silly billy says

    Hi This is really great. BUT I’m confused. Are you paying the $29 to do what you are doing on your tab or is it just good html with https hosted images.

  19. says

    hi, i read your article and it was very helpfull but im stuck, i followed the steps but every time i clicked on the html tab it loads blank instead of bringing up my web page nothing is showing at all. can you pls advice me on how to rectify this. thanks

Leave a Reply