Posts Tagged iframe

How to Add an iFrame to your Static FBML Page

Posted by timware in Social Media / Inbound Marketing, Static FBML & FBML, Web Coding on February 23rd, 2010

Mar 3 2010: It appears the below iframe method is no longer supported. However, you can still embed iframes into Facebook canvas-page applications, just not in Static FBML. You’ll need to create an “iFrame” canvas application that includes a “wrapper application” (a simple JavaScript app will do) to trigger the iFrame. I have written a post on how to create a Facebook application with embedded iFrame.

You cannot have an iframe in a Static FBML application tab that loads when the user hits the page. As with JavaScript, Facebook requires a user action before it will execute JavaScript or load an iframe.

Note: We believe that the “late February 2010″ changes Facebook has announced may include eliminating the implementation of iframes altogether. They have stated “Pages will no longer be able to implement iFrames on their Page. All custom content will need to be on a separate, custom tab, which you can add using FBML or a custom application.”

So, given that restriction, how do you add iframe content to your Static FBML page?

Pretty simple. Here’s the JavaScript:



<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"></fb:iframe>

</fb:js-string>

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

The user action that is required is clicking on the “Let’s see that iframe” (for example), which then loads the iframe and external URL.