Facebook TAB with iFrame and flash embed

fHi,

In my previous post I had explained how to create a facebook page and adding a static TAB to it. Now managing the content of the tab is not easy enough. Specially when trying to embed a iFrame or a SWF file. This post will help you do that.

1. Loading a iFrame
For loading an iFrame this is what I had done. In the Edit page of the FBML App:

Put the following in the textarea:

<a onClick="my_url.setInnerFBML(link_1);" style="cursor: pointer;">Load Frame</a>
<div id="my_url"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src=http://url_of_external_website/></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var my_url = document.getElementById('my_url');
</script>
The only problem is unless you click the "Load Frame" hyperlink the iFrame will not load. I have not yet figured out how to do that, but I am sure some one out there can.


2. Embedding SWF file

This can be small animation or interactive game/training . All you have to do is to write the following in the "FBML:" textarea:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://URL_OF_THE_SWF_FILE'
imgsrc='http://URL_OF_A_IMAGE' />

You need to add the "imgsrc", which will be the landing screen of the swf file. On clicking which the the SWF file starts executing. This too is fired only when the image in "imgsrc" is clicked.