How To Build A Facebook Landing Page With iFrames (Part 2)

Facebook Page iFrame App I know what you’re thinking: “After 3,400+ words you still have more to say about Facebook iFrames?”

Yes, there is a lot to say in regards to taking your Facebook Page to a new level of awesome, specially when iFrames are opening the doors to do new and exciting things. In Part 1, we talked about how to do this the hard way, I mean becoming a verified Facebook Developer and building everything yourself, my style. But there are other ways of accomplishing this and I want to make sure I put it on the table for you.

Before We Start…

There are a couple of things we should state before jumping into this.

  • There are 2 posts before this one that you might need to have handy, first the post about Building Facebook Landing Tabs on FBML. Second, part 1 on how to build iFrame Landing Tabs.
  • I still think you should become a Facebook Developer, not just for this but for other stuff like adding comments anywhere you want. Even if you’re not planning on doing anything at the moment.
  • The main thing here is not losing sight of your business/Page objectives, sometimes when we use free and easy out-of-the-box solutions we end up settling for what they offer, even if it’s not what we wanted in the first place.
  • I’ll talk about two options here, I’m sure by now there should be many more but I think these two are good alternatives if you feel you’re not ready to build from scratch.
  • These apps will NOT save you from crafting some kind of HTML but they will help you skip the app creation process and you won’t need to become a Facebook Developer.

So between the previous post and this one, you have two options to build your landing tab, building yourself or using an app. You decide, I just lay it out for y’all to play it out.

Ready? Let’s do this thing…

WildFire iFrame App for Facebook Pages

First we’ll use the application from WildFire. Let’s go step-by-step as we did in the previous post.

1. Install App on your page

Head over to the Facebook application profile page (remember apps also have profile pages) and click on the “Install App” huge green button. We are prompted with a dropdown menu to select the page where we want to install the app.

Select the page to install your app

Once you selected your page, click on “Add iFrames for Pages”.

2. Register with WildFire

Once you click on the button you are directed to the Facebook Page where you chose to install the app and you are immediately prompted with this little form where WildFire will capture your info (the app is free after all).

Register your application with WildFire

3. Configure your App

Click the “Submit” button to go to the actual configuration page where we’ll find a very simple interface.

As you can see in the following image, the first thing is the option to turn on and off the Fan Gate. To explain it in plain English, if we turn it off, anybody that visits the tab will see the same information but if we turn it on we can present our Non-Fans (people that have never liked our page) with one image or HTML file and our Fans with a whole different one.

In other words, when a first time visitor comes to your page they land on the Welcome Tab and they see one thing, perhaps a welcome message and a call-to-action to Like the page. Once they like the page, the information on the tab changes. Something like what we used to know as “Reveal Tab” on FBML.

iFrame App Configuration

We’ll turn on the Fan Gate for this exercise and now, you get the option to upload a simple image or to actually enter your HTML code. Do NOT forget that we’re playing with a 520px width.

In this example I’m selecting the “Custom HTML” and in order to keep things simple for the tutorial I’m just calling a couple of different images from my server.

WildFire Fan Gate Setup

4. Unlike your own page

I’m not kidding, in order to experience what your Non-Fans are going to see and how it converts to the other image once you have liked the page, we will have to unlike our own page first. Now you can test the results…

So I first see the “Non-Fans” image as I show you in the following screenshot. Notice that since I’m logged in, there is an “Edit Settings” button right on top of it. What this means is that you can go back and make changes without leaving your page. Other people of course won’t see that button.

Facebook Landing Tab for Non-Fans

Once I Like the page, the tab changes to this:

Facebook Lanting Tab for Fans

5. Make changes

So what does it take to make changes? Well, since you are calling a HTML file or image that lives on your server, you will just need to alter those and they automatically update on your tab unless you change the name of the actual file being hosted.

That’s it. You have a landing tab.

Static HTML: iframe tabs

Static HTML: iframe tabs offers pretty much the same features through the same process. Although this is more of an independent approach (created by Jason Padvorac and Timothy Mensing), you can see it in the image it has 190,841 users but by the time I finished writing this post it already has more than 316k. Impressive.

Static HTML iFrame Tabs

Once you have installed the application on the desired Facebook Page you get this very simple interface. As you can see on the image, you get the same possibilities for showing different options to fans and non-fans.

