How to embed iframe in facebook?

Question

An associate of mine maintains a facebook page for the company we work for.

The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.

The associate who does facebook is not a programer so he asked me to build something.

I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.

We want to embed this page on facebook using an iframe.

First we just tried entering the iframe, which did not work,

then we found a tutorial and tried to embed the iframe the way it says like this:

<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></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-TO-OUTSIDE-LOCATION"&gt;&lt;/fb:iframe&gt;
</fb:js-string>

<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>

It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1

Then we get a JS error like this:

Uncaught reference error: a325461252_link_1 not defined

But every once in a while it will work but 99% of the time we get this error.

I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.

Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.

Answer 1

Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.

I just tested the following and it worked:

<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
  <fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>

<fb:js-string var="location_two">
    <fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>

<script type="text/javascript" charset="utf-8">
  var outside_location = document.getElementById('outside_location');
</script> 

If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:

<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />

Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.

BTW: To programmatically add iframes in Facebook you can use JavaScript like so:

<script type="text/javascript">

    var Iframe = document.createElement('iframe');
    Iframe.setStyle('smartsize','true');
    Iframe.setStyle('frameborder','yes');
    Iframe.setStyle('scrolling','no');
    Iframe.setStyle('include_fb_sig','true');
    Iframe.setStyle('width','500px');
    Iframe.setStyle('height','500px');
    Iframe.setSrc("http://www.msn.com");
    document.getRootElement().appendChild(Iframe);

</script>

Good Luck!