How To Build A Facebook Landing Page With iFrames

How to build a Facebook landing tab with iFrames - by SocialMouthsI know it has been on your mind lately: How do I build a landing tab on Facebook now that FBML is gone?

What are iFrames anyways? Is this now in the hands of super-geek programmers only? Can Francisco from SocialMouths write another one of those spectacular posts like he did with the Facebook FBML Landing Tabs?

Well, that post I mention has 44,405 pageviews in 4 months. It represents 10% of the total pageviews. I guess I better cover iFrames because starting last week, nobody gives a crap about FBML and my superstar post is now obsolete.

But I want to do something massive, a monster post with some 2,500 words where I explain every single step with plenty links and screenshots. Some epic shit. More than a post, I want this to be a guide. Why? Because I loved the comments I got on the last post, people telling me “Hey thanks, I was actually able to do it and my landing page is now live”.

Important: There is a little surprise at the end of the post so make sure you don’t miss it!

I should advise you that the post is full of screenshots and it might take longer than usual for the page to load so have some patience.

You ready? Let’s start by laying down some goals for this post and what is the desired outcome…

Goals For This Post

  • Provide some clarity about the difference between FBML and iFrames (this is written in plain language for normal people, if you’re a programmer you will probably fall to sleep by the next paragraph)
  • Get you setup as a Verified Facebook Developer (Sounds like you’re going to take an intensive certification course but it will actually take 5 minutes)
  • Help you build your first Facebook Landing Tab on iFrames from scratch and without the need of third-party services

Now, another thing I should mention before we start is that there are other ways of doing this and you’ll probably going to start looking at out-of-the-box apps (I’ll talk about that later) just like there were before for FBML but the process I’ll show you here is how to do this from scratch.

What’s The Difference Between FBML And iFrames

One of the things I noticed as March 11 was getting close was that some people were getting a little anxious to understand what was going to happen and if they should hurry to launch their FBML before that. No need to panic, let’s look at the technical differences first:

FBML

FBML was nothing but regular HTML with a few Facebook tags that allowed you to customize tabs. That’s it.

iFrames

They are “frames” or windows inside a web page that allow to bring external elements, in other words, you can have a website inside another website.

You can literally build a website on your own server and then call it through an application and display it inside a Facebook Page.

Some of the common questions I had in the past few days:

  • Why is Facebook doing this? For world domination, soon we won’t need websites, Facebook will eat the entire Internet and we’ll all live in it
  • Is it better? Yes, iFrames opens the doors to do all kinds of things. Playing with it yesterday I dumped my entire blog inside a tab…
  • Is it harder for a non-geek normal human being to build stuff? Hmmm, sure. A couple of extra steps and little more patience. It’s not impossible and as a matter of fact, that’s what we’ll try to do here, right?
  • What happens with my current landing page since it was built over FBML? Facebook has stated that will continue to support those tabs but they also advice to move them to iFrames.

How To Become A “Verified Facebook Developer”

First of all, let me say that becoming a Facebook Developer is almost as easy as becoming a Real Estate Agent in Los Angeles. If you’ve never been here and didn’t get the joke, even my grandma is an agent here… So don’t worry!

Step 1: Get to the starting point

We need to go to the Facebook Developer website

Facebook Developers Home

Step 2: Verify your account

Click on the “Set Up New App” button located at the top right. Most likely you have never created an app on Facebook so you’ll be redirected to this page on the following image.

Verify your account

You have 2 options to verify your account, the first one is to provide your mobile number so Facebook can send you a text with a code that you need to send back, I think Google does something similar. The second option is to enter your credit card information, this can probably be a better solution if you’re outside of the US (we recently tried the first option from Chile and it didn’t work).

Confirm your phone

That’s it, once you go through this process, you are verified and can start messing up with apps and other stuff like integrating Facebook Comments wherever you want. Cool, huh?

Design Your Page

We’re leaving Facebook for a little while to design and prepare whatever content we’ll want to display on our landing tab. To keep the tutorial at a basic level, we’ll work with a simple image turned into an image map with links as we did on the FBML Landing Tabs post BUT, then we’ll kick it up a notch by adding a second page with an email opt-in box.

The images and stuff I’m creating here are just for this example so I’m not worried about using real copy or anything like that.

