Facebook recently put into action the long anticipated change from Static FBML to iFrames, requiring all new custom content on Facebook Fan pages to be built as a Facebook iFrame application.

This new update will be forced though on March 11^th but you can (and should) get a jump on it now. This is actually a really good thing for Page owners and developers. It means that you can use standard html, css and javascript becuase your content will be calling a page directly from your site. You will still need to plan and build for the limitations of 520×720, the depth/height limitation is new, but you can figure ways to work with it).

The previous Tabs we are all used to will be gone, but you could create your own tabs within your 520×720 framework, if you want a more multi-page feel (check out Trailsherpa’s facebook page here to see how I solved for that). Again, this is a great thing because you will have full control over the length, appearance and style of those tabs.

Alright so how do we do this thing?

I create and implement your new iFrame app you’ll need to do 3 things:

1)      Create a Facebook iFrame application and associate it with your Fan Page

2)      Create a PHP page on your website that you will call from your iFrame application

3)      Upload that PHP page and its related assets

Step 1: Create a Facebook iFrame application and associate it with your Fan Page:

1)      Login to Facebook and go to http://www.facebook.com/developers/createapp.php to create your new app

a.       Give your application a name (this name will not appear on your Fan Page) and agree to terms

2)      Add an icon and or logo, contact email and privacy policy links (if you don’t have those policies, just link to the main page of your site). Add an icon, it will show up next to your app in the left nav of your Fan page. The logo is more for if you intent to share this app with others (think Farmville). Save changes.

3)  On the Website Tab, add your site url (not actually neccesary).

4) Go to the Facebook Integration tab. This is where things get mildly complicated.

a.       For Canvas Page select a folder that makes sense as the base url for your application. This will need to be DIFFERENT for each application you create and can only contain lowercase letters, dashes, and underscores.

b.      Canvas URL: this is going to be the FOLDER on your site where you create your PHP page and its related assets. MUST HAVE TRAILING SLASH (i.e. be a folder).

c.       Select iFrame and autoresize (not that it will resize) or show scrollbar if you have a page deeper than 720. They are pretty unpleasant looking, avoid them if you can.

5)      Scroll down to Page tabs at the bottom.

a.       Create a page name, limited to 16 characters. This is the name that will appear on your fan page as a link on the left and at the top of the iFrame “page” .

b.      Tab url: this is the actual page that you will be calling for the iFrame content. Where is says CANVAS_URL, once you save that will change to the name of the folder you designated above. This page can be called whatever you want, as long as it’s .php (.html will not work). So in effect, based on my current inputs, my new iframe content will be pulled from: http://www.vestorlogic.com/my_awesome_app_folder/index.php.

c.       Save changes. Your app is set up!

6)      You are now on your applications main edit page. Associate your new application with a Fan Page

a.       Click the “Application Profile Page” link on the right.

b.      Now you are on your apps public page, click “Add to My Page” from the left nav. This will bring up all the pages you admin. Select the correct one and add it.

That’s it for the Facebook integration!

STEP 2: Create a PHP page on your website that you will call from your iFrame application

1)      This is where things get a lot more standard. You’ll want to create a page on your site in the folder that you designated in your app. In mine it was: http://www.vestorlogic.com/my_awesome_app_folder/index.php.

2)      If you already have a Static FBML tab, you can go to that tab, copy the code and paste that into a new .php file, save and upload. In the above example my file would need to be called index.php and it would need to live in the “my_awesome_app_folder”  folder.

STEP 3: Don’t forget to upload this page and its related assets!

Now you will see your new app listed as a link on the left nav of the fan page you related it to. You can see ours here.

See that little Welcome link on the left with the icon? Awesome!

Special shout out to Paul Kortman’s great post that helped me figure it out.