How to Create a Facebook iFrame for your Business Page

NOTE: This post may be outdated.

Any screenshots and details of functionality may no longer be relevant.

View the most recent posts in this category.

In prior tutorials, we’ve discussed the benefits and power of using Facebook iFrames. Now we’re going to get into the details of how you can create your own.

1. Create the Content

If you have a WordPress site, let me save you some trouble. Install the Facebook Tab Manager by David Carr. I wish I would have known this tool existed about four iFrames ago.

The following instructions will be directed towards those who use the plugin. However, I will also include notes for you if your site isn’t on WordPress.

After installing and activating the plugin, click on Facebook Tabs link on the left, then click on “Add New.” What you’ll see now looks an awful lot like what you’d see when creating a page or a post.

What’s nice about this plugin is that you don’t need to worry about the 520 pixel width requirement (obviously, you still need to consider it for images, tables and format of the page), and it also removes the header/sidebars/footer and handles issues with scrollbars. If you’ve ever created an iFrame outside of this plugin, you’ll notice that horizontal and vertical scrollbars often appear when viewed on Facebook. They are a pain to eliminate.

Once you enter the content, you can provide css that is specific to this tab. There are also a series of check boxes that you should look at.

Depending on the iFrame, you may want to open links in a new window. The exception would be if all links point to pages that are formatted for the iFrame. Otherwise, you’ll end up with pages that have headers, footers, sidebars, etc. in the iFrame. You don’t want that.

I check the box to remove the title so that I can name it whatever I want in the iFrame itself, but that’s purely a preference.

When you’re done, go ahead and publish!

For Non-Wordpress Users:

First, you’ll need to create content without a header, footer or sidebars. Stripped down. Make sure it’s no more than 520 pixels wide, and try to keep under 800 pixels long. You’ll want to apply the following code in your stylesheet:
<style type="text/css">

body 
{
overflow: hidden;
}
</style>
<body onload="FB.Canvas.setSize({width: 520, height: 800})">
<Div id="fb-root"></div>

<Script arc="http://connect.facebook.net/en_US/all.ja#xfbml=1"></script>

<Script type="text/javascript">
FB.init({
appid: FB_APP_ID,Status: true,Cookie: true,Xfbml: true
});
window.fbAsyncInit = function().{
fb.canvas.setautoresize();
}
</Script>

2. Create an Application

This is a step that sounds much more intimidating than it is. You’re creating a Facebook application. You are a developer.

Say it to yourself again. Believe it. Live it.

Go to developers.facebook.com/apps and click on “Create New App” at the top. Type in the name of the app, as you want it to appear to users (can’t include any Facebook-trademarked terms) as well as the namespace. An example could be My iFrame for the name and myiframeloomer for the namespace. But use your own, those are just examples. Then check that you agree to the Facebook Platform Policies (assuming you do), and click “Continue.”

You’re almost done. At the bottom, click Page Tab and it will expand some boxes to complete. You really only need to worry about the top three in all likelihood.

Page Tab Name: [How you want the name to appear in the menu on your Facebook page]
Page Tab URL: [The URL of the page you created in the first step]
Secure Page Tab URL: [The secure URL of the page you created, starting with https]

Does your site have a secure SSL certificate? You need a secure URL for your app, there is no way around it. If you don’t use secure browsing on Facebook, you can view the iFrame without problem. But by default, users use secure browsing. In that case, they’ll get a big, fat error.

I’ve found one solution, though I can’t vouch for the legitimacy. It’s Social Server. They host a secure URL for you. I’ve used it a few times so far without issue.

Next click “Edit Icon” at the top to add the icon that will appear in the menu on your page. Make sure it’s square. Then Save and you’re done with the app!

3. Add the App

Now that you’ve created a Facebook application (Yes! You did!), it’s time to add it to your page. Open a new window. In that window, paste in the following URL…

https://www.facebook.com/apps/application.php?id=

…and then add your app id (found at the top of the last screen we were just on) and hit enter. Click “Add to My Page” on the left hand side and select your page.