bakedproject.com Blog Not just another WordPress weblog

26Dec/102

iFrame on Facebook application tab

Using iFrame with Facebook is tricky. The FBML fb:iframe works only on application pages but not on the application tabs. Sometimes it is necessary to build an application that is only installable on a profile tab so it is running from within the fan page instead of a stand alone.

There are 2 main advantages of using an iFrame

  1. The CSS is not cached, so debugging and deployment is much easier
  2. Use of jQuery is POSSIBLE!

Facebook parser will generate an error in case of direct implementation of the iframe FBML on a tab. However there is a way to add the iFrame element via FBJS event. Facebook requires user interaction before any automated method execution on a profile tab. The iFrame that loads the content needs a clickable element, preferably an image of the actual frame output. When the user clicks on it, the frame loads with all it's glory!

1
2
3
4
5
6
<script type="text/javascript"><!--mce:0--></script>
<h2>TEST iFRAME</h2>
<div id="iframe_container">
	<a style="cursor: pointer;" onclick="iframe_container.setInnerFBML(iframe_link);">
		click to load iFrame<!-- the clickable element! -->
	</a></div>

A few important points about this snippet

  1. It is FBML, so this code does not have a body tag.
  2. The JavaScript code on top is not necessary for the profile tab, but if user is viewing the actual application, this will automatically load the iframe component, else they have to click on the clickable element.
  3. It is simply loading the fb:js-string which holds the fb:iframe implementation, inside the ifrmae_container.