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

Facebook Page iFrame AppI 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!

Related Posts Plugin for WordPress, Blogger...

10 Mistakes People Make on Facebook Pages and How to Fix Them

Join 10,000+ subscribers and get FREE access to my online course...

  • Mickie Higdon

    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.