NOTE: You cannot use iFrames in Static FBML custom tabs. You can ONLY use iFrames in an iFrame canvas application.
However....
UPDATE: August 19, 2010: Facebook announced on its Developer Blog that "We will begin supporting IFrames for Page tabs in the next few months." This is in tandem with Facebook's announced move away from FBML and towards iFrames for applications and Page tabs.
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.
Resources
Pulling Wufoo forms into an iframe in Static FBML
HyperArts Post on embedding an iFrame in a Facebook Canvas Page application in 2010
Recent (2010) discussion on Facebook Platform Developer Forum
Static FBML Code Templates for Sale!
#1 by Lily Ciric - February 25th, 2010 at 12:00
Great code, exactly what I was looking for! I was wondering if there is a way to remove the link "Let's see that iframe...." once the iFrame is loaded? Thanks!
#2 by admin - February 25th, 2010 at 12:34
I can't think of a way to do that, but perhaps someone else can
#3 by Pinky - April 5th, 2010 at 00:11
We have a fan page on facebook and we want our e-mail list page will be on our BOXES tab. Like this one.
What should I do in order for me to put our e-mail list application?
#4 by timware - April 5th, 2010 at 12:36
Per my post on upcoming Facebook changes, the boxes tab and left-column boxes are soon going away. So it may not be worth your time.
#5 by Andreas Sefzig - February 27th, 2010 at 07:48
You might hide the link when it is clicked (which however is independent of the iframe's state) - by using 'clicktohide':
<div id="iframeLinkDiv"><a clicktohide="iframeLinkDiv" onclick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a></div>@timware: Do you know wether the 'late February 2010'-changes are done by now? Then this iframes-technique survived
#6 by admin - February 27th, 2010 at 13:21
Andreas, I tried you clicktohide and the iframe doesn't load. Did you get your method to work?
You'll certainly know when the "late February 2010" changes are in because your Static FBML application tabs will be scrunched between two outside columns, and the width will be 520px.
PostScript: Andreas, who wasn't able to post his solution - some "duplicate content" issue - got his show/hide to work, using this code:
<div id="iframeLinkDiv"><a clicktohide="iframeLinkDiv" onclick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a></div>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
<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>
Example: http://www.facebook.com/pages/Sefzignet/159168325218?v=app_10442206389
#7 by Lily Ciric - March 2nd, 2010 at 10:24
Andreas, thank you! It worked for me. I just replaced my top part of the code with yours and the iFrame loaded fine.
Thank you both for the help!
#8 by Andreas Sefzig - March 7th, 2010 at 03:06
You're most welcome! Sad to say it does not help since iframes are disabled by now... Please see my comment below for a possible solution.
#9 by Luke - August 22nd, 2010 at 11:52
It's no longer working now. I think it's very big Facebook's fault.
#10 by timware - August 22nd, 2010 at 15:56
Hmmm. It doesn't appear you read the text in bold red & black at the beginning of this post. Please do.
#11 by Martynas - March 1st, 2010 at 03:45
How to make that external site content would be displayed without a click? I mean - external content when you click FBML field?
#12 by admin - March 1st, 2010 at 08:23
You need a user action to enable the iframe. It's stated in the blog post.
#13 by Jordan - March 2nd, 2010 at 23:42
This was working for me this afternoon but is no longer working. Did Facebook disallow this?
#14 by admin - March 3rd, 2010 at 04:06
Well, it appears to me as well that it doesn't work. Is this permanent? Stay tuned.....
#15 by Andreas Sefzig - March 7th, 2010 at 03:07
Yep, now it's official...
#16 by Gamooo - March 3rd, 2010 at 03:40
This method doesn't work anymore... since today?
#17 by loska - March 3rd, 2010 at 03:56
Hi there, I've tried to put the code in fbml page but it doesn't work, I've just changhed the url, is that right?
I've also tried the code you put you told to Andreas Sefzig but it doesn't work to!
Help please!!
#18 by admin - March 3rd, 2010 at 04:11
Facebook seems to have shut down this method of using an iframe.
#19 by loska - March 3rd, 2010 at 06:51
thanks!
I've another question: what about image maps on static fbml? I've tried whit coords like a normal html but it seems doesn't work!
For a landing page like this one http://www.facebook.com/HiltonCaribbean
how can I do?
#20 by Andreas Sefzig - March 7th, 2010 at 03:24
Facebook does not support imagemaps.
You can implement a similar user-experience by using CSS' absolute positioning of transparent GIFs (http://www.image-maps.com/ might help you)...
#21 by Charles - March 3rd, 2010 at 10:46
This code still works on Facebook's FBML Test Console under their Developer Tools (http://developers.facebook.com/tools.php).
Any word from Facebook whether this move was permanent or not? Their roadmap is not the easiest to navigate. Thanks!
#22 by Ken Skier - March 3rd, 2010 at 04:39
Good morning! I've been using your iframe technique successfully on a Facebook page. (Not yet public.) Thanks for showing the technique with such clarity. Alas, I discovered this morning (March 3) that the technique no longer works. No reason to think you can "Fix" this magically...but I will welcome any suggestions you can post that will enable a Facebook page to include externally-hosted content. Thanks again for your previous posts, and for any insight you can post on this new issue.
---Ken Skier (http://runwithKen.com)
#23 by brad - March 3rd, 2010 at 13:55
If you create it using the above code, then move it to the wall, the code works. Of course, the width is limited. You can also then move it back to the boxes (again limited in width) and it will work once (not very useful behaviour).
Be sure that the application settings are for box only. Also, be sure that it doesn't exist as a tab while it is also a wall item.
#24 by admin - March 3rd, 2010 at 14:00
Thanks Brad. Unfortunately, the Wall left-column stuff is going away too, soon, as are Boxes. I think the best strategy here is to accept that FB is phasing out the ability to load iframes.
#25 by VizWhiz - March 3rd, 2010 at 14:08
Seems that it works just after switching from wall to box or the other way around.
So, when all you want to do is to either embed an external web page into a Facebook Page or create a link to that external site (that opens in another browser window ala a href="www.external.com" target="_blank", is that something that can be accomplished simply?
#26 by simon - March 3rd, 2010 at 14:51
so the iframe trick you posted still works in ie but doesnt work in firefox/chrome
interesting.
what are you saying about fb phasing out the ability to load iframes? wont there still be a way within an application? hard to believe that iframe support will be completely gone.
#27 by admin - March 3rd, 2010 at 18:48
I believe that iframes will still be supported on application canvas page. The stuff with switching between box & tab may work temporarily but I doubt it'll last.
#28 by Cheryl - March 3rd, 2010 at 18:40
it seems that anything already published is working, but if you reload (F5) the page it will not work again. Anything that I have tried to publish today failed (then i found this post) I'm working on a way around this. I have 6 orders on standby for iframe content within fan pages so if anyone else comes up with something please share here... i will do the same.
#29 by admin - March 3rd, 2010 at 18:55
Cheryl, I think the only solution to having an iframe supported is by creating a custom application. I believe these will continue to be supported. But no longer will they be supported on Static FBML pages, whether requiring a user action or not. Sad but true.....
The other drag is Facebook's modifying the share options in FBML. From the Developer Wiki Roadmap (http://wiki.developers.facebook.com/index.php/Roadmap_Notifications):
"We're removing application-to-user notifications and user-to-user notifications. Instead, we encourage you to use other channels to communicate directly with your users, and to enable them to communicate with each other about your application."
#30 by Bob Kamp - March 3rd, 2010 at 21:23
The iframe trick will work if the tab is accessed via a link, rather than clicking on the tab itself. Here's my example. This doesn't work:
http://www.facebook.com/nexxus?v=app_10339498918&ref=ts
But this does:
http://www.facebook.com/nexxus?v=app_4949752878&ref=ts#!/nexxus?v=app_10339498918
Any thoughts as to why the extra click is necessary?
#31 by admin - March 3rd, 2010 at 22:04
Well, Bob, none of those links on your second -- the one that works -- work. Clicking produced nothing whatsoever.
#32 by Bob Kamp - March 3rd, 2010 at 22:12
It looks like the link broke when I pasted it in. Let's see if this works:
http://www.facebook.com/nexxus?v=app_4949752878&ref=ts#!/nexxus?v=app_10339498918
If the link still doesn't work because it breaks in the middle, go to:
http://www.facebook.com/nexxus
If you click on the "Shear Genius" tab after the info tab, you'll get my first link. If you click on the "Shear Genius" graphic below the main Welcome image, you will get my second link which should work.
#33 by rach1155 - March 4th, 2010 at 13:00
Thanks for the discussion here - it's been very helpful.
To the last post by VizWhiz - I tried simple HTML within the FBML tab just now to accomplish a link that opens to another browser window. Of course I'd love to have the site framed within Facebook, but ...
Here's the page:
http://www.facebook.com/pages/Richmond-VA/Joyner-Fine-Properties/34684396636?v=app_4949752878
Here's the code I used:
<a href="http://rvahomesearch.com"><img src="http://globalwolf.joynerfineproperties.com/Docs/JOY700Docs/Submit/imgs/SiteSearchForFB.jpg"></a>
Not the ideal solution but might be helpful.
#34 by bcj - March 5th, 2010 at 08:04
It seems that this app: http://www.facebook.com/incubus?v=app_5179614317 is able to do this still. Click the play all links which href="#" and open a div with an iFrame as a button to launch an external player.
Thoughts?
#35 by Andreas Sefzig - March 7th, 2010 at 02:35
Since last week iframes are finally disabled
But whatever you coded, you might reuse it as an application tab (you then need to load it from your server).
Application tabs are installable to profiles and app-pages; but not to fanpages! Can anyone confirm this (or did I mess up the config)?
#36 by Andreas Sefzig - March 7th, 2010 at 05:59
I did mess with my config.
Here we go with a tab including many iframes - with the code of my previous Static FBML-tab untouched (!):
http://www.facebook.com/pages/Sefzignet/159168325218?v=app_352241977846
#37 by buzzknow - March 24th, 2010 at 20:41
Hi, how you do that?
i still can't put ifrrame
#38 by timware - March 25th, 2010 at 07:12
I think Andreas has created an iFrame canvas page (application) to implement his iFrames. You'll notice that you have to click the links to activate the loading of the iFrames, which is Facebook's requirement -- a user action -- for loading iFrames.
However, you can no longer have iFrames in application tabs such as Static FBML.
#39 by Andreas Sefzig - April 6th, 2010 at 11:05
Oops, please excuse the late answer.
Tim put it right, no more iframes with Static FBML.
Tipp: Put an onclick for every unactivated element on the most parent dom-element of your tab. This way you unlock all features wherever the user might want to click
I've come to be a little frustrated with Static FBML, since it does not allow Facebook Translations too. Since I discovered the combined power of application-tabs + cms, I'm not using Static FBML anymore.
On the bottom-line it equals to "If you are not a programmer, use Static FBML but forget about iframes. If you are a programmer, you might want to think about building your own 'social cms' to host various tabs in one place."
#40 by Krs - April 14th, 2010 at 10:49
So did anyone figure out how to load the page without clicking? i saw alot of examples here but no codes
@Bob,
How did make the canvas fit? what's the code you used, i keep getting scroll bars with in the canvas...
thanks in advance
Krs
#41 by timware - April 14th, 2010 at 11:12
Please see the follow-up post this one, where Facebook's New Rules for iFrames are explained. Your iFrame, which can now be used ONLY on a canvas page, won't load until the user takes an action, usually by clicking on an image or text.
As for the scrollbars, if the content you're pulling into the iFrame is wider or taller than the width or height of the iFrame (and the max width is 760 pixels for canvas pages), your iFrame will pop scrollbars UNLESS you add scrolling="no" to the <iframe> tag: <iframe scrolling="no">. If your iFramed content is wider or taller than the iFrame, you really shouldn't set the scrolling to "no" as this will prevent the user from seeing the content that extends beyond the iFrame container.
#42 by Arefin - April 30th, 2010 at 04:07
It is not working on my facebok page. wud anybody please check it send send it to my personal email
msn_arefin@yahoo.co.uk
#43 by timware - April 30th, 2010 at 06:07
"wud"? Shouldn't that be "wood"
Anyway, you might want to read the first paragraph of this post where it's stated that you can no longer use iframes in Static FBML. End of story....
#44 by contech - June 10th, 2010 at 13:41
The code in that article works fine for admins when the tab will be first time open direct after adding them by the plus button. After reload the iframe in the tab will not work anymore for admins, but it still works for non-admin!!! i believe its a bug -.-
*confused*
#45 by cheops - June 20th, 2010 at 12:44
Hi all…
Is there a way I can replace the "Click on link" with an image to click on…??
#46 by timware - June 20th, 2010 at 13:05
Sure, just code in an image with the <img /> tag and link it. Easy. But you shouldn't be using this tutorial, as it's been superceded by this tutorial on using iFrames with Facebook applications in 2010.
#47 by cheops - June 21st, 2010 at 07:51
Hi admin/ timware.
Can I pay you to make me a iframe code, with images instead of "on click" link
#48 by Tim Michales - July 6th, 2010 at 07:35
hey all. Im having a huge issue trying to add this code (its the tripadvisor review widget) into an FBML box for my page.
It doesnt load the app im not sure if its because of iframes and how i could replace bits of the code with the fb: tags to make it work!
could someone please help me with this??
It would be hugely appreciated. heres the code:
<a href="http://www.tripadvisor.com/Hotel_Review-g294209-d1390229-Reviews-Maji_Moto_Camp-Masai_Mara_National_Reserve.html" rel="nofollow">Maji Moto Camp</a> in Masai Mara National Reserve has 16 reviews
<!--formatted-->
many thanks!
#49 by timware - July 6th, 2010 at 08:48
Remember that JavaScript won't run until the user clicks on something.
And you can't use iframes with Static FBML. You can on a canvas page, but it requires a user action/click to load.
And your "code" isn't really helpful in terms of highlighting the issue you're having. If you're not comfortable with JavaScript or FBJS (Facebook's flavor of JavaScript), then you may be in over your head.
#50 by Khalid Shbail - July 24th, 2010 at 12:04
way round .
a drop down menu to choose page (iframe) to open it
<script type="text/javascript" charset="utf-8">
function disp1(var1) {
if (var1=='link_1')
outside_location.setInnerFBML(link_1);
else if (var1=='link_2')
outside_location.setInnerFBML(link_2);
}
</script>
<form>
<select id="gowhere" onchange="disp1(document.getElementById('gowhere').getValue())">
<option>-Select below-
<option value="link_1">HERE LINK 1 TITLE
<option value="link_2">HERE LINK 2 TITLE
</select>
</form>
<div id="outside_location"></div>
<fb:js-string var="link_1"><fb:iframe width="760" height="1280" frameborder='0' src='HERE LINK 1 ADDRESS' /></fb:js-string>
<fb:js-string var="link_2"><fb:iframe width="760" height="1280" frameborder='0' src='HERE LINK 2 ADDRESS' /></fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
enjoy
#51 by timware - July 24th, 2010 at 12:39
I don't believe this will work in a Static FBML tab anymore. It will work on a canvas app, though.
#52 by khalid shbail - July 24th, 2010 at 22:51
tested it works 100%
#53 by timware - July 28th, 2010 at 09:15
It may be grandfathered in. That is, it works because it was there before Facebook changed the rules, but if you try to do it in another tab it may not work. What's the URL of the Static FBML tab where this works? And let me know if you can create a new instance of this approach. It didn't work for me.
#54 by Sav - July 28th, 2010 at 01:56
The code above produces the following error in firefox:
a4949752878_link_1 is not defined
#55 by Michael - August 5th, 2010 at 05:30
Hi guys,
i hope you can help me. I programmed an app (Render Method: Iframe).
I wanted to use some fb commands to improve it.
I know I have to use the xfbml tags, but when i use them they dont render at all.
Any ideas?
Thanks in advance
#56 by suhas - August 5th, 2010 at 22:18
@Khalid Shbail
I have tried the code but it showing nothing. It shows the Drop drop thats it but nothing happens when U click on it
#57 by Dan - August 18th, 2010 at 00:44
I tried this code
<div id="iframeLinkDiv"><a clicktohide="iframeLinkDiv" onclick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a></div>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
<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://www.bbc.co.uk"></fb:iframe>
</fb:js-string>
all it shows is Let's see that iframe....
It doesnt load in the I-Frame...
#58 by timware - August 18th, 2010 at 06:51
If you are trying to do this in a Static FBML custom tab, you CAN'T. this method ONLY works in an iFrame canvas application.
#59 by Scandia Courtyard Hotel - August 30th, 2010 at 15:05
I've been searching everywhere to figure out how to do this. Thank you!
#60 by Chicaugon Lake Inn - September 3rd, 2010 at 13:29
What kind of iFrame canvas applications are there? I'm relatively new to all this.
#61 by timware - September 3rd, 2010 at 14:47
Hi. To find out more about Facebook and applications:
http://developers.facebook.com/docs/guides/canvas/
#62 by Hector - September 4th, 2010 at 21:37
Me and my developer almost cried of joy when we saw this post and got it to work. We're planning an app that would've taken 10 gazillion hours using workarounds but is now super easy in an iframe. Thanks thanks thanks.