Static HTML Tab

When you’re done inserting your piece of HTML simply click on “Save and view tab…”

One thing that caught my attention and I didn’t see in the WildFire app is that there are other versions of the application for a second and third tab if you plan to have more than one on your Page.

What Should I Put On My Tabs?

We talked about the possibilities iFrames brings to the table and also the new level of difficulty. The potential to innovate and do creative things with these tabs is pretty open, however, before you jump into doing all kinds of crazy stunts and turn your Facebook into a flea market, I have to strongly suggest to have one clear goal in mind and put all focus there.

One thing is clear to me, you can’t ask for too many things from your new visitor, all in one small piece of real estate. That’s why I mention these three elements you should consider as priorities:

The Like

Getting a Like is just the first step, it’s basically putting our foot in the door. The reason it is so important is because the people that like you will now see updates on the News Feeds, which is the first page you see when you go to Facebook. The majority of people won’t visit your actual Page very often, in fact, most will never come back.

This doesn’t mean they don’t see you, they do and they can interact with your content (likes and comments) from the News Feed. Think of Twitter, if you follow someone you get visibility to their tweets from the stream or a list but the chances you will ever go back to their actual profile on the Twitter site are pretty low.

This is why the Like should be your number one goal for conversion.

Welcome Message

I said it before, most Facebook Pages look about the same. There is no room for an introduction or to deliver your key messages as you do on your website or blog. If you don’t take advantage of the landing tab to tell your new visitors where they are and what they are about to get from it, you simply just miss that opportunity and they are presented with a generic wall that doesn’t say much.

A welcome message can be text, or you can step up your game and embed a nice welcome message on video. If you decide to go this way, grabbing your embed code from YouTube or Vimeo to insert into your HTML is fairly easy.

One last piece of advice for the message, make it short regardless of the media type you use. Keep your video under a minute if possible.

Email Opt-in Box

If you run an email marketing program to build a list, you will want to take advantage of the kind of exposure you get on Facebook. I don’t blame you. You are probably thinking that an email address is far more valuable than a Like and you might be right, depending on your objectives.

However, you’ll have to decide how to play this card. Is it too much to ask if you’re already asking for a Like? There are a couple of way you might be able to pull this off:

  • Take advantage of that second tab these applications offer once your visitor gave you that Like and use it to add your opt-in form in there. In this case you will need to get the code from your provider (Aweber, Mailchimp, or other)
  • You can simply add a link on the tab and redirect the user to an external landing page, which very well could be a page on your blog or site.
  • There is also the possibility of using a whole separate tab for this, actually, your service provider most likely already offer an App for that. This way you make it completely optional. In my experience, people do visit those extra tabs if you grab their attention. I have an Involver tab that brings my tweets inside a tab and it gets quite a few hits every week.

In my opinion, and since we are on Facebook (only the biggest freakin’ website on planet Earth…), you should put the focus on getting that Like even if you have to sacrifice the email subscription.

Final Word

The Apps I mention are pretty simple, you bring your HTML and we’ll put them on a tab. Forget that. Focus on being creative to do something that will convert, whatever that is in your case. Think out of the box (or the tab).

Are there other apps? you bet, free ones, for a price and even for a monthly fee.

What are you using to build your tabs now that FBML is gone? How are you using them? Do you have a crazy idea on what to do with them? Questions? Or maybe you just want to disagree with me for any reason, anyways, leave a comment!

If you need help designing or building this you can also consider hiring me to do it, just drop me line via email. Most of my clients are entrepreneurs and small businesses.

