Contact Us
  • Adding iFrames to your Facebook Application – 2010

    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.

    Original Post:
    In early 2010, Facebook made some modifications to the API which made the embedding of iFrames more restricted. Although they are no longer supported in Static FBML tabs, iFrames can still be implemented on application Canvas Pages. However, rather than an iFrame loading automatically — as it previously did on Canvas Pages — a user action — a click — is now required to load the iFrame.

    In a PowerPoint that Facebook circulated in late 2009, Facebook explained the upcoming changes:

    iFrames
    Preserving iFrames (on a custom tab)
    If you currently use an iFrame in your page and must preserve the content of one or more of your iFrames: Create a wrapper application that lives on a canvas page. This application can have iFrames since it sits on a canvas page. Have this light weight application include the image of what you want to display, with an “Activate” button. Link the “Activate” button to the canvas page wrapper application. More information here.

    And here is that “wrapper application,” written in 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>

    There are two flavors of Facebook applications — iFrame and FBML — depending on whether you will render your canvas page in an iFrame or with FBML. Obviously, to embed an iFrame you’ll want to create an “iFrame” application. There are a number of resources on the Web for creating a Facebook application and, actually, it’s really not that hard. Here are several:

    Once you have created your Facebook iFrame application, you can visit your application page, if you’re logged in to your Facebook account, by going to http://www.facebook.com/developers/apps.php where you will see your application listed in the left column.

    Server Requirements for hosting a Facebook Application

    • Make sure your Web server supports PHP, preferably PHP5;
    • You’ll need FTP access to your server so you can create a directory and add files;
    • You need to download the Official Facebook PHP 5 Client Library and upload it to your server (if your server has PHP 5 — if your server has PHP 4 instead of PHP 5, download the older Client Library). Click the “Download Source” button and select either “ZIP” or “TAR” compression option in the popup window:

      GitHub Link for PHP 5 Client Library

      After unpacking (unzipping) the file, install the folder “src” in a directory you create and name “facebook-platform” (not a required directory name, but a good choice) at the document-root level (eg “httpdocs” or “public_html” or “html” – the name varies) of your server (where the home page file is).

    • More info is available on the Facebook Developer Wiki.

    In the directory you create on your Web server for the “Canvas Callback URL” for your Facebook iFrame application, you’ll have two files:

    • index.php – contains the content that will be rendered in the app;
    • appinclude.php – contains some meta info about the app.

    For your “index.php” file, you’ll need to render the “wrapper application” referenced above in PHP:


    <?php

    // File: 'index.php'

    require_once 'appinclude.php';

    echo '<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>';

    echo '<div id="outside_location"></div>';

    echo '<fb:js-string var="link_1">';

    echo '<iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="[ABSOLUTE URL TO iFRAME CONTENT]">';

    echo '</iframe>';

    echo '</fb:js-string>';

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

    For the “appinclude.php”:


    <?php
    require_once ($_SERVER["DOCUMENT_ROOT"] . '/facebook-platform/src/facebook.php');

    // *** Add your Facebook API Key, Secret Key here ***
    $appapikey = '[APPLICATION API KEY]';
    $appsecret = '[APPLICATION SECRET KEY]';
    $facebook = new Facebook($appapikey, $appsecret);
    // $user_id = $facebook->require_login();

    ?>

    Regarding the above, replace “[APPLICATION API KEY]” and “[APPLICATION SECRET KEY]” with the ones generated when you create your application, and make sure your have the correct URL to the “facebook.php” file.

    The “$user_id” is commented out (with the “//” preceding it) because it will cause the application not to function.

    How to Hide the Activation Image or Text After User Clicks

    In order to hide the activation image or text once it’s been clicked, you need to add a bit of FBML to the href, the “clicktohide” parameter. See below for how to implement this…


    <?php
    //
    require_once 'appinclude.php';
    echo '<div id="iframeLinkDiv"><a clicktohide="iframeLinkDiv" onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;"><img src="ABSOLUTE URL OF IMAGE" border="0" alt="Photobucket" /></a></div>';
    echo '<div id="outside_location"></div>';
    echo '<fb:js-string var="link_1">';
    echo '<iframe height="660px" allowTransparency="true" frameborder="0" scrolling="yes" style="width:760px; border:none" src="ABSOLUTE URL OF IFRAMED PAGE">';
    echo '</iframe>';
    echo '</fb:js-string>';
    echo '<script type="text/javascript" charset="utf-8">
    var outside_location = document.getElementById("outside_location");
    </script>';
    ?>

    External Resources

    I can only offer very limited support for Facebook app development. But if you post questions here, others may be able to help out.

    Comments

    1. What if I don’t have an ‘appinclude.php’ file on my server… Where does that come from? Sorry I’m kind of a beginner.

      For my index.php file am I good? I have the following :

      [Code deleted...]

      Thanks for your help!

      • As I mentioned, I don’t have time to troubleshoot everyone’s code, particularly their PHP.

        The appinclude.php is a file you must create and have on a server.

      • You will have to create the appinclude.php yourself, it is not a given in any server’s preconfig (or by the sdk I believe you have gotten used to). Use the ‘template’ Tim has provided and fill in the data presented to you by facebooks developer-app. The rest looks fine to me (but I haven’t tried it). Good luck!

    2. quicky.. does the app need to be iframe or fbml?

    3. got it working, thanks. got a tip to “smartsize” or auto-height the iframe?

    4. Does the application setting matter? (iframe or fbml)
      From what I gather, when you add an application as a tab, it is rendered as FBML anyway (as I found out the hard way with my iframe app)

      The application tab is really very restrictive, as its more of an application view that a full on application in a tab.

      This is a great post and could provide a workaround to simply pull your app in via the canvas url and have it all sitting pretty in a profile tab.

      Thanks for sharing.

      • I’m not sure if you can use iFrames in an FBML canvas page, as opposed to an iFrame canvas page. I know you can in the iFrame canvas page because I did it.

        But, yeah, with the application tab width soon to be reduced to 520px, the canvas page is the way to go, as it’ll still be the 760px width, and allows much more functionality.

        • I believe in terms of usablilty tabs have the valuable advantage to integrate gracefully into the features fanpages are offering, like wall, info, notes; while canvas-pages of apps pop out of the ‘usual’ user-experience facebook-users are used to.

          On a canvas-page, facebook-newbies might not find their way to the rest of your offerings and tend to use the back-button of their browser – these people are lost possibilities… (You could solve this issue by providing links, still people will not find them intuitively.)

          Application tabs can be (almost) as feature-rich as canvas-pages. I would (and do) recommend fanpage-tabs, even when they are smaller, to have all the great content your brand provides showcased just one click away.

        • Just following back up on this, as it looks like this width change should be coming late July (right when my go live is scheduled). If we follow the canvas page method outlined here, are we exempt from the 520px width? I have made my application at 760 and everything is good to go now. The primary route to my application will be from a tab on a brand fan page. It will be viewed under a tab, but your comment above seems to imply it’s not the same type of application. Do I need to reformat everything to 520?

          Perhaps I’m confusing application tabs with fan page tabs? My application has no tabs, just iframed content.

          • Canvas apps are still allowed to be 760px.

          • timware :
            Canvas apps are still allowed to be 760px.

            Great, so to clarify – this is considered a canvas app. Even though it’s presented via a tab on a fan page, it’s not truly considered an application tab – and therefore is not restricted to 520px. Just want to make sure I’m on the same page. Thanks!

      • You can definitely use FBML too.

        In some (some!) scenarios this even is the better option: You can render any site through the app’s fbml-interpreter, if you wish. Downside is, the app will throw errors for any not-supported tag. Upside is, you can implement fbml-functionality in your usual site (i.e. your blog) which will only show up if you render it through facebook. This might be great opportunity if you use Facebook Connect and empowers you to add facebook-specific features to your existing codebase. But be careful, there are many unsupported html-tags that can make facebook trip and fall…

    5. I believe I followed all the steps correctly, however, I’m getting the following error:

      Fatal error: Call to undefined function phprequire_once() in /home2/blah/public_html/websiterootfolder/US-page/appinclude.php on line 1

      • Sorry Derek. I can’t troubleshoot PHP issues. I’d hit the forums: http://www.facebook.com/developers/

      • I think I had the same error in my code which I was able to correct. Check the source for your src/facebook.php file. It should be in a folder in the root location. I originally used a absolute URL for this file and it didn’t work. Once I removed the root it did.

        <?php
        require_once ($_SERVER["DOCUMENT_ROOT"] . '/facebook-platform/src/facebook.php');

        • Ah yes, if you have the ["DOCUMENT_ROOT"] in there that takes care of “http://www.yourdomain.com”, so having that bit in the URL that follows wouldn’t work at all, as it’d be redundant. Thanks!

    6. Hello,
      thanks for your wonderful post! i used your method and its working great!
      i want to know how can i add a facebook application to my facebook fan page tab? or a direct site integrated on facebook page? Please Help!

      thanks

    7. Hi,

      Thanks for the post. It was a big help. Has somebody a tip to how to remove the “Activate” link after the user clicked on it? It is kind of annoying after the iframe has loaded.

      Thanks in advance.

    8. Hi, Timware

      nice post.

      My app works great. here is the Canvas URL : http://apps.facebook.com/test_mailpress/

      However i am still struggling to get this app (an iframe with a subscription form doing ajax with my own website) into a widget i could include in a Fan Page or best in any fb page.

      Thanks for your help and your time

      • If you’re using an iframe in your app, you need to have an activation image or text that the user clicks before the iframe loads. If you don’t have the activation image/text for triggering the iframe (and how to do this is explained in the post), then your iframe will load on your application page, but it won’t work when it’s pulled in as a tab application.

        • thank you timware to confirm what i read.

          btw i am wondering how these guys can have an ajax form on their fb wall (or is it a fake wall page ?) ?
          any idea ? would be nice to have your expertise/feedback.

          http://www.facebook.com/cluster.efectos?v=wall

          • If you’re talking about the yellow form in the left column box, it appears to be a valid form. I didn’t test it. But all the left-column box stuff is going away soon anyway. Currently you can’t add anything to the left column boxes.

    9. Thank you very much for the tip ! works great, my boss is happy and me too… even if the ‘click to activate’ is not an ideal solution, it works !

    10. in the appinclude script above, I see this:

      // *** Add your Facebook API Key, Secret Key, and Callback URL here ***

      So I see where to add the app key adn secret key. Does the callback url go next to “$facebook = “? like this:


      <?php
      require_once ($_SERVER["DOCUMENT_ROOT"] . '/facebook-platform/php/facebook.php');
      // *** Add your Facebook API Key, Secret Key, and Callback URL here ***
      $appapikey = '[DELETED]';
      $appsecret = '[DELETED]';
      $facebook = 'http://www.mycallbackurl.com($appapikey, $appsecret)';
      // $user_id = $facebook->require_login();

      ?>

      Also, I keep getting errors regarding this line:
      require_once ($_SERVER["DOCUMENT_ROOT"] . '/facebook-platform/php/facebook.php'); – I have pasted that *as is* into my file. Was I supposed to change any data in this line of code?

      Thanks!!

      • Jeanne, Thanks for this comment. I needed to update this post in light of the new Facebook API and because I omitted an important piece of information — downloading the Facebook PHP 5 (or PHP 4) Client library and installing it on your server. This is where the “require_once” in appinclude.php points and it’s essential that it’s present on your server. Sorry for that! And, for the “$facebook =” part, just use what I have in my example rather than the “mycallbackurl.com” that you have.

    11. Fantastic tutorial, thanks! I have my test application working if I browse to the url directly – how do I go about adding a tab to my new app on my fan page? Also, strangely – my iframe content seems to render immediately, not requiring the click to activate. Did anything change recently in FB policy that would explain this?

      • You need to add the app to a fan page. Then it’ll show up as a tab. When you’re viewing the app directly rather than via a fan page, the iframe will load without a user action. Once it’s a tab on a fan page, then it won’t load automatically.

    12. Amazing post. And I’m sorry is this is too basic but I’m struggling. I’ve developed an app and it is working fine, and I want the app to be used from a fan page (in a tab). So I realized I need to provide a link to a page inside Profiles section an a tab URL.
      What is this TAB URL useful for? Do I need to rewrite my application to be only in FBML (even though I’m pretty sure it is not possible?)? The way facebook has thought it’s to rewrite the application once for a canvas page and another for profile page?

      Thanks in advance,
      Esteve.

      • The Tab URL is where Facebook will pull the content for your iFrame Canvas App. You should first fill in the Canvas Page URL (under the Canvas tab). Then fill in the URL under “Tab URL” — I always use “index.php” in the URL. As it says: “Facebook pulls content for your tab from this URL, which must be relative to your canvas page.” Here’s a good resource for creating canvas apps: http://forum.developers.facebook.com/sandbox/viewtopic.php?id=9074

    13. Nick, It is my understanding that canvas applications are still allowed to be 760px in width after the application-tab width is shrunk to 520px. Canvas apps can, and usually are, presented on the page as tabs.

    14. I found a little bug in the Iframe script when implementing it on a static FMBL page with a visible to connect tag.

      The code doesn’t work if the screen is refreshed.

      Javascript error something like link_1 doesn’t exist.

      I tried moving the link part above the clickcode but it doesn’t seem to help.

      Any idea how to fix this?

    15. Very interesting since I had no idea you could add iframes to facebook.

    16. Hey Tim – Seeing a strange issue, wondering if you’ve come accross it. In my app I have a gradient bkd image on the body tag that lays on top of a solid html bgcolor. In FF, mac only, when viewing the application through the FB iframe only, when I click on any of my links, for a split second, only on mouse click, the block area of the a tag loses any background, and shows a quick block of the solid html body color. That same code when browsed directly in FF/mac is fine. It is fine in all other browsers both browsed directly, and through the FB app. Have you come across anything similar in your experiences?

    17. Actually – it’s not on click, but on release, or mouseup.

    18. Question – my app is running on a profile tab with no problems EXCEPT it won’t allow the share to newsfeed/post to wall popup to appear. I’ve seen this happen with other applications (see the Alice in Wonderland official app). Any ideas if there’s a workaround?

    19. My client have an app running in facebook apps and he want that app to run outside facebook. The app is using FBML tags to render. Please tell how this can be implemented. Please elaborate all steps.

      Thanks

      • Well, running a Facebook app outside of Facebook ain’t gonna work. That’s why they’re called Facebook Apps. You could use an iFrame in your HTML to pull in the Facebook page.

    20. Excellent!! Im a newbie in facebook developers and I just finished my appi following this step by step tutorial. I have a question (maybe a very easy one). I made a fan page for my company a couple of days ago, now a have this iframe appi. How I add my new appi to the fan page and use it as my default page? I saw an alert in fb that boxes will dissapear in aug 23rd. Will this affect using my appi?

      • Just go to your app’s page, by going to http://www.facebook.com/developers, click “Application Profile Page” link, then click “Add to my Page” on that page. After you’ve selected the page you wanted the app added to, via the popup window, go back to that page, click “Edit page” and for your new app, click “Application settings” and click “Add” to add a tab.

        Also, when editing your application on your developer page, when you should make sure that under “Profiles” the “Profile Tab” URL has “index.php” in the text box at the end of the URL.

    21. Lawrence Callaghan says:

      is there anyway for the iframe to load automatically in the tab without clicking the image or link?

      for example onLoad?

    22. I made an aplication using your great tutorial.
      this is what I have: http://www.facebook.com/apps/application.php?id=145824108770362

      The problem is when adding the app into a tab:
      I’ve got errors, you can see it here:
      http://www.facebook.com/pages/Barcelona-Guia-Low-Cost/144055235617491?v=app_145824108770362&ref=sgm

      any solution?

      Many thanks!!!!

    23. You can see the old method working at http://www.Facebook.com/LiveBaseballChat

      What I want to know is how do i get access to the beta so we can use the new version?

    24. Just wanted to say this tutorial worked like a breeze. I am developing apps (mini sites) for several clients and this is sooooooo much easier than static fbml (in my opinion) :)

      I do have one question – as of TODAY, when I went to create a new application for a client, I received a message stating I had to “verify” my account with my phone number or credit card….that’s never happened. What’s up with that? I don’t really want to give EITHER of those things to FB. Both can be used nefariously, and I don’t want charges on my phone bill or my CC bill. Is this something new?

    25. Definitely logged in. Just happened again. Weird. Just wondered if anyone else out there was getting this. Headed over to the FB forums to inquire….

    26. Hi Tim,

      I’ve been enjoying your content over the last few weeks while I’ve been wrapping my head around Facebook mini-development. Your material is top-notch and your responsiveness within comments is to be commended.

      Thanks for this tutorial and various others. I’ve added a “live” Like button to one of my custom tabs on my fan page (currently sandboxed); I found it surprisingly difficult to learn how to be able to do this and am utilizing this method.

      Of course, it is requiring an initial click to see the iframe so I’d much prefer to not have to do that. The folks at threadless (http://facebook.com/threadless), for example, have Like buttons on their fan page tab that are visible and active immediately.

      What am I missing about being able to do this? Any ideas?

      Much appreciated,

      David

      • The Threadless tab you mention appears to be an FBML canvas application, rather than an iFrame app. Once you get an FBML app approved by Facebook, the fb:comments FBML tag will create the Like and comment features.

        • It sure will be nice when facebook enables XFBML functionality on fan page tabs. At least, that’s my understanding of the very confusing situation: canvas apps, canvas on tabs, facebook connect, javascript sdk.

          In my case, I want a “like” button on a fan page tab and then want to utilize an event listener to reload the page when like is clicked. Given all the functionality available with facebook, it doesn’t seem like it would be too difficult; but, it is.

          As far as I can tell, you can’t utilize the javascript SDK on fan page tabs yet.

          Thanks for helping us try to keep it all straight :).

          David

    27. Tim, Thanks so much for this tutorial! I did not load perform Server Requirements for hosting a Facebook Application and yet my application seems to be working correctly and the tab is loading my iframe. Is this because I am the developer, will others beside me still be able to see it if I don’t host it properly?

    28. Suzanne … Looks good! Very nice :)

      • Suzanne,

        Yes, nicely implemented.

        I’m not sure if there’s anything you can do about the remote page but wanted to bring to your attention that it doesn’t quite fit into the 520px tab width.

        Best,

        David

        • It fits for me, David. Maybe browser differences? I’m viewing on Firefox and Safari on Mac, and no horizontal scrollbar on Suzanne’s tab. I know I try to keep the width of the iframed content to 505px to allow 15px for a possible vertical scrollbar.

          • My calendar remote page loaded into my “Events” tab is slightly larger than the allowed tab width. I cannot change this however, unless somehow there is a style setting for iframe with shrinks the page slightly within the frame. That would be useful! :)

          • I’m using FF3.6/Win. I don’t see scrollbars and the iframe is really, really close to fitting, but it doesn’t (see http://s1229.photobucket.com/albums/ee470/davidimh/public/?action=view&current=ALCCtightfit.png). the date is cut off and the right-side table border is missing. So close.

            Suzanne, you’re probably best off just leaving it the way it is if you don’t have access to the calendar page itself (and can “squoosh” the right-side content over a few pixels to the left :) ).

            If it bothers you enough, you may be able to do something by using two iframes and some CSS–one for each part of the remote content–but as CSS is the weak link in my enthusiast-level programming chain, I’m not able to easily help.

            Good luck!

            David

    29. Jennifer Niles says:

      OK I want to do iFrames/Applications I am Admin for our company’s 30 some fan pages but I am not the original profile/Admin but I am admin to these pages, when I want to add application it is asking me for my mobile phone for verification to add this but this is my own personal profile? How does this work if I’m working through my company, am I suppose to go directly into their profile (original) facebook account to add in the application from there to work on? I know this is a strange situation. Please advise. All your posts I’ve come across is very handy! Thanks.

    30. I did it once without problem, but now I´m trying for a second time in a new fan page and I just cann´t find the “link to this tab” setting, In other words I can´t use my iframe application as my default landing page. Any ideas?

    31. Hello my friend,

      First of all, congratulations for excellent post…
      I just would like to ask, which part of code i should add into my fbml static fan page tab? I uploaded all needed files to my server and everything other is done, like in tut.
      I hope that you reply me soon!

      All the best
      Igor

      • Hi Igor, As the post says at the top, iFrames aren’t currently supported in Static FBML tabs. This post is about creating an iFrame *canvas* application, not embedding iframes in Static FBML tabs. Sorry!

    32. I used this Wrapper application to Add one frame inside the Custom Page of my Application. But Got an Error there.

      a10531514314_Link1 is not defined.

      Can Any tell me why is this Happening?

    33. Hi, It is working for me but I get the JS error :

      FB_RequireFeatures is not defined.

      Any thoughts?

    34. I have created a facebook application http://apps.facebook.com/beer-beverages/. It has an image gallery and google map. Both are loaded on page load using javascript. I added the application in a facebook page tab but google map and gallery are not working. My page is located here: http://www.facebook.com/pages/Kiran-takeaways/149579291723154?v=app_154941544542752&ref=sgm
      Please advise how can i get the gallery and map working on application tab?

      • When you add your app as a custom tab on a fan page, different rules apply. The following won’t happen until the user clicks to activate:

        1) iframe loading;

        2) JavaScript running;

        3) Flash running.

        They will work fine on the application page, but not in a page tab.

    35. I’m an amateur to say the least but with the help of your tutorial I now have iframes on my fan page. so thank you!
      I am however having issues hiding the activation text. I am not sure what to put where.

      I am even more confused because I have only used a fraction of the code shown above to get my page working the way its supposed to. Here is what I have:


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Bla Bla Bla</title>
      </head>

      <p><img src="http://INSERT_HERE.gif" width="503" height="41" alt="Insert Here" /></p>
      <p>

      <a clicktohide="iframeLinkDiv" onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer; font-family: Tahoma, Geneva, sans-serif; font-weight: bolder; font-size: 12px;"><strong>CLICK HERE TO VIEW RESULTS</strong></a>

      </p>

      <div id="outside_location"></div>
      <fb:js-string var="link_1">
      <fb:iframe height="1200" allowTransparency="true" frameborder="0" scrolling="yes" style="width:100%; border:none" src="http://INSERT_HERE.php"></fb:iframe>
      </fb:js-string>

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

    36. Wonderfull tutorial. I have working! thanks a lot!

      is there anyway for the iframe to load automatically in the tab without clicking the image or link?

      for example onLoad?

    37. Hi,
      this tutorial works fine!
      but with IE7 and IE8 when I open the tab, it’s shown the follow javascript error: this._t.parentWindow is null on the facebook file…

      some ideas?

      Thanks

    38. Great post. Thanks for your help.

      I’m having trouble getting my canvas page/app to show up as a tab on my fan page. I went through all of the settings, added the app as a tab from the app settings, and it shows up as an installed application on my page – but no tab? Any ideas or tutorials on getting these settings correct? Thank you.

      -Nate

      • When editing the application, under:

        Facebook Integration > Page Tabs > Tab URL

        Make sure you’ve put the file name in the text box (eg “index.php” or whatever the canvas page URL is).

        If that doesn’t help, then on your Fan Page, click “Edit page > Applications”, locate the app, and click on “Edit settings” and make sure that it’s been added as a tab.

        Let me know which it was, if either.

        • Thanks Tim. It was a few things. #1 was adding index.php for the file name. I took that for granted. Then I had to manually add to the tabs using the “+” icon from the fan page.

          Thanks for the quick reply.

    39. Is there a way to add my paypal widget to my static fbml page? I am a beginner at basic html, so please treat me as such. I will probably have to pay someone to do it through a freelancer site. I just want to know if it can be done. Thanks. :-)

    40. Hi. If I understand everything, from now (late 2010) since FBML canvas will be discontinued, won’t I be able to create fan pages like (i.e.) http://www.facebook.com/redbull without a click of the visitor to load the iframe, each time to visit the page?
      Is it right?

    41. I don’t see how this works? It is just a word and not an iframe. What am I doing wrong? Probably not hiding the text, but I don’t see where it says to put that PHP code.

    42. Dear All,

      i would like to add dynamic tab into my business page using PHP API . am strong in PHP and facebook api too. but i could not find a way create a page’s tab using php-facebook API. really is this possible or not.

      if anyone know pls let me know ASAP

      regards
      Walkover

    43. Is this still working?

      I tryed your code but when i click nothing happens..

    44. 1 person sauna says:

      Had to let you know that this was by far the easiest explanation I could find on how to iframe one of my tabs.

      Messed up a couple of times, but knew what happened right away after going through the post and comments.

      Here’s my fan page – http://www.facebook.com/home.php?#!/pages/Free-Online-Bartending-School/173230049365218

    45. Whoops, messed up the link. You can cancel the last comment.

      Anyways, just wanted to say thanks for the help. Here’s my “corrected” link to my page

      http://www.facebook.com/pages/Free-Online-Bartending-School/173230049365218

    46. Thanks for the tutorial, however, is there anyway for the iframe to load automatically in the tab without clicking the image or link?

    47. eighore04 says:

      Hi,
      I,m new in facebook api. I’m working on application in flash and i want to include it to my fan page. This applications shows list of valentine quotes. The user can select a quotes they want then post it to their wall or to their friends wall by hitting a button.
      My questions are:
      1. How can actionscript communicates with facebook codes in posting the quotes to wall either to user’s wall or friends wall?
      2. Please send me a code on how to do it or maybe a step by step instructions on how to do it.

      Thank you very much. You help is very much appreciated.

    48. Great tutorial, and I was following it well. I just don’t understand now how to add my app to my website. How do I insert my iframe app into a tab on my fan page? I do not see an option for this when I go to apps.

    49. Hello:

      Your iFrame code worked right away in a JS app implementation.

      Added this smart size code:


      <script>
      window.fbAsyncInit = function() {
      FB.init({appId: '<%= my_app_id %>', status: true, cookie: true, xfbml: false});
      FB.Canvas.setSize({ height: 720 });
      FB.Canvas.setAutoResize();
      };
      </script>

      Included the real ID in “my_app_id”. Not working.

      Any idea?

      Thanks.

      • When you go the Application Profile Page, you should see “Add to my Page” under the top-left profile image. If you don’t, make sure that when editing the app settings, under the “Facebook Integration” the “Page Tabs > Tab URL” has “index.php” entered in the text box. If it doesn’t, I’ve found this disables being able to add the app to a Page.

    50. There is no problem adding a tab. Haven´t used index.php as the ending to the path, but will. Thanks for the tip.

      Problem is to get auto resize to work: tried the code above and also the following one:


      <div id="fb-root"></div>
      <script>
      window.fbAsyncInit = function() {
      FB.Canvas.setAutoResize();
      FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true});
      };

      (function() {
      var e = document.createElement('script');
      e.async = true;
      e.src = document.location.protocol +
      '//connect.facebook.net/fr_FR/all.js';
      document.getElementById('fb-root').appendChild(e);
      }());
      </script>

      None of them work.

      I solved the size setting issue wrapping the iframe with a fixed height box.

      Any clue?

      Thanks.

    51. Thank you SO much for this post. I’ve been searching Google everywhere to figure out how to do this and was so glad when I finally stumbled across this page. Works great! Many thanks.

    52. So, forget, at least by now, about auto-resize working on an iframe loaded on an iframe-type app that has been loaded as a Page tab.

      I’ve tried most of the stuff (code posted on FB dev forum, StackOverflow, other blog posts) out there, and also some tests of my own, and afaik, there’s no way to trigger auto-resize (to match iframe real height, and so to avoid scrollbars) on an iframe loaded inside an iframe-type app loaded on a Page tab.

      (Sorry about being reiterative, but I just wanted to make it clear).

      I’d love to be proved wrong.

    53. And while here, let me introduce you my latest iframe-type custom FB Page tab.

      http://www.facebook.com/kantor.guitars?v=app_181794948515756

      If you love awesome custom guitars & fine art, you will love this one.
      Click on the image (he’s Kareem, Lady Gaga’s guitarist) and it will load an iframe containing the website.

      Click on the a guitar to visits its permalink and to check some lightbox implementation (I’ve had to overcome the issue of having a very large fixed-height iframe when positioning the lightbox).

      Iframe content is managed throught a CMS (http://textpattern.com), so Page tab is always in sync with main website (http://www.kantorguitars.com).

      It wouldn’t have been possible without this great tutorial (keep’em coming!), so many thanks to HyperArts and Tim Ware.

    54. emigdio gutierrez says:

      Alas!!! Exactly what i have been looking for.

      By all the discussion swirling on the topic; I would think the iFrame/JS-SDK approach is as close to preserving functional code past FB’s decision on handling iframed tabs. Well, one can hope anyway.

    55. Since FB likes iframes so much, when the hell will they remove onclikc function? It’s killing the CTR don’t you think?

      • Mat, did you see FB announcement yesterday?

        “Introducing iframe Tabs for Pages”
        http://developers.facebook.com/blog/post/462

        • So that means that onclick is eliminated when user navigates through tabs? What about when he comes to the fan page straight from an add or search. Will it work also?

          • Not sure what you mean by “onclick is eliminated”.

            Now you can load a remote website as a tab, on an iframe, without the need for users to manually trigger that load via a click on a pseudo-splash-screen.
            When a user comes to a fan page from an ad or search, and he isn’t a fan yet (ie. he didn’t click the Like button), the FB Page will default to the tab that you have set as default
            In other words, you can choose which tab is the default for users that still didn’t “liked” your page, or that aren’t logged in into FB.
            Once they “liked” the page, on next visits they will be taken directly to the Wall tab.

            Of course, let’s wait an see if master Tim has anything to add and enlighten us up one more time.

        • Thanks for this article!
          But regarding the onClick activation… I’m not able to remove it.
          If I just keep the code for the iframe itself in your example, I get the error “HTML error while rendering tag “iframe”: iframes forbidden by flavor TabFB”.
          Can you post another example that does not need the onClick activation, and loads automatically?
          Thanks!!

    56. Does anybody know how you can still add tabs to your FB page (or to knew FB pages) after the 11th of March (when FB doesnt offer Static FBML anymore)?

      • Hi,

        There are still “TABS” but they are just on the left hand side now and items. They just do not appear as real TABS at the top anymore.

        Does this answer your question or do you mean something else?

    57. Thanks for update!:) I better run and test some iframes:) Thank you!

    58. Great info – thanks. I have a key question for someone. I too have created an iFrame page and it is just html based. I use it as a welcome page to my places page. Everything seems to work great, except if you visit the page and forgot to login to facebook – the page is just blank. The same thing happened when I tested Julian’s guitar page too. I was using a welcome page using the static FBRL app and it worked fine if you weren’t logged in. Does anyone know how to correct this?

      Thanks, Craig

    59. With the updates announced and implemented last Thursday, February 10, 2011, clicking to activate is no longer a requirement on Page tabs. This is, of course, great news. We’ll be updating our blog with new tutorials very soon. Meanwhile, here’s a great place to start learning about it: a Facebook Developers Blog article on iFrames on Page tabs.

    60. Hi everybody, maybe a littlebit off topic, but to be able to start working with Iframes you need to verify your account with FB. In a lot of countries that doesnt work with your mobile. FB then tells you on their developers platform to add your details to their bug report (which is there since 2009). To be able to do that you need to register. They will then send you an email. But also this email I havent recieved. Anybody any ideas about how to verify my account?

      Thanx!

      • I have also been waiting for their answer. I tried to register with three different email address without any answer from them. I also emailed the forum admin there, no luck either…

        That’s very poor support…

    Trackbacks

    1. [...] Adding iFrames to Your Facebook Applications: 2010 Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial. [...]

    2. [...] Adding iFrames to Your Facebook Applications: 2010 Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial. [...]

    3. [...] Adding iFrames to Your Facebook Applications: 2010 Recent changes to the Facebook API further restricted the use of iFrames. For example, it can be embedded in a more static FBML. iFrames can still use the application canvas pages, however, which is the subject of this tutorial. [...]

    Speak Your Mind

    *