The New Facebook Pages in iFrames

After FBML is phased out on Facebook we will need to build pages as iFrames instead. This means you literally put a frame around content hosted on your own website and share it on your Facebook page. Pretty cool huh? On the face of it this seems even better, but of course there’s a catch or two.

First there are the width requirements. You are probably best off if you set up pages on your website specifically for Facebook so they fit inside the framework of a Facebook page. iFrames are 520 pixels wide, so make sure your page fits inside the available space.

Second, you’ve got to create a Facebook application to hold your content. This isn’t really as big a deal as it may sound, so here’s what you do.

Once you’ve become a Facebook Developer you can create a new tab on your Facebook page.

Before you start you’ll want to gather some information.

  • A logo graphic- this shows up in searches and the app directory, and must be 75 X 75 pixels.
  • An icon for your app. This is a tiny graphic, 16 X16 pixels that will show up next to your app’s name anywhere it appears on Facebook.
  • Links to a privacy policy and Terms of service page. These can be on your web site or hosted somewhere else but are required for all apps. Learn more about Facebook’s Platform policies here including some examples.
  • If you plan on allowing other users access to the app to test or develop it you can add them on the new app information page.

Get started
Go to the Facebook Developer’s page and click the button that says “Set up new App” in the upper right corner of the page.

This takes you to a screen where you can name your new app and agree to Facebook’s terms of service. Please note that your page name cannot refer to Facebook or sound like it might be built by Facebook.

Once you’ve read the terms click Agree and then “Create App”. This takes you to a security screen where you need to enter the text from a “captcha” screen to make sure you’re not a robot.

Next you’ll be on the edit page for your new application. Enter the information necessary, upload your icons and click “Save Changes”.

Now go to the tab on the left called Web site.

There are only a couple of settings here, the full URL to the web site where you will be hosting pages (this needs to be a directory or a dynamic page) and the site domain name “yourdomain.com”.

Now go to the tab on the left called “Facebook Integration”, this is where the good stuff happens.

The core settings will be created and filled in by Facebook.

Canvas
The “Canvas Page” is the URL people will go to on Facebook to find your application. This will automatically load the information from the “Canvas URL” below. so, for example http://www.facebook.com/pagetoolkit will go to our new tab on Facebook.(the name must be all lower-case and contain no spaces.)

The Canvas URL is the page on your web site or hosting service which contains the content you want to deliver to Facebook.

The “Secure Canvas URL” is important if you are offering items for sale or collecting data that a user might access from a secure connection.

Select a canvas type. We recommend choosing iframe as FBML is being deprecated.

IFrame size allows you to have the page you are importing re-sized to fit the Facebook layout automatically.If, for example your page is a live web page and you are using it on your web site as well as Facebook, you can avoid having to create a custom page just for Facebook. If the page doesn’t fit it will show scrollbars or re-size the page to fit without scrollbars.

Bookmark URL. If you want users to bookmark the page you set as the Canvas URL or another page you can set that here, or leave it blank to have the canvas page you are building be what they bookmark.

Discovery
If you’re working on your page you’ll probably want to disable this feature until you are ready to make it public.

Page Tabs
Give your tab a name that makes sense for the page it is being viewed on. This will be the link the user clicks on the left hand list of tabs on your Facebook Page. Again you’ll have the option to decide if this tab will be FBML or an iFrame.

Tab URL
This is the name of the tab relevant to your canvas page URL. so in our case it will be Facebook.com/PageToolkit/welcome

OK, when you’ve got all this done click save changes and you’ll be taken to your dashboard for your new Facebook Application.

If you need to make changes to your settings, just use the “Edit Settings” tab on the right side of your dashboard.

OK, let’s see your Facebook Page!
Click the link that says “Application Profile Page”.

This will take you to your new application where you can edit the settings just like in the previous version of Fan Pages. Notice that in the message above it say’s I’m in “preview mode”. This means I can work on the page in privacy until I’m ready to change the settings to “public”.

Now, if you want to add this application to your existing Fan Page, just click “Add to my Page” in the left hand side of the page, select the page you want to add it to and voila! it shows up as a tab on your existing page.

Tags: , , ,

Leave a Reply

You must be logged in to post a comment.