How-To: Add an iFrame to Your Facebook Page as a Tab

With Facebook’s recent changes to page tabs, there’s been some confusion about what is, and what is not possible. This post is to clarify what changes Facebook has made, and show MTO readers how to easily take advantage of the new methods for creating page tabs.

On February 10, 2011 Facebook announced page admins could start using iFrames as page tabs, displaying a maximum of 8 tabs at any one time. To see more than the default 8 tabs, users need to click “More” below the last tab to reveal anything hidden. Facebook also announced they were going to deprecate FBML and FBJS as the primary technologies for building Facebook apps. As of March 11, 2011, Facebook users will no longer be able to create new FBML apps and pages will no longer be able to add the Static FBML app.

So what does this mean for my Facebook Page Tab?

The future of Facebook Tabs looks to be centered on iFramed content, which leads me to the main reason for my post today.  Adding iFramed content isn’t difficult, but it does require a different set of steps to install compared to its Static FBML counterpart.  Let’s take a look.

Step 1: Create or identify the page to be iFramed into Facebook

For my example, I’ll show you a Streaming Video page I created for RPR. It’s pretty basic, just a .php file that includes live video streaming embed code from Ustream mashed with Facebook’s Live Chat. The Live Chat component will allow the viewers in Facebook to share their thoughts about what their watching, also posting a comment back to their wall. Of course this is just one example of what you could build, but using these steps you can bring just about any content into Facebook. It could be a custom neighborhood page, listings page, newsletter sign up, videos, anything you desire. Also because we’ll be creating an app, your page tab could even be installed by other pages if you would like. Just keep in mind for things to look good, your content should be no wider that 520px…we don’t want anyone to side-scroll.

If you would like to use my example and build a Ustream app in Facebook, download the source files here. You’ll need to update the uStream embed code with your own channels embed code. You’ll also need to add your APP ID to the Facebook Live Stream code. You’ll see I’ve documented the spots you’ll need to edit.

Step 2: Creating a Facebook Application

The first thing we’ll need when creating a Facebook app is to make sure we’ve already installed the Developer App. It’s used to manage the applications that you build in Facebook. If you haven’t already installed it, please do so now.  You’ll see something like the screenshot below. Choose “Allow.”

Once you’ve installed the Developer App, we’re ready to start creating the new application that will pass our iFramed content into a page tab.

Select the button titled Set up new app on the right side of the page.

Now enter a friendly name for your app and agree to Facebook’s Terms of Use.

About – Basic Information

Now we can start editing the important details of the app. You’ll arrive on the About tab, with the focus on “Basic Information”. Enter the name of your application, a brief description, the icon and logo. The icon will be used like a favicon on your Facebook Tab.

Moving down the page, confirm the correct email address is listed. Add any other admins, testers, or users to the application. Now we can move on to the Facebook Integration tab.

Facebook Integration

Canvas Page: Look for the Canvas section. Start by creating what is essentially a vanity URL for your application. This is the URL that someone will type to access the app directly. It’s also the URL you’ll access when you’re ready to add the application as a tab to your page.

Canvas URL: Now you’ll enter the URL of the page that you are framing into Facebook. Keep in mind the URL must either be dynamic or point to a directory. (HINT: Create a directory and make the .html or .php filed named index.)

Canvas Type: Select “IFrame”

iFrame Size: By default the tab will have a width of 520px; and a height limit of 800px. If your iFramed page exceeds those dimensions it will result in scroll bars being shown. Although if you do need more height, or would like to auto-select height based on your iFramed content, there is a simple workaround. For that, you’ll need to choose Auto-Resize (Note: Auto-Resize will require a few additional steps included below. It’s also important to note that I’m not using the Auto-Size option for my example app.)

Social Discovery: If social discovery is enabled, Facebook will display a user’s usage of your app in News Feed.

Tab Name: Enter the name you would like to see as a page tab. (Note: This can be overridden from the page itself.) Maximum of 16 characters.

Page Tab Type: Select iFrame

Tab URL: The page Facebook will use to pull content for your tab; which is relative to your Canvas Page. In my example it was index.php

If you selected “Auto-Resize” follow these steps, otherwise skip to Step 3 below.

The idea behind Auto-Size is that your application tells the canvas what size it should adjust to. To set this up properly we’ll need to initialize the JavaScript Library from our iFrame source page. This is done by adding the following code before your closing </body> tag. You need to replace YOUR-APP-ID with the ID of your newly created app. (Hint: You can find your app ID in the Core Settings of your newly created app.)

Next we’ll use FB.Canvas.setSize() to auto detect the height of your iFrame. Add this bit of code just before your </head> tag. (Note: If you would like to set a fixed size, see here. Or if you’re content size changes dynamically, try using FB.Canvas.setAutoResize. Be warned, I’ve seen a few bugs submitted to Facebook on this function.)

Step 3: Add Your New App as a Facebook Tab

Now visit the application profile page, which can be found by visiting the Canvas Page. This is the URL we created a few steps back on the Facebook Integration Tab.

Click Add To My Page. Facebook will display a dialog with all of the Pages you administer. Now select Add to Page to the right of the page you want your new tab to display on.

Now visit your page, and choose Edit Page. Select Apps and look for our newly added application and click Edit Settings and confirm your custom tabs display name. Now click okay.

Here is an example of what our page would look like with this app installed…