Step 1: Create your image

I created this image on Photoshop but you can also use other image editors. Something like Picnik should be sufficient.

Important: The width for a Facebook App is 760px but in this case we want to dump this baby inside a tab so your max is 520px. I have to say that the first image I created was 520px and I still had problems with scrollbars displaying on the page so I made a little bit smaller than 520px (just sayin’).

Landing Tab Design

2. Host your image

We need to host our image on the Internet, this can be done by uploading it to your “Media Library” if you run a WordPress blog or by uploading to your server via FTP access. Once we’ve done that we just need to grab the URL for that puppy and take it wherever we want. It’s a good idea to just test the URL on your browser to make sure the image displays correctly.

3. Turn it into an image map

As you can see in the image above, I added a text on the right that reads “Link to Opt-In” which I plan to make a link, that will allow me to navigate to the second page.

This can be coded but the point is that we’re not programmers, so we’ll use a free image map tool online. I recommend Image-Map (it’s not perfect but it gets the job done… most of the time). Don’t forget your URL!

This process is explained on this post so I won’t go over it again or this post is going to turn into a book. I’ll just say that basically what we’re doing with Image-Map is adding links inside the image and the tool will generate the HTML code for us. Check out the following image to get an idea:

Adding links to your image

Now you have an image containing some link, we’ll use this as landing tab. Take the code Image-Map generated for you.

We’ll have to remember this later on, that link I created into the image will point to an additional page. We’ll come back to that.

Get Your Code Ready

Step 1: Open on a text editor

We take the code with us to open on a Text Editor in your computer, I use TextMate but a simple editor will do. This is what the code looks like:

Image Map code

Step 2: Fix your code

But wait a second, I can already see that my code is missing some basic HTML elements. We’ll have to add it manually. What we’re missing are the tags to open and close the code, it won’t work without them.

Add the <html> and <body> at the top of your code and then </body> and </html> at the bottom. Use the following image for reference:

Fix your image map code

3. Save as HTML

We need to save our file as HTML and name it “index.html”. The reason we’re doing this is because when we go back to Facebook, we will be asked to provide the URL for the directory on your server, NOT the URL for the file. By naming the file “index.html”, Facebook will be able to grab the directory and display this file as if it was the homepage of a website.

Save your code

4. Upload

Important (and a little tricky). Now we need to upload the file to your server, remember that you are hosting this puppy. As I said before, we’ll give Facebook the route for the directory so we need to create it first. Access your server via FTP and create a new folder, it’s up to you where you want to create it. Most FTP Clients look about the same.

Create a directory on your server

Name it whatever you want.

Now we need to upload our index.html file inside that folder. Leave it there, go to your browser and test that your file is displaying correctly. I named my directory “iframe” so my URL will look like this: http://socialmouths.com/iframe/index.html

Test your URL on a browser

Phew! It works baby.

I think that was the hardest part because not everybody is familiar with FTP or messing with their servers but it’s all good. Just don’t mess with the folders that are already there.

Now we’re ready to back to Facebook.

Configure Your Facebook App

We left Facebook after verifying your account, now we need to go back and actually configure our first application. This is the exciting part!

1. Name your App

After you verify your account you are prompted with this page where you are asked to name your app and of course, agree to the terms. Click “Create App” when you’re done.

Name your Facebook App

2. Configure your App

Now you land on the “About” section of the setup. Really there’s not much to do here unless you want to add a Favicon, logo or a description if you want (they’re optional).

About section

From the left menu, move on to the “Web Site” section. In this section we’ll add the URL. But wait! remember that Facebook only wants the directory route and NOT the URL of your file. See how I have highlighted the part that says “index.html” in the following image? We need to delete that part or we’ll get an validation error. It need to look like this: http://socialmouths.com/iframe/. As I said before, since we named our file “index.html” and we placed it inside the directory, it will automatically be called as a homepage.

Add your URL

That’s it for this section, don’t save yet, first let’s move on to the next section on the left menu: “Facebook Integration”.

Facebook Integration

In this section we’ll do the following:

  • Name our App under “Canvas Page”. This will be our Application URL (kind of important)
  • Copy our directory route under “Canvas URL”. Remember to eliminate the “index.html” at the end
  • “Canvas Type” will be “iFrame” of course
  • And under “iFrame Size” select “Auto-resize”. We don’t want any scrollbars displaying

