Facebook Switches to iFrames: What SMEs Should Know

by Willy Lim
(Co-Founder, NetProfitQuest)

Original article appears in Jun 2011 issue of SME & Entrepreneurship Magazine.

On March 11th 2011, Facebook shifted away from the old FBML model within Facebook Pages to iFrames as part of the roll out of the new Facebook pages. This is a new way to present custom content on Facebook Pages. Tabs and FBML will no longer work for Facebook Pages. If you have already installed the static FBML application, it will continue to work. However, you will no longer be able to create new FBML apps and pages will no longer be able to add the static FBML app.

What is iFrame?
iFrame is not a new invention: an iFrame is a standard HTML tag that allows one webpage to be shown inside the "frame" of another webpage (hence the name iFrame, and no, it is not invented by Apple...).

If you know how to create a webpage, you can now display that webpage inside your Facebook page by keeping it to 520 pixels in width using iFrames. iFrames allow marketers the creativity and flexibility to create webpages that can be hosted elsewhere, but displayed WITHIN the Facebook Page.

Beyond displaying nice webpages within Facebook Page
However, iFrames is beyond just displaying great content. The switch to iFrames means that developers can create dynamic web applications using standard programming tools such as HTML, CSS, PHP, ASP, JavaScript, Flash, and all the other geeky stuff, and register them as a Facebook app and then add the app to a company's Facebook page using the iFrame.
With iFrames, Facebook Page owners can now have a more direct relationship with their Facebook visitors. Conversion tracking is probably the first thing that SMEs should be focusing on. This would help to justify the investment in social media by tracking its ROI. The easiest way to do this would be to embed Google Analytics code in the iFrame.

Also, with iFrames, you will be able to recognize the visitor, track their source and note their IP address in order to present a customized response. These capabilities are much stronger through iFrames than they are in FBML. iFrames offers the possibilities of exciting personalization options.

For example, you will be able to customized landing views based on user location or referral source, dynamically updating the view for specific content, loading of Flash elements and interactive front-end features which formerly could not be loaded on Facebook Pages.

A replacement for brand micro-sites
The immediate obvious good news for SMEs marketing on Facebook is that you may not have to try and pull someone away from your Facebook page to get them onto your website anymore: You can now accomplishing your sales or branding goals entirely within Facebook. Studies have shown that in doing Facebook ads, Facebook ad respondents tend to convert better when they land on a page within Facebook, rather than an external webpage.

Overall, iFrames will allow for a much more immersive experience consistent with your brand's corporate experience. iFrames now opens up a whole new world of possibilities for what can be delivered, including e-commerce, directly through a Facebook Page. Businesses should find it relatively easy to convert existing web apps for Facebook use with iFrames. The evolution of Facebook with iFrames will pave the way to it to become the replacement for micro-sites of brands.

Getting started with iFrames
Here are some pointers for beginners to bypass the nitty-gritty technical details of becoming a "Verified Facebook Developer" and setting up a brand new Facebook "Canvas" app to use iFrames. (If you are web programming expert, skip this section, it’s kindergarten stuff for geeks.)

1) Simply login to Facebook and go to this link: http://www.facebook.com/apps/application.php?id=190322544333196
This is the link to the "Static HTML: iframe tabs" application. Once you are at this page, click "Go to app".

2) Add the app to your facebook page
Select your Facebook Page to add this application and click "Add Static HTML: iframe tabs".

3) Input and edit your content in the "Static HTML: iframe tabs" app
Once you added the app to your facebook page, you will be redirected to your facebook page. Click on the star icon on the left hand bar that says "Welcome". You can now paste your content into the box that says "Enter your content here". If you want to limit certain content to fans only, you can paste these privileged content into the second box below that says "Optional Fans-only content". Once you have pasted your content in the boxes, click "Save and view tab" and that'ss it! You now have a customized iFrame tab on your Facebook Page!

If the above steps sound way too complicated for you, just find a competent web developer to do this for you :)