Happy iFraming!

  • Ahugessen

    Bizarre. Post would not open in Safari but works fine in Firefox? Just an FYI
    Haven’t been through this yet but will now.
    Props in advance as I’m sure it is fantastic as always, just wanted to point out the safari issue.

  • Thank you!!!! This is fantastic and exactly what I needed.

  • I just check on Safari and it did open for me, thanks for letting me know anyways =)

  • Set up static html – everything looks fine, shows great but will not show as the landing page whether I go in as a fan or not. Just shows the wall
    I have changed permissions to make my new tab the default landing page…. ???

  • Alex, you need to set up that as your default landing tab. You can do on your Page settings, that point is explained at the end of this post:

    Let me know how it goes.

  • I did that the first time and have gone back and double checked. As a fan or not a fan I still only get my wall???
    Francisco, I will contact you about hiring a private consultation because I am pulling my hair out here.


  • Thanx i’m going to tweet about this story!

  • Minkcards

    While I prefer the functionality from your previous post (“How to Build A Facebook Landing Page with iFrames”)…the WildFire option is good for people like me that don’t have their own server. It was super-easy to upload my image and now I have a functioning Landing Page. Thanks again Francisco for all the help and advice. You are my social network guru. 😉

  • I tried installing with the first announcement from WildFire with no success. Tonight, I am trying again with the same result: We’re sorry, but something went wrong. We’ve been notified about this issue and we’ll take a look at it shortly.

    The error box returns the message immediately after clicking “Add iFrames for Pages” with the appropriate page selected.

    Any clues?

  • after following steps i thought I had succeeded however I can’t even see my page….I spent hours trying to figure out how to do this and with no success. every time I try to find a new tutorial I still can’t get this new facebook set up. I wish you could help btw it’s for my new blog not Purple’S Theory

  • laisunshine

    For the Static HTML: iframe tabs, once you download it, there is an FAQ section. This section tells you about making multiple tabs. How exciting! I thought I would share. Thanks for you post!

  • Tborja

    Try this too! Page iFrame Tab App

  • Chris

    Is there a way to double fan gate? I would like to offer co-branded promotions requiring fans to like two pages.

  • THIS worked! Few, finally. After trying 5 different ways this one worked. Used Static HTML to create a custom welcome bag which then becomes my order page once they are fans. I want to add more pages, but I’ll save that for another day. Thanks for this!!!!

    Become a fan of my facebook page to see what I did 😉

  • Mary

    How about the profile image? I would like to see FB offer more options with the profile image for business pages.

  • Torsten Edelmann

    Very interesting entry, once again – just a question: do you have any idea how one would implement the difference between fans and non-fans in your own app (as described in your first article)? Because thats what I’m trying right now, and I’m not very successful.

  • Lisachocolate7

    This is what is happening to me. I did changed it but it is still shows my wall as landing page. Please help me 🙂 Thanks!

  • This is exactly what I’ve been looking for. Thank you!

  • Hay thanks for your post 🙂
    My onlydoubt is. In html file uploaded to our server, what code do you put to show diffrent content for like and diffrent for unliked users?

    I dont want to use any of the apps mentioned above. Cheers

    Shovan S
    Web Designer / Creative Director

    w: /

  • Charles Edouard

    For me the problem is not using Wildfire or others apps, the problem is that I can’t have my “welcome” tab as a first page when entering it. All I can see is the wall. It’s so frustrating!

  • Cl0b

    Just a note to change ur default landing tab to the tab you want non fans to see

  • I love your work!! Just a question – well I guess it’s really 2 questions:

    I used your first post and had my facebook app working well but then it stopped working and was giving an error message to people about the secure server (https://), no matter what I tried I couldn’t get it to work – if you could tell me how to fix this that would be awesome.

    So I then changed over to the Wildfire app – to make sure I had a welcome tab in the meantime – but as far as I can see you are just uploading an image and the clickable links don’t work. Is there a way to make this work?

    I hope those questions aren’t too silly!?!?

    Thanks in advance

  • what will happen to old static fbml pages…..

  • Anglenhomes

    Is there a way to install the same iframe app on your page multiple times? There will be more than one Iframed webpage on my site and i can figure out how to add a iframe app twice…

  • Anglenhomes

    Is there a way to install the same iframe app on your page multiple times? There will be more than one Iframed webpage on my site and i can figure out how to add a iframe app twice…

  • LaTonya

    Hi Francine… The same thing happened to me (secure server error).  Are you getting the same error I’m getting.  I think my error came up after I got a message from facebook asking me to enter info into the “secure canvas url” on the apps settings page.  I made the mistake of doing so and now can’t access my apps setting page anymore.  Here’s the error I’m getting Francine.  Is this what you’re getting too?  If anyone can help me solve this, it would be much appreciated.  Thank you!

    “Secure Connection Failed
              An error occurred during a connection to

    SSL received a record that exceeded the maximum permissible length.

    (Error code: ssl_error_rx_record_too_long)”

    I think this error came up for me

  • Lauramorgan

    I’m not getting the registration box after choosing my page … the welcome tab is on the page but had error message…. presumably because I haven’t registered?

  • Coby Joseph

    I used static html and its great except I would like my link (which I set up with image-map) to open in an external tab, as opposed to inside the same page.  Can that be done?  Thanks so much for the help and your articles.

  • Very interesting entry, once again – just a question: do you have any idea how one would implement the difference between fans and non-fans in your own app.

  • Nikesh Ghimire

    I installed the APP and it shows the standard pages but does not let me change the contents to host ones in my own server. When I click on “EDIT SETTINGS” on the app, it redirects me to my hope page. Nothing happens… I dont’ want my FANS to see the standard page. Is there some other way to edit my page than this?

    PS: Your Step 2: Register with Wildfire never showed up either!guide me please?

  • Pattie Lee

    Thank you so much for this. You are the first person with current step-by-step directions on how to do this. I really don’t understand why Facebook can’t have something like this on one of their pages, easy to find. This has been incredibly helpful. Do you have any suggestions on how to fix the secure server issues?

  • Tammy

    The second iframe app worked. I just have one problem. The links in the welcome page bring my website into facebook rather than taking me to my website. What could be causing that to happen?

  • The General

    Maybe you have already address this in one of your blogs, I didn’t find it.
    Is there an free way to get your facebook iframe secure hosted to comply with fb requirement for all iframes to be https complaint by 10/01/11?
    Thanks… Great Blog BTW

  • Elizabeth Laney

    Please give us some guidance on what to do to meet the secure requirements starting October 1. If we use wildfire do we need a SSL?

  • I must say that this is one of the best post I have ever visited…Very well systematic and in a proper way..

  • Anonymous

    Your web site is top-notch I will have to read it all, thank you for the diversion from my classwork!

  • Thanks for the valuable info. Much apprecvitaed. I wsated a whole day yesterday watching tutorials on how to use fbml. A well. you live and learn

  • Tiffany

    i know you said it is easy to add a video to the landing page by grabbing the html of the video, but how to i make sure it ends up in the right spot on the page? is there an area in the edit section where i would put the link for the video? 

  • I have created my landing page and set it as the default landing page
    but the new tab doesn’t default as the landing page. Any thoughts? I am
    also missing the like button – is additional code needed?

  • Thanks for posting the Statis HTML: iframe tabs! It was EXACTLY what I needed … and much easier than ANYTHING else I’ve found!

  • Anonymous

    Perfect! These articles written too great,they rich contents and data accurately.they are help to me.I expect to see your new share

    seo link building servic
    Immigration Attorney Los Angeles

  • Anonymous

    Superb article mate but how do get your rss feed? Please sending us an e-mail with instructions? Ta

  • Great post I was able to improve my welcome page and now im working on other pages in my page

  • Hey, maybe this has been mentioned previously, but I’m using Safari 5.1.2 on a MacBook Pro, and the blog posting wouldn’t load for me on multiple attempts.  It only loaded the comments.  I then tired the posting with Firefox 9.0.1 and Opera 11.60, which both also are installed on my MBP and the page loaded fine.  Maybe I have some setting in Safari out-of-whack, but I wanted to mention the issue in case it is one that effects others.  I’m new to your blog but the pieces I have read are insightful and I anticipate I’ll learn a lot from your work here.  Thanks!!

  • Steinar Atli

    Million times thank you! 

  • This is

  • This is a very interesting post; I wonder if the new facebook layout that is supposed to take effect on April 1st will have any effect on iframes?

  • I know what you’re thinking: “After 3,400+ words you still have more to say about Facebook iFrames?”

  • I put it on the table for you.

  • I want to make sure I put it on the table for you.I want to make sure I put it on the table for you.

  • I’ll talk about two options here, I’m sure by now there should be
    many more but I think these two are good alternatives if you feel you’re
    not ready to build from scratch.

  • Fransica

    Heya, Fransisco.
    I see that you’re the most reliable person to me for anything about Facebook.
    Why don’t you give us tutorial about creating facebook app store, that can update any product from our blogs to facebook page.
    That’s possible, right?

  • Suzette

    Me too, I was ultra happy when I started to read. Thanks, it made my day and I bookmarked.