How To Build A Facebook App With iFrames

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

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.

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

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 Picnikshould 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’).

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.  Don’t forget your URL!

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:

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:

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:

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.

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.

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

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.

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

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.

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

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?

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.

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.

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.

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!

3. Look at your tab

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

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.

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…

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

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

Courtesy Francisco Rosales