Now scroll down on the same section and we will find the “Page Tabs” configuration. We’ll do two things here:

  • Name the Tab. This name is the one that will be displayed on your page so name it something like “Welcome”. I just named it “iframetest11″ since this is just a test
  • For “Page Tab Type” you will again select “iFrame”
  • And under “Tab URL” type “index.html”. That’s the name of your actual HTML file. You remember that, right?

Page Tabs configuration

Now we’re ready to hit the “Save Changes” button. As soon as we do, we’ll be taken to this intimidating page with lots of information including our App ID, API Key, App Secret, etc. Don’t worry, nothing to do here.

Also important, from here you have access to your App’s “Insights” right there on the right menu.

Facebook My Apps Dashboard

Install Your Facebook Application

As you can see we have created an actual application here, this is the way iFrame tabs are integrated in your Facebook Page. Now, as any other application, we need to install it on our page.

Step 1: Go to your App’s Profile Page

On that same menu on the right, click on “Application Profile Page”. Applications also have profile pages just like your personal profile or your page with Walls and everything else.

Facebook Application Profile Page

2. Install the app on your Facebook Page

To install the app on your page we need to click on “Add to My Page”, you can see the menu at the bottom left of the image above. We are prompted with a window that lists all your pages (if you have more than one), select the Page where you install the App.

Install the App on your Facebook Page

Our application has been installed on our Facebook Page as a Tab and we should be able to see it in the Tabs Menu (located on the left, remember?). You can see that mine already shows in the next image (it’s called “iframetest11″). Now it’s time to click on it and see if all this mumbo jumbo worked. Go ahead, click!

SocialMouths Facebook Page

3. Look at your tab

Your new Landing Tab should now be displayed inside the Tab. Here is the result of my test.

SocialMouths Landing Tab

That’s it, we’re done! No? you want more?

Already then. Let’s look at what happens with that link I created and see if we can navigate inside the tab. Let’s go back for a little…

How To Add An Additional Page

I promised to kick it up a notch this time and add an additional page, in this case I’ll add my Email Opt-In. Really you can do whatever you want inside this pages but you probably already figured that out on your own.

These links we added to the image map are actually going to let the user navigate inside the same tab, that’s why I said before, using iFrames is like bringing a website inside your Facebook Page.

I’m not going to get into how to set up your email opt-in form with your provider. First because everybody uses different services from Aweber to Constant Contact and many more, I use MailChimp. And second because this is material for a whole different post.

I have already setup my opt-in form and I also added a nice image to go with it and some text. The point here is how we integrate it into our tab.

Remember that link I created on the image map to point to an additional page? now it’s when we’re going to use it.

1. Get your Opt-In From code

Get the code snippet your service provides for your blog or website. Once you have the HTML code, copy it into a text editor like we did with the other one and save it as .html. The important thing here is that the URL we want to get is the same URL we’re using in the link we have on the image map because this is the file we are going to call with that link.

2. Host your html file

Now we need to upload this new file to our server via FTP. Save it in the same directory if you want. Same procedure as before.

3. Test your URL

Once we have uploaded our new html file to our server, test the URL to make sure it’s displaying correctly. Here is my file tested on a browser, everything seems to be working fine.

Opt-In html file on a browser

So what happens now? If you thought that the additional page should already be working on the tab, you my friend are correct. Get it? this is like building a website inside your tab. You can have several links and let the user navigate different pages without leaving the freakin’ tab!

So head over to your Facebook Landing Tab and click on that link. Here is mine…

Additional page inside the Facebook page

What’s The Potential

Like I said, We can build whatever we want through iFrames. What you need to do is start thinking about websites, you can very easily design a tiny 3 or 4 page minisite with a built-in navigation. We can also bring in all kinds of elements.

As an example, let me share with you what we are doing with the Flor De Caña Page (our client over at Plural and Partners). It’s pretty much a website inside the tab, one of the cool elements we added was a “Store Locator” using the Google Maps API (image below). This is work in progress but it is live if you care to check it out.

Flor De Caña Facebook Page

