Sunday, May 09, 2010

Embeding an iFrame in a Facebook Tab

The following example embeds an iframe in a facebook tab.  This example will work in a StaticFBML tab, or in a custom application tab.

<style>
#myFrame {
width: 760px; 
height: 680px;
border: none;
}
img { border: none; }
</style>

<div id="contentzone" >
<a href="#" onclick="loadContent(); return false;">
<img src="http://url_of_item_to_click_on" alt="Click here to see the iframe">
</a><br>

</div>

<script language=" javascript">
var myiframevar = "<iframe id='myFrame' src='http://google.com'></iframe>";

function loadContent() {
document.getElementById('contentzone'). setInnerXHTML(myiframevar);
}
</script>



A few things here that are not obvious:

  • iframe width and height must be set via CSS, attributes on the iframe tag do not work
  • formerly fb:js-string could be used (with some side effects) but it appears to no longer work (see this bug)
  • getElementById does work, despite FB prefixing the id’s with the app identifier.

No comments: