IMPORTANT: You have to upgrade your Fan Page to the new layout before the below application will work on your Fan Page. Many Pages will see a big banner at the top of their Page announcing the upgrade. If you don't, you can click here to upgrade your Fan Page.
Facebook recently announced that on March 11, 2011, the Static FBML application will no longer be available to be added to Pages and that no new FBML applications can be created after that date.
While Facebook indicates that current Static FBML and FBML tab applications will continue to function for now, they are strongly encouraging everyone to move to using iFrame applications rather than FBML ones.
Over the coming weeks, we will be posting a series of tutorials to help you get started with using iFrame applications on your Fan Page.
iFrames are now supported on Page tabs
Prior to February 10, 2011, Facebook had disallowed iFrames on Page tabs and, although were allowed on Canvas pages, they required a user to click activation text or an image to load the iFramed content.
However, as of February 10 iFrames are allowed on both Page tabs and Canvas pages AND they don't require an activation to load them!
What is an iFrame application?
An iFrame application you allows you to embed an external Web page in your tab on your Facebook page (in the new Page layout, "tabs" are on the left side of your Page, rather than appearing on the top).
The good news is that this Web page, because it's not hosted on Facebook, can use standard HTML, CSS, and JavaScript like any other Web page does. Interactions with Facebook content are done using the Facebook Software Development Kits (SDKs) and XFBML tags. (For this tutorial, the Facebook SDK is not required.)
The downside of this approach is that you need to be familiar with those technologies and you will need a Web-accessible server where you upload the files for your application page.
Setting up your server
On your Web server, create a directory for your iFrame application. In this example, we are going to create a new directory on the server called "facebook" and then a subdirectory called "mytestapp". The file path will look something like this in your FTP program:
You will want to put all of your files (HTML, CSS, Javascript, PHP, etc) in this folder or its subdirectories. If you don't know how to do this, read this FTP tutorial.)
Your HTML file
Remember, in your HTML file you can utilize CSS — and inlining styles with the <style> ... </style> tags works fine with iFramed HTML files — and JavaScript (Do not use FBML or FBJS!).
You'll want to set the main container DIV for your content to 520 pixels wide. Here's a very stripped-down example of your HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link type="text/css" href="http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/style.css" />
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
<div id="container">
<p>This is some HTML content</p>
</div>
</body>
</html>
In the above example, I include both the code for an external stylesheet called with the <link /> tag, as well as inlined styles called with the <style> ... </style> tags, in case you want to do it that way. Either should work fine.
Installing the Facebook Developer Application
The first step in creating an application in Facebok is to install the Facebook Developer application.
To do that, log in to Facebook and then visit the URL http://facebook.com/developers
If this is your first time installed the Developer Application, you will see the Request for Permission dialog show below:
Click the Allow button to proceed.
Creating your iFrame application
Now that you have the Developer App installed, click on the Set up New App button.
Give you application a name, click the Agree bubble and then click the Create App button.
Enter the security phrase and then click Submit.
There are a lot of options you can tweak related to your application. In this post, we are going to focus on the basics needed to get your application up and running.
The "About" Tab: Name your application and set a small and large icon
Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.
The icons are quite important, especially the small one now that it's shown in the left-column navigation. So make it eye catching. If you don't create your own icons, you'll get the defaults, as shown below.
The "Facebook Integration" Tab: The really important stuff!
Click on the Facebook Integration tab on the left to get started.
In the Canvas section, enter the URL for the location on your server where you are storing your application files.
Further down on that tab, enter information about your Tab in the Page Tabs section.
- The Tab Name is what will appear on the sidebar of your Fan Page. It can be up to 16 characters in width;
- The Page Tab Type should be set to iFrame;
- The tab URL is the file name of the file that should be loaded first when the Tab is loaded into your Fan Page. It will generally be index.html, index.php or something similiar. Make sure to put something in the field or your tab will not appear on your Fan Page.
Click the Save Changes button.
Installing your iFrame application on your Fan Page
Once your Facebook application has been created, you will need to add it to your Fan Page. To do that, click on the Application Profile Page link on the right side of your application page.
Now click the Add to My Page link on the left.
A dialog overlay will open and will show any pages that you are an Admin on.
Find the page that you want to add the Tab to and click the Add to Page button.
Your new iFrame app should now appear on your Fan Page. If you don't see it there right away, you may need to adjust your Page settings. From your Fan Page, click on the Edit Page link. Then click on Apps and find the application that you just added. Click on the Edit Settings link next to the app and Add link.
Troubleshooting
Based on feedback to this post, we are starting to compile some iFrame App Troubleshooting Tips. We will update this section as new questions some up.
Check your URLs!
Make sure that the URL you set for your iFrame is correct. Try accessing it directly, via your browser, instead of via your Page tab. Bad URL addresses are the most common problem. If the URL to the Web page or image you want in your iFrame Page tab is incorrect, obviously the tab won't work.
You can also test the validity of your URL by right-clicking the area where your iFramed content should be and then select "This Frame: Open Frame in new window" or something similar (each browser presents this option a little differently).
Error messages from your server
If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people.
Scroll Bars
If your iFrame content causes a horizontal scroll bar to appear, something is causing the width to exceed 520 pixels, which is the maximum that Facebook allows.
We recommend adding some CSS (either inline as shown below or in your separate CSS file) to remove margin, padding, and border from elements by default. Many browsers add spacing around certain elements by default which can cause the scrollbars to appear unexpectedly.
<style type="text/css">
body {
width:520px;
margin:0; padding:0; border:0;
}
</style>
Next Steps
If you are famaliar with HTML and CSS, you can begin building your tab page content right away. In future tutorials, we will be looking at adding interactivity to your Tab using the PHP SDK and XFBML tags.
Up next: Creating a Reveal Tab on an Facebook iFrame application using the PHP SDK
We would love to hear what you would like to see in this series -- If you would like to know how to do something specific using iFrame applications, just note it in the comments and we will see what we can do.