As a matter of fact, I included a link at the bottom of my image that I didn’t tell you about. This link points to my blog (http://www.socialmouths.com) and I did it to see if I could bring my entire blog inside a tab. Here is the result:

SocialMouths inside a Facebook Tab

A couple of things to point out here:

  • The blog is completely functional inside the tab and you can navigate it just as if you were at SocialMouths
  • You can actually Retweet and the Twitter window pops out from inside the tab (So cool…)
  • Obviously the width was not a concern for me at this stage so you can see how it doesn’t fit inside the 520px tab

And, I’m planning to write a post on how to bring your blog inside Facebook in a few days (when I recover from this one of course).

Are There Any Out-Of-The-Box Solutions?

Sure, there are all kinds of pre-built apps that let you dump an image or a piece of HTML code inside without becoming a Facebook Developer or building everything from scratch. What we call a user-friendly approach.

Do I recommend these apps? Hmm… The main reason I tend to do this without the help of out-of-the-box solutions is that you end up adapting to their limitations and you stop thinking about creating something unique and based on your particular goals. In this battle for attention of today, you need to stand out, build amazing stuff that convert first-time visitors into raving fans.

But I have nothing against them, in fact, I’ll write part 2 of this guide in a few days to write about one or two of these apps that I think could be good alternatives for you. Even though this is my way, I’ll do that to be fair and for the benefit of my readers. =)

I Promised To Have A Surprise…

Win a Copy of Enchantment by Guy KawasakiTo make this a little bit more exciting, I’m gonna give away one copy of Guy Kawasaki‘s new book “Enchantment“, which I have been reading for a couple of days and can guarantee you it is off-the-heezy. To be fair and give everybody the opportunity, you’ll be able to participate on Facebook or on Twitter.

On Facebook

  • Go to the SocialMouths Facebook Page and “Like It” (molto importante)
  • Share this post on your wall by using the link: http://bit.ly/iFrameTabs
  • When you share the link add this comment How to Build a Facebook Landing Page with Frames | @SocialMouthsIf you “liked” me first, that “@” in front of “SocialMouths” will automatically tag me and make your post show up on my wall too, that’s how I’ll see you. If you don’t use the “@socialmouths” in your share you will be invisible to me ; )

On Twitter

  • Tweet this exactly as it reads here: How to Build a Facebook Landing Page with Frames | @SocialMouths http://bit.ly/FBiFrames #FBiFrames
  • Don’t change the Bit.ly URL
  • Don’t forget to use the Hashtag at the end #FBiFrames or I will not be able to see your tweet

Dates: It starts NOW and ends on Tuesday March 29th 12am PST

Announcement: I’ll take everybody that participated on Facebook and Twitter and randomly pick a winner. I’ll announce the winner HERE on this same post on Wednesday March 30th.

Update: I had to postpone the announcement date, the winner will be announced here on Monday April 4. Don’t miss it!

Good Luck!

And The Winner Is…

Congratulations to Evan Austin [@graphicsbyevan]. And thanks to everybody that participated and help promote this post. You guys ROCK!

Final Thought

At the end, this post contains 3,311 words and 27 images. I hope you like it =)

Since this is kind of a special post for me, I’ll ask you to write a comment to tell me if the post was helpful, if you were able to build your Facebook Landing Page or if you encountered any problems. Was it too hard? Let me know where you got stuck. I’ll try to help as much as possible.

