As a professional who has been implementing campaigns in Facebook for clients for years, I know one thing to be true: change is coming.
Dealing with change well is a prerequisite for marketing on Facebook.
On March 10th, all Facebook pages will change over to a new layout. The biggest of these new Facebook changes is the move from FBML to iFrames to for creating custom page tabs. I’ve been eagerly anticipating the move to allow iFrame functionality on page ‘tabs’.
Facebook has been promising this feature to developers for months and I had grown skeptical that they would ever make it work. The issue is that in order to create an interactive experience on a page tab you were limited by FBML, a bastardized mark-up language with limited functionality. Common scripting languages like Javascript wouldn’t work on Facebook tabs.
This meant marketers had two options: 1) use a ready-built application that could do the job but offered little or no customization or 2) pay a company thousands of dollars to create one for you. After some testing, I can assure you THAT has all changed.
Are Facebook iFrames Better?
I had already tried to build interactive tabs prior to this change and so was armed with an HTML page, limited to 520 pixels wide. The web page housed a few cool features that wouldn’t work within the old Facebook structure:
1. A countdown clock that was counting down the days/hours/minutes to the product launch.
2. A slideshow that used Javascript to allow users to scroll through selected photos.
So how long would it take me to get the content on a Facebook tab? Answer: 10 minutes. I’m absolutely THRILLED!
Getting Started with A Facebook iFrame
Here is what you will need to get started.
1. A GREAT iFrame Facebook tab tutorial, I used this one by Hyperarts. This gets a little technical if you are not familiar with html or Facebook tabs in general, but for the most part, the steps are:
- Create an html page that is 520 pixels wide (the link above has a nice template)
- Install the Facebook developer application
- Create a new app
- Create new tab by clicking on “Facebook Integration” and editing you “canvas” and “tab” settings
- Add the tab to your page
The Hyperarts tutorial goes into fine detail about all these steps and provides some nice troubleshooting information as well.
2. A customized icon used to represent your tab in the new left sidebar page navigation structure. It should be 16×16 pixels and the tab name can be up to 16 characters (See Disney Pixar screenshot below, the Mickey Mouse ears).
3. A snippet of code that will get rid of the DREADED scrollbar within the tab and overide Facebook’s limit on tab length. This post outlines all the details:
