2 Simple Hacks to Create an iFrame on a Facebook Fan Page tab

[UPDATE: This script stopped working on the 8th of March 2010, I am working on a new work around.]

I have published an update to this as the old iFrame solution does not work – Facebook Applications for dummies

I found this neat little script today that I amended a bit. Not a lot, but just a bit to suit my purposes. As we all know, Facebook doesn’t allow you to put an iFrame on a Facebook Fan Page tab. I decided that I wasn’t going to follow this rule as it didn’t fit either mine or my fan page users needs. Thus I Googled for a while and found the neat code snippet enclosed in the document you can download from here:

Download: iFrame Code for Facebook Fan Page Tab

There are two small changes you need to do to make the script work miracles for you and your Fan page. Well, you’ll need to read this on how to create an FBML-box to your Facebook Fan page, or this to know how to set up a Facebook Fan page first. But then you can move on to downloading the .rtf file above and read what I’ve written below.

1. Your Tab loader image

As Facebook doesn’t allow you to run JavaScript directly on a Facebook tab, you’ll have to create a loader image. The loader image can be of any size within the limitations of the with of the tab. Experiment and you’ll get the point.

<img src=’[Enter a url to an image here]‘ />

Exchange the [Enter a url to an image here] with the full image URL you want to put as the loader image.

2. The dimensions and source of the iFrame content

Secondly you’ll need to change the dimensions of the iframe to suit your needs. Change the following atributes of the following code snippet from the downloaded file.

<fb:iframe width=”[With of iFrame]” height=”[Height of iFrame]” style=’margin-top: -50px; margin-left: -40px; margin-bottom: -40px; margin-right: -50px;’ frameborder=’0′ src=’[Enter the source of the iFrame here]‘ scrolling=’no’ />

  • [With of iFrame] – exchange with a with in pixels such as 650px
  • [Height of iFrame] – exchange with a hight in pixels such as 500px
  • margin-x – I just wrote that out there, but you can change all its values or put them to zero. Basically this is added so that you can hide parts of a page you don’t want to include in your visible iFrame
  • [Enter the source of the iFrame here] – any source you’d like to add

That’s it!! You might fail a couple of times and remember not to remove any of the ‘ or the ” but remove all the [ ] square brackets. There should be no square brackets in the finished code. I have just put it there so that you will get confused :).

Support this blog by Spinning this story HERE: http://sphinn.com/story/139109

or tweet it… 😀

Now go n play child, go and play!!

//Jesper

23 thoughts on “2 Simple Hacks to Create an iFrame on a Facebook Fan Page tab”

  1. Hi Jesper:

    I can’t seem to get this to work for i.e., use of the fb:iframe tag in the Facebook page, whereas if I run it as a facebook app, it shows up nicely, but won’t budge if the app is on a facebook fan page. I tried several possibilities, but the error that I get is a Javascript error pointing to some random Invalid object or Null.

    Any help that you can provide?

    Thanks.

    \shekar..

    Reply
  2. Hey m8,

    Well, I guess you need to e-mail me your code. Or send ma a screen dump. I used it today. As you cannot run javascript on the page right away you have to get it to put an image that the user clicks on in the first view and then load your “fb:ifram”… Have you put it in an FBML box?

    I’ll pass you an e-mail and we’ll solve it.

    Reply
  3. Can’t get it to work. I loaded a 700px by 500px blank loader image, then inserted my source for the iframe. Here’s my code:

    As you can see I’m trying to play a .swf file. Is that the problem or should that work? Thanks!

    Reply
  4. Hey,

    E-mail me privately and we’ll solve it. You probably just have to redo it. There was a guy previously who had the same kind of problem. There is no problem with swf-files as long as they can play normally.

    You need the preloader image though. You cannot execute javascript if you don’t use an image that someone click on to cover the area where your iframe will be located.

    //Jesper

    Reply
  5. Hey Jesper…. could you chek the code in a facebook fan page tab ans see if it works now…. I think facebook finally found out about the JS iframe loophole and disabled that feature….. I had this code working perfectly for months than suddenly it didnt work anymore……

    Reply
  6. Hey Jesper,

    I found your (this) article shortly after you posted it …and was delighted.. It all worked right out of the box!

    However I noticed last week my IFrames were no longer working using the javascript !
    As it happens this is and always was against FaceBook`s TOS.

    Im still able to use the image swap function to load videos….

    However, Im no longer able to load the iframe /script that I used to show a scrolling image marquee..

    Example of the page I created is here:

    http://www.facebook.com/pages/NetWorkerie-Irish-Internet-Work-From-Home-Program/197454269254?v=app_4949752878

    Looks like we`ll have to work something else out !

    -JD

    Reply
    • Hey JD.

      Yes, as I updated the very top of this article as soon as I got the info.

      I am constructing a tutorial on how to do this through “semi-proper” channels… ie. through an application 🙂

      I have been trying to load a jQuery that creates a pop-up image that looks like it is framed. More on that later as I progress 🙂

      Cheers,
      Jesper

      Reply
      • Hey Jesper, great tutorial btw.
        Have you figured out a new loophole around this issue? I found a way that is allowing me to hold on for a bit longer till you do 😉 I have an iframe that loads a “mini-website” with RSS contents and whatnots.

        The way I get it to load is by creating a box on the side on the fan page with a link directly to the tab with the content, which has a small banner with the message “Click here to display content” (it’s all in Spanish) and the moment it is clicked it opens the content right below the image.
        While the image doesn’t go away, this method works 90% of the time that it is done. Some newer browsers don’t support it (ie Google Chrome) but IE and Firefox will MOST of the time.

        Anyway, if you happen to create another great tutorial like this one on a new way, please LET THE PPLZ KNOW!

        Reply
        • Hey,

          Yes I have found out a new way to do it, but the problem is that I haven’t had time to write it up yet. I am working too much right now and the tutorials take too much time. I will first publish a full tutorial on the changes to Facebook applications and a video tutorial on how to build them so that we don’t end up in this mess again :).

          Cheers,
          Jesper

          Reply
  7. If you want to use iframe with pages tab I have found this hack:

    var outside_location = document.getElementById(‘outside_location’);

    The point is that there must be a start picture or a link, after start picture/link is clicked the iframe comes visible.

    Reply
    • Hi,

      Dumb question from a dumb guy, but where do I stick this into Jespers original solution above to then get my iFrame working?

      Thanks for any suggestions.

      Stuart

      Reply
      • I will leave this to someone else as I am working on a completely new solution. Merging some off-facebook resources with Facebook for easy management.

        Reply
  8. Hey Jesper i wanted to ask you one thing,
    Could you give me example code for the thing i need:
    I need when you load fanpage, after 10 seconds of load hyperlink to become visible. Thanks ~ !

    Reply

Leave a Comment