Also, feel free to share what you did with your landing tab by adding your Facebook Page address to your 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 and I’ll see you in a few days for Part 2!

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

  • http://www.facebookthemes.info/ Fraces Farer

    Love this .
    thanks for the tips 

  • http://www.itechcode.com/ Amit Shaw

    Wow really great post. I love the way and its super tutorial article.
    Thanks :)

  • http://techforwards.com/ Gautam

    hi 
    Francisco, i think it’s time to create some different design for attracting new visitors. before i just create facebook pages not using this much design and application. now your tutorial give me some different design for my facebook page.
    thanks bro. 

  • http://twitter.com/nat_mach Nat

    Would be great but FB Developer site has changed and now no longer anything like your screen shots sadly.
     

  • http://www.albuquerqueflowers.info/ albquerque florist

    There is a little surprise at the end of the post so make sure you don’t miss it!

  • http://rohitsinghjain.blogspot.in/ Rohit Singh Jain

    Excellent how-to! Trying out this workshop step-by-step right away… http://bit.ly/z1DdHY

  • http://rohitsinghjain.blogspot.in/ Rohit Singh Jain

    Oh yes, it will!

  • http://rohitsinghjain.blogspot.in/ Rohit Singh Jain

    You could try alternative free open-source software too, such as Map maker on Linux.. http://bit.ly/z1DdHY

  • http://totalskinsolution.com/age-spots/best-liver-spots-treatment/ totalskinsolution

    I was actually able to do it and my landing page is now live”.

  • http://www.sashaspopcorn.com/ Laurene Calkins

    What are iFrames anyways? Is this now in the hands of super-geek
    programmers only? Can Francisco from SocialMouths write another one of
    those spectacular posts like he did with the Facebook FBML Landing Tabs?

  • http://timewarnerinternet.jimdo.com/ CW

    Hey that’s a great piece of information man! Thanks to the author who has taken so much time and given a clear step-by-step explanation of how to do it. But I have a question. What is the purpose of landing up on a page using iFrames? Can someone tell me in brief?

  • http://www.ghricko.com/ Kaylene

    Important: There is a little surprise at the end of the post so make sure you don’t miss it!

  • http://EnlacesyMarketing.com/ Fernando Rivas

    PERFECT POST! I realy enjoyed to read it ;) I need to make a perfect facebook fan page and for sure all this gonna help me ;)

  • Wanmiliani

    Hi, Im stuck with no. 4 please . Helpp!! Im using Mac and not sure of step no. 4

  • Anjan

    hey how do we connect to mailchimp you didn’t explain that bit …

  • Kayleen Bussey

    Frames because starting last week, nobody gives a crap about FBML and my superstar post is now obsolete.

    http://www.vancouver-moving.net/

  • Katlyn Settle

    I also help entrepreneurs and small businesses turn their vanilla “web
    presence” into a profit powerhouse using techniques on social media,

    http://sandiegocitylocksmith.com/

  • Pablo Estrada

    Beautiful my friend… Amazing how in this crazy lives we live, where ‘time’ is so precious and scarce, some one like you finds a way to help so many people out there how aren’t too technical and really appreciate this guidance… Buena suerte Paco, y gracias muchas. Pablo Estrada

  • http://twitter.com/Ladik_ Láďa Hrbáček

    This is INSANE! :)
    Why not to use something like this? http://www.youtube.com/watch?v=4r6NAQdUhOs

  • http://twitter.com/crufovkka Valeska Idarraga

    Unbeleivable clear and useful! I’m from Spain and gonna try it this week-end. Thanks for sharing!

  • tekinsol

    I was hunting for this since long and finally found. its really the post of the decade, the you have explained everything. really great….

  • Aarvin M S

    Hi,
    How do i use iframe in my website to load a facebook page in my website.
    Aarvin M S

  • franklyrealty

    Is this still allowed? Dying to so this with my GROUPS page.

  • LadaHrbacek

    Groups doesn’t support Tabs. You can only add tabs to Facebook Pages.

  • Michael Bian

    Excellent post ever ! I’ll make time for this to study and read it again later. Thanks for sharing! http://www.sixelevencenter.com

  • http://www.llt-group.com/seo.html JeremySeoChicago

    Excellent! Love how easy-to-use you’ve made this whole process and how customizable that everything can become!

  • Mobile Anime

    I really enjoy reading and also appreciate your work.pirater un compte facebook

  • Divvela Dileep Ajay Kumar

    Hi, I tried going through your post. But the thing facebook is updated by user screenshots am not able to understand if you can update the screenshots then we can understand easily. Thanks alot for your help. Now we are trying to create a application. the same we wants to show in facebook. Please help us.

  • sharavanakkumar

    these pages are not there now in facebook, please can u update the article with new changes in the pages made to facebook

  • journalofzoology

    Actually It seems not enough to me…. I will explain what I want, I need the script/code that paste on my webpage. and in result it show me FB whole page on my website. here is the link where I want this code to paste: http://www.journalofzoology.com/boost/boost.html
    If anyone knows…..plz tell me what to do?