Contact Us
  • Tutorial: Add an iFrame Application to your Facebook Fan Page – 2011 Edition

    If you’re NOT on the HyperArts Blog, CLICK HERE!

    This post was updated on 3/19/11 to reflect change to Tab URL and Secure Tab URL settings.

    New Tutorial: Add the Reveal Fan-gating Feature to your iFrame Page Tab

    Facebook recently announced that on March 11, 2011, the Static FBML application will no longer be available to be added to Pages and that no new FBML applications can be created after that date.

    While Facebook indicates that current Static FBML and FBML tab applications will continue to function for now, it strongly encourages everyone to move from FBML to using iFrame applications.

    Over the coming weeks, we will be posting a series of tutorials to help you get started with using iFrame applications on your Fan Page.

    iFrames are now supported on Page tabs

    Prior to February 10, 2011, Facebook had disallowed iFrames on Page tabs and, although allowed on Canvas pages, iFrames required a user to click activation text or an image to load the iFramed content.

    However, as of February 10 iFrames are allowed on both Page tabs and Canvas pages AND they don’t require an activation to load them!

    What is an iFrame application?

    An iFrame application you allows you to embed an external Web page in your Facebook Page tab (in the new Page layout, “tabs” have been moved from the top of the page to the left column.).

    The good news is that the iFramed Web page, because it isn’t hosted on Facebook, can use standard HTML, CSS, and JavaScript like any other Web page does. Interactions with Facebook content are done using the Facebook Software Development Kits (SDKs) and XFBML tags. (For this tutorial, the Facebook SDK is not required.)

    The downside of this approach is that you need to be familiar with those technologies and you will need a Web-accessible server where you upload the files for your application page.

    Setting up your server

    On your Web server, create a directory for your iFrame application. In this example, we are going to create a new directory on the server called “facebook” and then a subdirectory called “mytestapp”. The file path will look something like this in your FTP program:

    You will want to put all of your files (HTML, CSS, Javascript, PHP, etc) in this folder or its subdirectories. If you don’t know how to do this, read this FTP tutorial.)

    Your HTML file

    Remember, in your HTML file you can utilize CSS — and inlining styles with the <style> … </style> tags works fine with iFramed HTML files — and JavaScript (Do not use FBML or FBJS!).

    You’ll want to set the main container DIV for your content to 520 pixels wide. Here’s a very stripped-down example of your HTML file:

    <!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" xml:lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style type="text/css">
    body {
    width:520px;
    margin:0; padding:0; border:0;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    </head>
    <body>
    <div id="container">
    <p>This is some HTML content</p>
    </div>
    </body>
    </html>

    In the above example, I include both the code for an external stylesheet called with the <link /> tag, as well as inlined styles called with the <style> … </style> tags, in case you want to do it that way. Either should work fine.

    Installing the Facebook Developer Application

    The first step in creating an application in Facebok is to install the Facebook Developer application.

    To do that, log in to Facebook and then visit the URL http://facebook.com/developers

    If this is your first time installed the Developer Application, you will see the Request for Permission dialog show below:

    Click the Allow button to proceed.

    Creating your iFrame application

    Now that you have the Developer App installed, click on the Create New App button.

    Facebook Create New App

    Give you application a name, click the Agree bubble and then click the Create App button.

    Enter the security phrase and then click Submit.

    There are a lot of options you can tweak related to your application. In this post, we are going to focus on the basics needed to get your application up and running.

    The “About” Tab: Name your application and set a small and large icon

    Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.

    The icons are quite important, especially the small one now that it’s shown in the left-column navigation. So make it eye catching. If you don’t create your own icons, you’ll get the defaults, as shown below.

    The “Facebook Integration” Tab: The really important stuff!

    Click on the Facebook Integration tab on the left to get started.

    In the Page Tabs section, enter information about the location where you have stored your application files.

    • The Tab Name is what will appear on the sidebar of your Fan Page.  It can be up to 16 characters in width;
    • The Page Tab Type should be set to iFrame;
    • The Tab URL is the complete path, including file name, of the file that should be loaded first when the Tab is loaded into your Fan Page.  It will generally end with index.html, index.php or something similar;
    • The optional Secure Tab URL is the complete path, including file name, of the file that should be loaded first when the Tab is loaded into your Fan Page if the visitor is accessing Facebook over a Secure connection (https://facebook.com).  It will generally end with index.html, index.php or something similar. This URL must begin with https:// so leave it blank if you don’t have a SSL certificate for your server.
    • Note: If you do not enter a Secure Tab URL, visitors will not be able to access your Custom Fan Page Tab if they are connected to Facebook over SSL (https). The app will not be visible to them and they will see your Wall rather than your Custom Tab if they access your Fan Page.

    Click the Save Changes button.

    Installing your iFrame application on your Fan Page

    Once your Facebook application has been created, you will need to add it to your Fan Page.  To do that, click on the Application Profile Page link on the right side of your application page.

    Now click the Add to My Page link on the left.

    A dialog overlay will open and will show any pages that you are an Admin on.

    Find the page that you want to add the Tab to and click the Add to Page button.

    Your new iFrame app should now appear on your Fan Page.  If you don’t see it there right away, you may need to adjust your Page settings.   From your Fan Page, click on the Edit Page link.  Then click on Apps and find the application that you just added.  Click on the Edit Settings link next to the app and Add link.

    Troubleshooting

    Based on feedback to this post, we are starting to compile some iFrame App Troubleshooting Tips. We will update this section as new questions some up.

    Check your URLs!
    Make sure that the URL you set for your iFrame is correct. Try accessing it directly, via your browser, instead of via your Page tab. Bad URL addresses are the most common problem. If the URL to the Web page or image you want in your iFrame Page tab is incorrect, obviously the tab won’t work.

    You can also test the validity of your URL by right-clicking the area where your iFramed content should be and then select “This Frame: Open Frame in new window” or something similar (each browser presents this option a little differently).

    Error messages from your server (error 405 – HTTP verb or similar)
    If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people.

    Scroll Bars
    If your iFrame content causes a horizontal scroll bar to appear, something is causing the width to exceed 520 pixels, which is the maximum that Facebook allows. Read our tutorial on troubleshooting and eliminating the iFrame scrollbars.

    We recommend adding some CSS (either inline as shown below or in your separate CSS file) to remove margin, padding, and border from elements by default. Many browsers add spacing around certain elements by default which can cause the scrollbars to appear unexpectedly.

    <style type="text/css">
    body {
    width:520px;
    margin:0; padding:0; border:0;
    }
    </style>

    Next Steps

    If you are famaliar with HTML and CSS, you can begin building your tab page content right away. In future tutorials, we will be looking at adding interactivity to your Tab using the PHP SDK and XFBML tags.

    Up next: Creating a Reveal Tab on an Facebook iFrame application using the PHP SDK

    We would love to hear what you would like to see in this series — If you would like to know how to do something specific using iFrame applications, just note it in the comments and we will see what we can do.

    Comments

    1. chris garber says:

      thankyou, thankyou, thankyou, need I say more!

    2. Thanks for Step One Tim! I muddled through on my own and got a “hello world” tab up a couple days ago… but I will walk through your tutorial tomorrow and let you know if anything needs to be corrected.

      And *just maybe* Facebook will actually display my tab contents even if not logged in. My brother-in-law’s tab s working… mine is still MIA. Maybe I just need to create a new iframe tab and see what happens. :)

      I’m looking forward to the “Intermediate” skill level stuff…. but thanks for the Bunny Hill training… many I’m sure will appreciate it.

    3. I really appreciate all the work you put in for this. However, have you heard if there will be a similar setup for Business pages? So frustrating that I cannot use FBML or the new iFrame on already marketed FB pages.

      • Not sure what you mean, Mike. This is for Fan Pages which are also referred to as Business Pages. And as long as you upgrade your Fan Page to the new layout, you can use this method of creating an iFrame app.

        • Not sure if I will do any better explaining this…but here goes.

          Followed all the steps you outlined, all the way up to and including the “Add To Page” step. But, the link still did not show up on the business page to which I just added.

          To get it to show up, I had to

          1. go to the business page
          2. click “Edit Page” button (top right)
          3. Click “Apps” link (left side)
          4. Click the “Edit Settings” link, below the description of the application I added.
          5. Click the “(add)” link in the popup window.
          6. Click the Okay button.
          THEN the link showed up.

          Hope this makes sense. Thanks again!!!

    4. Luke Derheim says:

      Great article. This has to the best description I have seen on the net. Well done!

    5. Ok, I managed to make everything work. It seems like my hosting server did not like a GET on an HTML page. But it works on a PHP file, so I reverted back to using my PHP method, which only echoes an iFrame with its source being my HTML file.

      It now works!

      Now… Can anybody tell me how I can REMOVE a tab from the left menu? In the previous model, the tabs on top had a little menu in which you could select to remove the tab… I don’t see this anymore.

      The reason is… I renamed the tab app in my app settings, but the new name will not show in my tabs, it’s still the old one. So I’m trying to delete the app from my page to re-add it again…

      Any more help?
      Thanks!
      Guy

      • Hey Guy,

        If I’m understanding you question correctly, you want to remove one of the tabs from the new left section in the upgraded pages. At the bottom of the tabs you should be able to hit “Edit” and then an “x” will appear next to the tab. Just click to remove it. :)

        • I don’t have the “Edit” button at the bottom of my tabs… Weird..

          I created a new application and deleted the first one, then the tab disappeard. A little cumbersomed, but it worked.

          Thanks

          • Same here… I can’t remove my app from the left hand navigation. There’s no edit button below and the app doesn’t appear under “Added Apps” in the page settings.

            This is a nice tutorial, but any info on how to delete the app from the fan page other than deleting it would be much appreciated.

          • You may be seeing the ‘more’ button and you have to click that first, then the ‘Less’ and ‘edit’ buttons should appear.

      • I have the same question.

        Is deleting and re-creating an app really the only way to dislodge it from the left hand nav?!

    6. I ran through these directions and I can see my “Hello World” tab on the left nav panel, but I can’t see the App listed in the edit apps area. Any hints?

      • Hi Ben,

        If you are trying to edit the application settings, you would want to go to the Developer App page at http://facebook.com/developers. You will see all apps that you created under “My Apps”.

        Bill

        • Thanks makes sense – so used to things being in the app area!

          Another issue: I have the tab visible but I can’t see my content from the html file – just a blank page when I click the tab title. Should a really basic text file saved as index.html show up?

          • Yes, any content in your HTML file should show up in the iFrame. To troubleshoot, you might want to right-click in the iFrame area of the tab and select Open Frame in New Window (wording might vary depending on your browser). That way you can see the exact page that Facebook is loading by itself.

    7. Is anyone having issues with the alignment of the facebook page. I am getting a scrollbar at the bottom of the page, even though my page is a 520px landing image. No, borders, no padding, just the image coded in html. I’m using the iframe canvas app.

      Can’t quite figure it out..

      • Hi Dave,

        It looks like you will need to specify some styles so that the image doesn’t have any padding around it, which most browsers use by default. If you use the CSS above to reset the margins, padding, and border to 0, the scrollbar should go away.

        Bill

        • Thanks Bill, I’ll take a look at it.

          I heard through the rumor mill that it could’ve been a bug, but you explanation makes sense.

          Honestly, I’m not sure why I didn’t think of that, since I used to do inline css with fbml, before the whole IE issues.. :/

          Much appreciated!

          • I have a similar issue with IE. I have the css styles mentionned by Bill in his example. I don’t get a scrollbar but sometimes I can see the right part doesn’t fully draw.

            When I select the text with my mouse fully to the right, then I can see the whole section scroll to the left.

            In Firefox and Safari, I don’t have that issue…

            Thanks

          • Hey Bill,

            Just to let you know, your answer solved my issue :)

    8. Hi there,

      Is thee any way to trace that whether application is accessing in canvas page or under page tabs?

      Thanks

      • Hi Imran,

        It’s beyond the scope of this post, but you could probably do this using the signed_request variable that Facebook POST’s to your page. More info about the signed request they POST can be found on the FB Developer Blog: http://developers.facebook.com/blog/post/462. For Page Tabs, they pass the Page ID to your app. If the page is loaded via the Canvas, I don’t think it would have that variable set. We will be discussing how to process the signed_request variable using PHP in our next post in this series.

        Bill

    9. Hi guys,

      This may be a dumb question but I’ve followed the instructions exactly. I created a really basis test html page for a Competitions tab on my page. It works but I get a Server Error: 405 – HTTP verb used to access this page is not allowed. I’m not that technically minded so wondered if anyone can point me in the right direction, please?

      Cheers, Sue

    10. I’m sorry for being dense about this but I still can’t get my content to show up. The tab is active on the page but when I click it, none of the html content that I loaded into my html doc shows up. If I just go to the doc’s URL itself in a browser, I can see it, so I know it’s on the server and I’ve copied over the file path per these instructions, but nothing shows up in the iframe. I tried opening the frame content in a new tab and nothing shows there and the view source looks like this:
      <form method="post" id="proxy_form"><input type="hidden" autocomplete="off" id="signed_request" name="signed_request" /></form><script> document.domain = "facebook.com";
      function submitForm(frameName, appTabUrl, signedRequest) {
      var proxyForm = document.getElementById("proxy_form");
      proxyForm.setAttribute("action", appTabUrl);
      proxyForm.setAttribute("target", frameName);
      var input = document.getElementById("signed_request");
      input.setAttribute("value", signedRequest);
      proxyForm.submit();
      }
      // This try block will usually not run as our JS library
      // seems to get fetched first, but if you ever need to verify
      // it works wrap it in a function and run it through setTimeout()
      try {
      var parent = window.parent;
      if (parent.PlatformAppController) {
      var frameName = window.location.href.split('#')[1];
      parent.PlatformAppController.doProxyPost(frameName);
      }
      } catch (e) {
      // Catches unexpected access denied exception when
      // PlatformAppController hasn't been loaded yet.
      // PlatformAppController will call doProxyPost() in this case.
      }</script><noscript><div class="pam uiBoxGray">You need Javascript enabled in your browser to use Facebook Applications.</div></noscript>

      • Hi Ben,

        Something isn’t right there since the iFrame window should’t have any Facebook JS code in it. When you right click in the iFrame area and open it in a new window, what URL shows up at the top of the browser window? It should be the URL on the page on your server. Any chance you could post the URL of the Fan Page?

        Bill

    11. Nice writeup!
      I’ve got my app placed on the correct page, but when clicking on the app, it loads for a sec, but then gives me a ‘Incorrect function’ message in the place I would expct my app to appear. I’ve tried to search for this error, but can’t find any mention of it. Anyone have an idea?

      • After some more debugging it seems to be an error that is returned by the IIS 6 webserver my page is running on. It returns a 405 error for a call that’s not allowed.
        So, a little step further, but still no solution. Ideas still appreciated…

        • Always nice to solve your own problem :) Turns out IIS 6 doesn’t allow posts to a html file. So after renaming my html page to .aspx everything works fine.

          • Thanks for posting the resolution. One of the earlier posts indicated that a LAMP server also choked in a similar manner when Facebook made the request for the iFrame content . I believe that what is happening is that some servers are configured to not expect a POST to be made to an HTML file. In order for Facebook to pass data to your application, they do a POST of the Signed Request variable to the page specified in the app setup. In both cases, it seems that changing the extension to .php or .aspx solved the issue, likely because POST data is allowed for those types of files. I will update the blog post to reflect this issue. In our next tutorial, we will be looking about how to use the Signed Request variable that Facebook is POSTing to set up a “Reveal” tab to show different content to fans vs non fans.

            Bill

    12. I am curious if I need to make a new app for every single tab I need to create?

      I am managing fan pages for each of our 30 branches, and on top of that each branch will have multiple custom tabs.

      Is there a way to make the app give the business page admin the ability to choose from a group of different tabs, or insert the iframe needed from the setting in the fan page’s app settings?

      • Matthew- great question… wish I’d thought of it. Looking forward to see answers. Thanks for asking it. :)

      • Hi Matthew,

        It depends. You can actually add the same application to multiple Fan Pages, but only once to a particular Fan Page. When Facebook loads your page into the iFrame, they POST a variable called signed_request which includes a JSON encoded array. One of the values of the array is the Page ID. Since you can detect the Page ID, you could have one app that changes the HTML that is returned based on the Page ID. This wouldn’t work if you need to have multiple tabs on one page though since the app can’t be installed twice on a page.

        We will be looking at how to decode the signed_request variable using PHP in our next post, so stand by.

        Bill

        • Thanks for the info…

          I think it would make sense to make an different app for each type of tab. Ex: Contact form, about us, etc.

          Then I could use the page ID to pull the branch specific info to their individual fan pages.

          I’m looking forward to your signed_request variable post!!!

        • How can I include the PageID in the URL that calls the iframe? Something along the lines of:


          http://example.com/?P=PageID

          Thank you!

          • Hi Adam,

            You can’t add anything to the iFrame URL via the query string. As I mentioned though, Facebook does a POST to your page when they load it with the Page ID. We will be posting a tutorial in the next couple of days about how to grab that Page ID using the PHP SDK.

            Bill

    13. Great tutorial Tim!

      I also created a tutorial showing how I did it for my fan page, but it was in a video format. We basically did a short webinar and recorded it. It’s on the linked website.

      You said not to use any FBML or FBJS, but I have used FBML successfully on my custom iframe tabs.

      Why did you advise not to use FBML?

    14. Amazing stuff Tim- I wonder how many people your tutorials have helped get to grips with developing for Facebook.. literally thousands probably!

      The big tutorial I would like to see is how to use the Facebook SDK with these apps.

      The most utilised feature in FBML was ‘Hide content from non Fan’- how easy is it to apply this to an iFrame app?

      Cheers for your continued help!

      • Hi James,

        We are working on that exact post now and it should be up on the blog in the next couple of days. Thanks for the feedback!

        Bill

        • Wicked! Have got everything up and running from this tutorial and got some css and basic features going so the next tutorial should hopefully give me enough to play around with! My target is to make an app that is hidden until the page is liked and then a mailing list email submission field is automatically filled out using the SDK.. or something like that as those functions can be modified for a variety of purposes :)

          Thanks again, I will be plugging this is my next blog post

          Cheers,
          James

    15. Hi Bill- I’m slow, but just realized that you are a member of “Team Tim.” Awesome! I really appreciate your post and comments so far.

      Silly (or paranoid) question:
      I finally found an old post from Allfacebook.com, 2007, that mentions a 100 app limit. I’m sure that’s out of date, but cannot find anything to confirm that. I know we shall all soon see as we dev new iframes. But here’s the link: http://www.allfacebook.com/facebook-ups-the-application-limit-2007-09

      Am I just being paranoid and should let it go? Thanks…. for obvious reasons I have learned that Facebook doesn’t always “think ahead.”

      I know Tim said not to worry… but Tim… I can’t help my DNA. :)

      • HI Ken,

        Yes, I’m on Tim’s Team at HyperArts. I do a lot of the custom coding for Facebook apps that need PHP or Javascript. I am going to be collaborating with Tim on this series of posts related to iFrame applications. Lots of fun stuff coming!

        As far as your question, I haven’t heard of anybody running into a limit on applications, but doesn’t mean there isn’t one out there. Look forward to hearing if anybody has run into an issue with that.

        Bill

        • Thanks Bill. I eagerly await the next tutorials and may wish to work with you on a solution for my niche market at a later date. I would love to have an installable app that can then be customized for a paid subscriber… so *one* app that can then be customized and managed by the page owner for their unique content on a subscription basis. So will absorb what you are sending our way… then maybe coming back your way for some extra help.

          My niche really digs “quote forms” which I am embedding in FBML now. I’ve setup over 100 of them so far. Example: http://www.facebook.com/SanFranciscoInsurance?v=app_6009294086

          And thanks for mentioning the “limit” question in your response… I did post (twice now) in the fb dev blog… no response yet. Maybe they think it’s silly. They seem to ignore those types of posts. :)

          • Hey Ken,

            You mentioned that your niche likes quote forms.
            Have you looked at Jotform.com? I think you’ll be very please with what you are able to do with it.

    16. Thanks so much for all this info. I’ve been having fun playing around with this. I’m having a problem which is that i see my new app but when I click on “edit settings” I’m told that “There are no settings for this application.” Help. I’m sure there’s an easy explanation but I’m not sure what it is…

    17. P.S. I actually figured it out. I did not have “index.html” on my tab which is needed.

    18. Your timing is Impeccable Bill. I am waiting for some DNS record changes and such but then i’m loading my brand new SSL certificate and we’ll see how it looks. i had opted in to view facebook viz secure connection back when that option came out. Thanks for the help. I’ll ping you with the results after I get my SSL install complete.

    19. Hello everyone, i have got a question, i have to different pages on my server, these have to show up in one frame, as i have it now, a click to the second page will take you outside Facebook, i want the page to open in the same frame. what should i do to make this happen? thx Marc

    20. I have problem with appearing of vertical scroll in iframe page tab. Is default iframe content height only 800px and how to make it auto-resizeable?
      Thanks in advance

      • I found solution. I hope it will be useful for all. it’s work to me.


        <div id="fb-root"></div>
        <script src="http://connect.facebook.net/en_US/all.js"></script>
        <script>
        FB.init({
        appId : '166784456702800',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml : true // parse XFBML
        });

        window.fbAsyncInit = function() {
        FB.Canvas.setAutoResize();
        }

        </script>

        • Goran,

          Where within the html do you place the code you provided? Could you give a more complete example showing the tab code with this code in its proper place?

          Thanks

        • You do not actually need to call FB.Canvas.setAutoResize(); inside window.fbAsyncInit. Your code is anyway loading the SDK synchronously. Also if your content is static and size wont change it is better to call FB.Canvas.setSize(); to save some CPU cycles.

        • Thanks for the code Goran – it works great. As mentioned below by Kim, I placed the code right after the body tag.

          Amazing what a hassle the 520 px width limit is becoming. Every little bit of space makes a huge impact. Facebook development is becoming like development for phones!

    21. Thanks for the nice & wonderful article. I followed all these steps but sadly getting an error ‘Method not allowed’. You can visit fb tab of my page: http://www.facebook.com/worldofcricket?sk=app_195533697124069
      & the html file on server: http://donoftheworld.freehostia.com/worldofcricket/tv/livetv.html

      I need to solve this problem, please help!!

      • Hi Rmra,

        Please refer to the troubleshooting section. You will need to change the extension of you index file and then update that in your FB application settings.

        Bill

        • Thanks Bill. It works !! So there is a hight restriction I guess because I’m having vertical scroll !!!

          • Hi Rmra,

            Glad to hear that you got it working. You might check out the post by Gronan just about this one for info on dealing with the vertical height.

            Bill

    22. I keep getting the following error:

      App Temporarily Unavailable
      Parse errors:
      FBML Error (line 2): illegal tag “body” under “fb:tab-position”

      But I don’t have a “body” tag in my HTML code.

      • Hi Anthony,

        It sounds like Facebook is processing your page as FBML rather than an iFrame. I would suggest verifying that you have upgraded your fan page to new format (tabs on the left rather than the top) and that you have ‘iFrame” selected in the Page Tabs section of the app setup.

        Bill

      • Hi Anthony,

        I would get this too. Does this happen straight from the App page, or after you’ve added the app to one of your Facebook pages?

        When this happened for me, I tried adding the same App that was giving me the error message to one of my Facebook pages and it worked, even though it wasn’t working in the App page… Give it a try and see.

    23. Will the iframe apps be compatible with HTML 5?

      • iFrame apps just allow you to bring any web page into a frame within the main FB page. Given that, I’d expect that that any elements of HTML5 that are supported in the browser you are using should work fine. Anybody been using HTML5 in their iFrame apps?

    24. Bill Dailey :
      Hi Rmra,
      Glad to hear that you got it working. You might check out the post by Gronan just about this one for info on dealing with the vertical height.
      Bill

      The vertical scroll is still there. I used the above code shared by Goran. It works partially as it exceeds the hight but not helping in removing the scroll.

    25. Hi Rmra,

      problem maybe is in some margin or padding on body or some floating element. I think video container is to wide for tab. Try to reduce width of video.

      I recommend to use CSS reset code (http://meyerweb.com/eric/tools/css/reset/) or you can try 520 grid (http://520grid.com) as starting code when you make html/css code for tab page.
      Also, useful tool for finding similar errors is Web Developer addon for Firefox. It helps to easy see dimension of page elements.

      • Hey Goran,

        Thanks for the 520grid link. That’s going to be very helpful!

      • Thanks Goran. The method to remove the scroll bars & to exceed the length you shared with us was right. I was having problem with the iframe embed in my html code.

    26. Is it possible to access the profile data of my fans using this external iFrame technique? For instance, if I wanted to create a yearbook style iFrame app that displays my fans first name and profile pic at page load time.

      • Facebook won’t share any personal information about the site user unless they have authorized your application via the standard Request Permissions dialogs. Once they have authorized your app, I believe that whatever info they authorized will be passed as part of the signed_request variable that Facebook POST’s to your application when the iFrame loads. We will be covering how to access the signed_request variable via the PHP SDK in our next post.

    27. To stop the scroll bars in your iframe you need to add this to your page (you can change the height and width)

      FB.Canvas.setSize({ width: 720, height: 2750}); // live in the past

      the full script to add in your body of the page that I am not sure what it is all about as I am not a developer or programmer but it works perfectly and is this:

      window.fbAsyncInit = function() {
      FB.init({appId: ‘YOUR APP ID HERE’, status: true, cookie: true,
      xfbml: true});
      FB.Canvas.setSize({ width: 720, height: 2750}); // live in the past
      }; (function() {
      var e = document.createElement(‘script’); e.async = true;
      e.src = document.location.protocol +
      ‘//connect.facebook.net/en_US/all.js’;
      document.getElementById(‘fb-root’).appendChild(e);
      }());

      then you can add the rest of yoru page HTML and info and will ahve no scroll bars (unless you make yrou page too wide for the 520px limit)

      Hope this helps everyone
      Carol
      aka The How2 Girl

      • Can someone elaborate on this, having an issue with the iframe height and scroll bars – not sure how to eliminate them.

        Thanks

        jk

        • Hi JayKay – you can place this code anywhere within the tags – I have mine at the top of my straight under my opening tag and before my html coding. You can also enter it after your html coding and before you closing / tags

          Carol
          http;//www.facebook.com/thehow2girl

    28. Thanks for this great article!

      Just wondering, is there any way to display the iframe contents for visitors who are not logged on to facebook?

      I intend to set it as my page’s landing tab but a blank page for visitors who are not login is not ideal.

      Appreciate any help. Thanks in advance.

    29. Sorry, I wasn’t clear about place you have to paste this code to make tab or app height auto-resizeable. At first, change appId and paste code after opening tag in your app page.


      <body>
      <div id="fb-root"></div>
      <script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
      FB.init({
      appId : 'enterYourAppIdHere,
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
      });

      window.fbAsyncInit = function() {
      FB.Canvas.setAutoResize();
      }

      </script>

    30. Created a YouTube video for people who need to see it in action. Less than five minutes long.

      http://www.youtube.com/watch?v=RaLAELfEp6E

      Also it shows how people can add their custom icon, custom tab name (of which you have) and how to reorder their tabs.

      *Note: You need to have a certain number of tabs to be able to reorder. I am not sure what the magic number is, but it seems to be over at least 6 and then get the “More” and “Edit” options.

      ** Double Note: 520px is not a good size to have unless your page is shorter than 600px, as the inner scroll bar takes up at least 20px, and if you have an inner scroll bar on a 520px template or site, 20 px of your content may be covered up.

      Tim, Great work on your coverage from Static FBML to Iframes. Would love if you checked out http://iframetab.com as we have prebuilt 500px templates with all the tools one needs to have a functioning easy to edit, Facebook Fan Page.

      Cordially,
      Tom

    31. Veeeery great article indeed, thank you so much!

      Just one question (it’s only me or does this happen to all of you? :D ): created the canvas, added to the page, everything’s fine, both with html or php. But when I log out FB and load the page, the content (of the ex-tab, now little icon on the left) doesn’t load at all.
      NOTE: this occurs only in pages I created after FB introduced the new pages.

      Has someone the same problem? If so, how did you solve it? :)

    32. For me to see the iframe tab I created, I had to go to Account Settings > Account Security, and then uncheck “Secure Browsing (https)”
      I also have to “Like” pages before I can see their iframe tabs.

      So does anyone know what to add so that the page will show to people who have “Secure Browsing (https)” turned on? I know that you can set a Secure Canvas URL in the iframe app, but I don’t know how to make my server serve it.

      • Hmmm, Thanks for the above post, I’ve just discovered that I too cannot see the content of my custom page/iframe unless I’m logged in.
        I followed your instruction above A/C settings > A/C Security > but I didn’t have “secure browsing” checked so this was not the problem.
        Would appreciate any advice on how to get over this hurdle, and allow everyone to see the content, whether they are “likers”, “logged in” or not.
        Thanks

    33. Thanks for your instruction, I had just got to grips with creating custom tabs using static FBML, then this curve ball came along!
      But I’m pleased to say having followed your extremely clear guidelines I created my custom app and now have replaced my static fbml welcome with an iframe.
      Now these may be very silly questions, but……..
      This app is only relevant to my page, it contains no code/content that anybody else would be interested in using, so as long as I’ve not “submitted it” to the app directory am I correct in assuming it remains private to me?
      And therefore does not require “privacy policy URL” or “terms of service URL”?
      Just want to check I’m doing things properly……
      Thank you

      • @Kate – there is also a box you can uncheck that is about enabling/disabling people finding your app (sorry cant remember what it is called and not able to go find it right now but in the app settings if you click disable other people will not be able to find your ap I believe
        carol

    34. After I click “Add To Page”, then I go to my page the tab doesn’t show up at all (even in the apps section of “Edit Page”). Any clue why this might happen?

      • That has been happening to me this evening as well. The landing page doesn’t show up in Google Chrome, but it does in Firefox.

      • OK, I needed to add a Canvas Page label set to get it to work.

        • I also can not get it to show up on my page after selecting “Add to Page.” I have created an iframe that worked perfectly fine and did this one the exact same way, but it does not work. It shows up in the Edit Apps admin page but I can not figure out why it is not showing up on the left side menu. Anyone have an idea?!

    35. Thanks to everybody for all there help on this post, one more question, now I’ve created this http://www.facebook.com/KateCootePAPlus?sk=app_182944281746619
      How do I make it the default landing page?

    36. Kate :
      Thank you, how do I get to “social discovery”?

      You go to “edit app”, then click on “Facebook Integration” on the top left. Then scroll down and it says “Discovery”.

    37. hello,
      im experiencing the same problem as someone above already:
      it keeps giving me fbml errors eventho the page and canvas is set straight to iFrame:

      FBML Error (line 44): illegal tag “object” under “fb:tab-position”

      someone suggested to change the page to the “new” version.. my profile page is switched to the new layout..but i dont see any button or link where to change my page to the new layout (eventho i think i’ve done that already back when i changed my profile page)

      So, any other suggestions how to make the page “understand” that this is HTML and NOT FBML?

      i also tried changing the filetype to php or xml.. doesnt solve the problem either.

      Thanks a lot on advance for every tip about this annoying issue.

    38. Hi Guys,

      I know there’s a bug right now with Facebook, that when your not logged in you can’t see the content displayed by the app in a Facebook page tab. But when I’m logged in as an admin, , the content only shows up part of the time.

      Any input on this?

    39. Gabriele :

      Hi Bill, I’d vote gladly to speed up the fixing procedure, but.. what should I do with Bugzilla? It’s totally new to me!

      Hi Gabriele,

      You can sign up for a Facebook Bug Tracker account at: http://bugs.developers.facebook.net/createaccount.cgi Once you go that, visit the bug page again and click the “Vote” link next to “Importance”.

      Bill

    40. First off, thanks to Bill and others for all of this great information. I have tried Goran’s code examples to get rid of the height restrictions of the iFrames that I’m seeing. I have not been able to get it to work. I know that the page is refreshing with the code in place, but is there a setting somewhere I need to adjust in the app setup too? Delete cache? Anything like that?

      Thanks!

    41. Great post. Already changed the majority of my client FBML over to the new way. My question is and I assume this is not possible but figured you never know. So being that Fb has a width restriction of basically 500 (520 minus the the “bar”) is there anyway with php or js to scale a page that is say 900 px to the 520? Again I know I am reaching but you sometimes get surprised.

    42. Andrew :
      You may be seeing the ‘more’ button and you have to click that first, then the ‘Less’ and ‘edit’ buttons should appear.

      I’m not seeing any way to remove my tab from my page… i do have an edit button up top like other tabs but that’s to edit the page not the app… no link at the bottom of my tab/page either. Anyone still having trouble like me?

      • right “below” the links to your tabs (when using the new layout for your page) there is the “more” link be talked about.
        click this and then choose “edit”
        after that, all links will turn into editable mode and also get a little x on the right side to remove them.

        Also you can go into the “edit page” mode, switch to the “applications” settings (menu on the left side) and look for the apps you don’t want to appear anymore, or change settings for.
        click on edit on the one you want to change and you’ll find everything you need. (like adding / removing tab / renaming etc)

        But be careful with using the x here because this removes the app completely from the assignment to your page.

        hope this helped. / codewarrior

    43. Just adding a lil update to the scrollbar-issue:

      Tried a lot versions, but this one handles all the trouble i ran into (i had annoyingly persistant appearing scrollbars on the floor)

      2 major things changed: sized body width down to 510px;
      and added the function to call the window-auto resize inside a script aswell. (didnt work without not explicit calling it here)

      here’s a full example of a html(5)-index-page to construct your pages on:

      Untitled Document

      body,td,th {
      width:510px; // changed size to 510 so it stretched 10 pixels instead of risking to be rendered bigger
      font-size: 9px;
      }
      a:link {
      color: #999;
      }
      a:visited {
      color: #CCC;
      }
      a:hover {
      color: #808080;
      }
      a:active {
      color: #999;
      }

      window.fbAsyncInit = function() {
      FB.Canvas.setSize();
      }
      // Do things that will sometimes call sizeChangeCallback()
      function sizeChangeCallback() {
      FB.Canvas.setSize();
      }

      FB.init({
      appId : ‘YOUR_APP_ID_HERE’,
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml : true // parse XFBML
      });
      window.fbAsyncInit = function() {
      FB.Canvas.setAutoResize(); //shrinks to existing content’s size
      }

    44. transparent png images for the icons don’t come out well… better to just make ‘em on a white bg

      • not really having issues with that, aslong as you choose .png and set it to a good size (16 px, or max 32 px) even shadows or faded areas come out well. (.gif images are of course better placed on white backgrounds as they don’t allow percents of transparency /they save everything not fully transparent into 100% opaque)

        • of course they should be already created in this size and no shrinking / or scaling of bigger images.. that leaves really ugly results (especially as FB has the tendency to render almost everything into .jpg – which i hate as it ignores correct pixel-placements)

    45. For the LIFE of me, I can not figure out how to remove my custom tab. I do not have a “more” or “edit” option beneath my tabs, as some have suggested to click. There is just nothing. Even when I go to the installed apps page for my business page, it doesn’t show the app for the custom tab I’ve created.

      Can anyone help?

      • If you don’t have very many tabs, there doesn’t seem to be an Edit option. You could probably delete the App.

        • its generally pretty simple as there are 2 ways to remove a tab.
          If its a small number the edit link doesnt show up.. so you have to use the 2nd way to remove it (as i already wrote just a few lines above to answer someone with the same question):

          open the “edit page” link.. then you choose on the left side “applications”.. once done, it will bring up a list with all your apps which are assigned to this page.

          here you look for the one you want to remove.. and click on its “edit” link below the name.. here you will find several options,

          one of them is to remove the tab from the page, rename it, or even remove the whole application.

          Hope this helped.

          • Thank you, codewarrior. The little pop-up to remove the App was not working in mine when I tried earlier.

          • When I go to “edit page” and “apps” it does not display the app which I need to remove. I know you must think I’m crazy, but it’s true.

            It’s really a pain, especially considering the page I’m dealing with has 4,500+ fans and the custom tab I created happens to link to an error page. I just wanted to experiment and now I can’t remove the darn thing!

    46. I noticed that when I have a secure connection, I’m unable to view the iframe landing page apps I’m developing. Once I changed my profile back to not needing a secure connection, I could see my app.

      What this means is that I am going to have to start hosting my apps with a dedicated IP and SSL certificate in order for the app to be visible to all Facebook users.

      Does anyone know if this is a temporary situation? Or if this is how it will always be?

      Thanks

      • might be that your server blocks POST requests, or (if in your code) the linking to the facebook php or API functions on secure https?
        I had also problems with secure pages, as the functionalities were a bit more limited or locked to keep the secure environment https subpages are made for.

        • With my hosting company, I must have a dedicated IP and an SSL certificate in order for me to have an https address for my canvas page.

          I’m considering the hassle and expense to do so, since I’m hosting a number of custom pages for my clients.

          If a visitor to a page has gone to their personal account settings and changed Secure Browsing (https) to:
          “Browse Facebook on a secure connection (https) whenever possible,” and there is no https canvas page, then all they will see is a blank space for the custom tab.

      • Hi Woody,

        In the App Setup, there is a Secure Canvas URL setting, which I believe is the page that Facebook tries to load if the FB user is logged in via HTTPS. I haven’t tried putting an app on a secure server yet. If you try it, it would be great if you would let us know if it works as expected.

        Bill

        • If you use the secure canvas URL setting, you must actually have a secure host to use it. It requires that you are capable of hosting https.

          • This is Bug 15200 – Iframe on Page Tab not visible if User is https-only in the Facebook Bugzilla. They say,”No ETA yet, but it is active, and assigned to engineering to investigate.” <a href="http://bugs.developers.facebook.net/show_bug.cgi?id=15200">http://bugs.developers.facebook.net/show_bug.cgi?id=15200</a>

    47. Efrat Greenberg says:

      Hello,
      I am trying to load a simple html file using iframe application and this is the error msg I get from FB:

      Method Not Allowed
      The requested method POST is not allowed for the URL /my_facebook_files/WelcomeTabFile.html.
      Apache/1.3.33 Server at bear-star.com Port 80

      what does this mean ?
      HELP – anyone ?

      • Hi Efrat,

        It sounds like your server doesn’t allow POST to an HTML page. Try changing the file extension to .php rather than HTML and then adjust that file name in the App Settings.

        Bill

        • Efrat Greenberg says:

          Thank you very much !

          It worked.
          I changed the file type to .php and now it shows in FB.

          I just wonder – now the file type is php but the inside text is still html – so is that a problem ?
          do I need to change my content to php as well ???

          Efrat Greenberg.

    48. Added an iframe app and when logged in the tab link is displayed on left and in body as expected but..

      if logged out and page is accessed, with it set as the default landing page, it doesn’t load but leaves the page blank.

      then if you login and try to access the page from the left menu get the error message:-

      App temporarily unavailable
      Parse errors:
      FBML Error (line 15): illegal tag “body” under “fb:tab-position”

      Thought might be my html page code somehow but tried again using your sample code above and the same thing happens.

      Happens in both IE and Chrome so not something browser related!

      • Hi Rob,

        I haven’t seen that behavior on my pages. On my pages, when I try to view the tab when I am not logged in, it is blank (which is the bug I mentioned above), but once I log in using the log in box at the top of the page, the app appears. If that is not happening, it might be a different bug.

        Bill

    49. I had some troubles in getting my fan page to show on my client’s FB fan page. Your article gave me a clue – I changed .html on my index page on my site to .php and it now appears.
      Also, I discovered FB won’t allow a standard iframe page to work as it should. The iframe section includes the whole page layout should you click on a secondary page link.

    50. Thanks for this tutorial. I had previously tried another tutorial but the entry bar was too high. This one worked a treat once I realised one crucial piece of advice buried in the comments:
      You must ensure that you page has been upgraded; other Facebook treats the page as being FBML and you get a horrid error.
      The finished page can be seen at http://www.facebook.com/BusinessContinuityUK

      Thanks once again

      • Hi Gareth,

        Glad you got it working. We do actually have this piece of info as an “Important Note” at the top of the tutorials since several others ran into it.

        Bill

    51. I’ve but my app, got it working on the apps.facebook.com URL, however when I try and add it to the page it just doesn’t come up in the left menu. Shows under apps when editing page page, just doesn’t show up under the menu.

      I have filled out the Page Tabs settings, but it just doesn’t want to show up.

      Any ideas?

      • Hi Warwick,

        If you go under Edit Page, then Apps, then click on Edit Settings under the name of your app, what does it show? If it says “Tabs: Available (add)”, you will need to click the Add link to add the tab to your page.

        Bill

        • It has no settings under that section.

          I did however find out the issue.

          Under the Page settings of the APP, I didn’t require an index.html or anything in the tab URL just wanted it to go to / as my page was coming out of wordpress and was mod-rewritten it didn’t have an index.php or anything. However working around was that I added anything in the field, then added it to the page, the page would then add the menu item and display a 404, I could then remove the values in that field and it would just display the root directory.

          Thanks for your help!

          Page is at http://www.facebook.com/pages/All-Properties-Group-Nom-REIQ-Agency-Of-The-Year/194711277219324?sk=app_183736528329652 if you wanted to check it out.

          Cheers
          Warwick

    52. Thanks for this blog post, i have just run into your site and facebook page and am really impressed! My question is 3 fold. sorry!
      -Do the iframes have to be accessed from the left hand side menu? or can you have a small version of it on the main page which can be seen whilst people are viewing the main wall?
      -Can Sound play on these i frames?
      - last one :) If you put a link from youtube, or sound cloud etc into your post when using facebook, it embeds the video or song so that users can play it without leaving the wall.. how do they do that? ie how do you embed your site into links that you or other people may put on?
      I would be so gratefull for a response, site is fantastic,

      • Hi Natalie,

        - Yes, the iFrame normally needs to be accessed from the left nav. You could link to it from the wall by copying the URL of the tab once you click on it and then posting that URL on the wall.
        - I haven’t tried sound specifically, but anything that works on a regular webpage should work in an iFrame.
        - Not sure what you are referring to exactly. You could put the “embed” code that you would get from YouTube or Vimeo into your PHP file.

        Bill

    53. Sirko Pabst says:

      Hi, thanks for this really nice tutorial.
      I build my first iFrame Tab App, but I have a probem with that. If I put my iFrame App to the Tab on the left side, I can see the tab on the left side and I can see the content. But no other can see the content. The Page is white. And its equal if the other person is logged into facebook or not. They see my individual tab in the left side, but after clicking it, they do not see the content.
      I hope you can help me, because its exasperating.
      Many thanks

      • Hi Sirko,

        I’m not really sure what is happening there. Anybody who is logged in should be able to see your application.

        Bill

      • Hi there, unsure if this is the source of your problem but under the options of your tab development check under the “Advanced” >> “Authenticaton” settings and make sure that “Sandbox” mode is disabled.

        Hope that helps.

    54. Hi, I am trying this tutorial, but I am getting this message on my fan page. please advice me

      405 – HTTP verb used to access this page is not allowed.
      The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

      • Hi Mehedi,

        Please refer to the Troubleshooting section of the tutorial. You likely need to change your file extension from .html to .asp or .aspx.

        Bill

    55. Hello,

      Great tutorial, I had been to many others and I was already on my way:)
      It is nice to see that I have traveled a path very similar to what you describe.
      One question however… I haven’t been able to figure it out yet. Any <a> tag referencing any other page makes a new window/tan on the browser, regardless of putting target “self” on it. Is there any way to open the new window inside the same app window, well actually inside the same canvas page?
      Great work, by the way

      • Hi German,

        In an iFrame you don’t need to specific the target. Just use something like:

        <a href = "page2.html">New page in same iFrame</a>

        That new page should load within the same iFrame tab on your FB page.

        Bill

    56. Hi!
      Thanks for sharing these tips. I actually understand why my fb page needed an upgraded.
      But! I’m not HTML/CSS savvy -any other advice to help a novice coder?

      • The “novice coder” is the true victim of Facebook’s transition away from FBML to iFrames and the terminating the ability to add the Static FBML app to Pages.

        We’re actually in the process of developing a WYSIWYG iFrame app solution. So stay tuned to the HyperArts Blog and you’ll be informed. I’d just subscribe by email using the box in the right column.

        • Tim,

          Would love to partner up with you on this project. We have something similar with 500px templates that are hosted http://iframetab.com . No coding. Pretty much exactly the same setup using your instructions. Lots of tools- Image sliders, contact forms, galleries, member areas, Polls, etc.. Lots of possibilities.

    57. Ephrat…I didn’t change any content, only the extension from html to php.

    58. David Hill says:

      My iFrame seems to only load about half the time.. even signed in – if I refresh a few times it loads but not every time!?

      • David Hill says:

        I have tried changing the extension to php, but I still get the same behaviour

        • Hi David,

          I haven’t seen that behavior, but sounds like it could be a Facebook page. I would suggest checking the Bug Database and reporting it as needed:

          http://bugs.developers.facebook.net

          Bill

          • David Hill says:

            I’m not sure but I think I might have found what was causing it..

            I am using swfObject, I had the script attached from the Google hosted library,

            I uploaded swfObject and attached it ‘locally’ and I think that that may have sorted it…

            is this possible? it doesn’t really make sense

      • David,

        I have the same problem with the new Canvas (Iframe) apps on Facebook. The only way the page shows up is when i am signed in. The public can not see it. I looked into the http://bugs.developers.facebook.net and it seems to be an BIG issue.

        Hey HyperArts …. how do you get it to work?

    59. This might be unrelated here..but im not getting any help on the FB Dev forums. Maybe someone here knows what to do:

      Since i set up a few days ago a “username” for my facebook fanpage, to personalize the adress-name to my page i’m having massive issues:

      the page does randomly all sudden not open and say the requested page wasnt found, or i would have typed th wrong URL.

      And the only way to fix this and get it back to show up is to clear my whole browser cache (sometimes even up tom 10 times before the page decides to reappear)

      I have around 300 followers on it already, and im afraid im gonna loose them when the page doesnt show up for them. Also can’t write every day tonns of mails and posts to tell them to clear their browser cache up to 1o times just to get the page back open.

      Since the username can’t be removed ot changed anymore i really have no idea what to do. And couldnt find solutions on the web neither.
      This also really doesnt only appear for me, it appears for everybody randomly when openeing my page.

      anyone got an idea if this is a known bug? or any other solutions how to fix this?

      thanks in advance

    60. Tim,

      Awesome tutorial right here. Great job!

      Quick question – and I’m sure this is basic html stuff: I’ve uploaded an html file to a directory as recommended above. However, the URL (http://headwaydemosite.com/FacebookApps/DemoWelcomeTab/Welcome.html) ends in “.html”.

      The iFrames app seems to spit this out, wanting a URL that’s points to a directory. Should I use “http://headwaydemosite.com/FacebookApps/DemoWelcomeTab/” in my app and “Welcome.html” for the file?

      John

    61. so… awesome tutorial, easy to follow, clear instructions – thanks so much!

      and here’s my problem – i’ve been over and over it to check and cannot find the solution.

      got the app made, pages uploaded, clicked “add to page”, got the overlay, clicked the appropriate add to page button, appropriate page disappeared from the list…
      go to the page… no app visible.
      can’t find it in directory – because, well, don’t have 10 users using it (and likely never will) – and so now…

      here i sit, stuck :D!

      am i just being impatient? or can you suggest tiny details that i might have missed?

      i have been thru the tutorial 3x, step by step, double-checking every blank to fill in, etc … no joy.
      tried adding the app to another page, same result.

      many thanks.

      • Hi Kera,

        What happens when you go the page and click on Edit Page and then on Apps on the left nav? Do you see your app there? If you do, you may need to click Edit Settings next under your app and then Add to add the tab. If you don’t see “Add”, that is usually the result of not having a filename in the Tab URL field in App Setup.

        Bill

    62. Eric Irwin says:

      Hi Bill,

      Thanks for the great tutorial. I had no problems getting it working but I can’t figure out how to remove the app from the page I added it to! I expected to be able to click Edit Page and then click Apps and remove it from there but it doesn’t appear in the list of apps for the page. Do you know how to delete/remove it from my page?

      Eric

      • Hi Eric,

        It seems like there might be a FB bug that is causing that. Other posters have reported that had to delete their app before it will go away from their page.

        Bill

        • Eric Irwin says:

          I suspected I might have to delete the app but I was curious to see if there was something I was missing before I resorted to that.

          I’m looking forward to going through your “reveal fan-gating feature” tutorial tomorrow.

          Eric

    63. Jason Padvorac says:

      In case anyone is interested, I just coded up a Static FBML replacement app for iframe tabs.

      So basically, all you have to do is write the HTML, and plug it in, and you’re done. No need to mess around with creating and hosting a new Facebook app yourself.

      http://on.fb.me/gFHdQV

    64. Hi,

      I’m trying out your tutorial. I have it all working on my server but it’s not showing up on my site. I went to another commenter’s page and his doesn’t show up either. What’s going on?

      http://www.facebook.com/goldsteinmedia

    65. chris garber says:

      “We’re actually in the process of developing a WYSIWYG iFrame app solution. So stay tuned to the HyperArts Blog and you’ll be informed.”

      Yippie, I can’t wait, Thankyou Tim,… you see I kind of fall under the “amatuer coder” category. My coding skills are from way back in the early 90′s before css!

      chrissie

    66. Has anyone come across a “Share” link alternative to use in an iFrame that functions like the old one used in FBML tabs? I’m referring to a button that shows up and it will invoke the “Share dialog” over your app so that you can share it on your wall. Thanks.

      • There doesn’t seen to be an official version of the “share” button that works outside FBML, but Tim has created a workaround that will allow you to do that. More info coming in the next tutorial in this series.

    67. Scott Jeffries says:

      Great tutorial. Much appreciated.
      Quick ?
      Is a new application required for each new tab desired?
      Keep up the great work.

      • Hi Scott,

        You can install the same application on multiple Fan Pages (but only once on each Fan Page). Once you do that, you need to look at the Page ID that Facebook passes to you and tailor the page content to which Fan Page tab the application is being loaded into. You might want to check out our blog post on customizing your application since this topic is covered there.

        Bill

    68. ‘Ello,

      Is there instruction anywhere for the initial setup of the app? I feel like a complete moron not being able to get past the app contacts and support email page.

      I’m getting an error that I need to point my URL to a directory, but there are 2 fields to put in a url, and I’ve put directories into each. I think it’s the support url, because when I put in an email address, the error message switches to say that my email is invalid (another question).

      Also, how strict is FB/this app about the Privacy and sundry urls? I’m just throwing in my company’s ToS page.

      Thanks!

      • There are snippets of help here and there on the Facebook Developers site, but documentation does not seem to be strong at this point. The good news is that you can just fill out the fields mentioned in this tutorial and it should work — everything else is optional (at least from a practical standpoint).

        Bill

    69. just want to say thanks again… i sorted out my disappearing act and everything is working beautifully. (filled in the blank at “Canvas page”)

      iframes app is surprisingly simple to cope with once each term/blank is described well(i notice FB takes a lot for granted, and even as an intermediate developer, new terminology can cause confusion – oh, how i wish and work for web standards!)

    70. I’m assuming if I’m an admin for a page, install an app for that page, and then am removed as admin, that app will still belong to that page. Correct? (just like with fbml)?

    71. OK, I am probably what you guys would call the ‘nightmare’ to attempt to do this. I had almost no clue as to what you were saying to do, but I followed it step-by-step. Even when I was confused, I made something up.

      I cut and pasted your sample script into an html file, went to Komposer and cut out everything between the ‘body’ tags and pasted it into the sample script between the ‘div’s. When I got done, I had the biggest mess on my fan page, and I LOVED IT! It worked!

      Now, I have this extra app on all my fan pages. lol, I searched the comments until I found out how to delete the app from Developers.

      I want to thank the author for a job well done! But I also want to thank the commenters for their experiences as well.

      I just learned how to create fan pages today. Now I can do more than some of the experienced ones, and with the new technology.

      Thank you again.

      Buck

    72. Hey guys, this is a great guide!
      Thanks so much! Already published an app with the iframe and it works like a charm!

      Though, I haven’t found out yet how to remove an iframe app from the sidebar menu once you’ve added it…how can you do it?

      Thanks again!

      • If you don’t see the “edit” link below your left-navtivation on your Fan page, it appears that the only way to delete the app from your page is to delete the application itself. The “edit” link only seems to show up if you have the maximum 8 options on the menu. Not sure if it’s “by design” or a bug, but certainly seems like a bug.

    73. hi bill

      i tried your tutorial…….but i am getting this error…..
      Server Error
      405 – HTTP verb used to access this page is not allowed.
      The page you are looking for cannot be displayed because an invalid method (HTTP verb) was used to attempt access.

      why?? can you please resolve my problem

    74. Hi Bill,

      Do you know how I set the application name as it shows in the left sidebar? If you told how to do it, I’ve missed it.

      Thanks!

      Daniel

    75. This question is in regards to using this technique for Company Landing pages…

      Every company wants that damn Like Us and or Become a Fan button within the initial design.. BIG BOLD.

      But the LIKE button that appears about this iframe app insertion is to LIKE the APP not become a fan of the companys fbook page?

      Confused?

    76. I am trying same thing but we always need to click lets see iframe first

      http://www.facebook.com/pages/DesignersDen/164524416926459?sk=app_4949752878#

    77. John Lawlor says:

      Does anyone know if it is possible to get php files hosted on Amazon S3 to work with FB iframes?

      I want to use my Amazon S3 account to host the files for use in FB iframes – unfortunately I get an error on the exact same file that works when hosted on my web host (HostGator). (error shown below)

      Thanks.


      <?xml version="1.0" encoding="UTF-8" ?>
      - <Error>
      <Code>MethodNotAllowed</Code>
      <Message>The specified method is not allowed against this resource.</Message>
      <ResourceType>OBJECT</ResourceType>
      <Method>POST</Method>
      <RequestId>1CBBE6CFF103666E</RequestId>
      <HostId>3bwvhCnnl9pSFCQyX5WysBGnlMrqGRA7dSbCS5Vhe8lZWMjT79qnpOAVdfELMHzn</HostId>
      </Error>

      • Hi John,

        AMazon S3 is only for static hosting, such as multimedia files and text files.

        It is not capable of processing dynamic php files for you which you are currently trying to do by executing them from Amazon S3. As such it also doesn’t accept the http POST method, (which facebook uses to connect to your tab/canvas page) as you can see in the error you post.

        cheers,

    78. I am trying to figure out what would cause the IFRAME to have scroll bars? Is there a way to turn them off?

      In FBML the same tab has no scroll bars and looks fine…
      see here:

      http://www.facebook.com/pages/A-Caring-Hand-Boise/125074494228950?sk=app_4949752878

      In IFRAME it has scroll bars and does not fit…

      See here:

      http://www.facebook.com/pages/A-Gentle-Touch-Home-Care-Las-Vegas/170946962953617?sk=app_154338034622113

    79. Thanks for the very clear and usefull tutorial. I have added a booking engine to my hotel page and it’s worked perfect : http://www.facebook.com/pages/Marina-Plaza-Tala-Bay/122551634441163
      I tried the same on our destination page http://www.facebook.com/pages/El-Gouna-Red-Sea/48882904314 and the application does not appear in the left menu, not even in the Apps menu. I tried it on another test page and it worked. What’s wrong? Application ID is :http://www.facebook.com/apps/application.php?id=132327303502870

    80. Annabel says:

      This is an awesome tutorial. Top notch. I’m now all IFramed up now.

      However does anyone know how I can change the order of my menu items on my Facebook page?

      My shiny new IFrame page is at the bottom of the list under and I want it at the top.

      There doesn’t seem to be an ‘edit’ button under the list (which I’m sure there used to be)

    81. Annabel says:

      Update on my last question. I’ve worked out how to re-order tabs. Simply add more apps than you need, then a ‘more’ button. Click that and you can edit your tabs.

    82. Jay Parry says:

      Hi great tutorial i’ve not seen anything else on the web anywhere near as clear and informative, so thank you. My question is however I can’t seem to get the iframe app to install on my page?

      I have selected ‘Add to my page’ and it seems to work as it should (ie no error messages) however when I go to the page and click on edit page then go to the apps section there is nothing there? Any help would be greatly appreciated.

    83. I’m having a problem when I create the app, not sure where it’s coming from. I can create the app just fine, I can add it to a business page just fine. But when I am in the Application Profile Page and I click on the “Go To App” button, I get a iFrame with a 404:

      http://apps.facebook.com/amyrobbinsabout/

      Any ideas?

    84. @timware: Can you post a example how to put the “suggest to friend” box into iframe pages.

      Thanks :)

    85. Hi there,

      Tx for sharing the knowledge.

      I too have a bit of a problem. I followed your tutorial and at first i saw the famous message:

      This is some HTML content

      But after 1 hour or so i get:

      FBML Error (line 15): illegal tag "body" under "fb:tab-position"

      Any tips or suggestions??

      Kind regards

      • hi ,

        i think i already have found one possible answer. When i switch from profile -> page it seems to show up. But i don’t know what other FB user will see. Going to check it

    86. I created a test app like in the tutorial and everything seemed to work fine but when I added it to my page I’m getting my site’s default “page currently not availible message” appearing in the iframe. I’ve checked the url and also tried the “open frame in a new window” and the site shows up fine. any suggestions?

    87. Oh and another tiny question, is it possible to have dynamic content on the server side php file.

      I tested with

      include_once('../../Connections/connDB.php')

      But now it displays a blank page

    88. Is there a way to restrict by DIV or embedded comment which part of the external page is shown in facebook? For instance, if I wanted to pull our front page which changes periodically, we don’t need our dropdown menus or header, etc. showing. Just the div. Is this possible, or does it pull in the whole html/php page?

      • Hi Maria…
        It sounds like you want to do what is called an iframe on the web – a different animal than FB’s iframes. I tried, but was unsuccessfull in using classic iframes in FB’s iframe.

    89. I am trying to add the iframe application to my page. When I go to http://www.facebook.com/developers and click “Set Up New App” I get taken to an error message “Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card”
      I have setup apps before, and I have already verified my mobile phone…. How can I get around this ?

    90. Margaret says:

      Hi! Great post…one question. I developed my app, and it works great, however when I set my account to secure browsing, the app is no longer visible. Do you know how to fix this so the app is visible during both secure and non-secure sessions?

      • Hi Margaret,

        I just added info about this FB bug to the Troubleshooting section of this article. Hopefully everybody will “vote” for the bug so that it may get a bit more attention from Facebook.

    91. can we iframe .php too?

    92. Is this limited to .html pages, or are you able to use dynamic .php/.asp pages too? I’m having a bit of difficulty getting it to render dynamic content!

      • You can serve up any kind of web page content that your server supports. Facebook is just doing a POST to it and then you can display whatever results you want.

    93. Hi again,

      So i read the FB email i got again and it says

      “Preview your page now and you’ll be given the option to upgrade early. Here’s some of what you’ll be getting:”

      Is there a setting i must check so the new FB page will be visible from today or should i wait until 10th march?

      kind regards

      • You need to activate the new Fan Page format if you want to use the new functionality today. Otherwise your page will switch to the new format automatically on March 10th.

        Bill

    94. Anonymous says:

      Thanks very much for your tutorial, I think a few things have changed since but I could still follow it.
      The part where you finally add your App to your Page is completely illogical but hopefully they will tidy up this soon at FB.

    95. Anonymous says:

      Thanks very much for your tutorial, I think a few things have changed since but I could still follow it.
      The part where you finally add your App to your Page is completely illogical but hopefully they will tidy up this soon at FB.

    96. The content of my iframe tab is not appearing on my page Can someone help me? :(

    97. I can’t seem to access facebook.com’s “apps” page or the link “http://facebook.com/developers” that you referenced in your post. Any help would be greatly appreciated.

    98. I like the info on this page – especially the comment section clears things up to me. I like it when issues in the main article is discussed and perhaps even simplified in the comment section :-) Thank you for a very nice page!

    99. facmo is facebook page cms
      no server you custam page on facebook !
      https://apps.facebook.com/lig_facmo/

    100. Manoj Kadam says:

      Bill Dailey : thank you so muchhhhhhhhhhhhhhhh

    101. Jithinvettiyar says:

      but i don’t see “Set up New App”  button here only create new app. is it both are same?

      • Yes, Facebook has changed that button to “Create New App.” I’ve modified this post to reflect this change. Thanks for the heads up!

    102. very nice i like

    103. Jithinvettiyar says:

      Can u please re post this tutorial with new modification check “Facebook Integration”, Application Profile Page,please re post once again.

    104. Misterdomination says:
    105. Graham G Parker says:

      I have a question that I can’t quite get my head around.

      I would like to create a reveal tab / landing page for non fans .
      I would then want them to click the like button and it would then reveal a coupon that they could print bring into my coffee shops and exchange for a cake or similar.

      I obviously don’t want the coupon page to be visible again to a fan!!

      Is this how it works ????? 

      • Someone has to become a fan to see the coupon. So once they’re a fan, they can see the coupon. So you can’t hide the coupon from both fans AND non-fans. You can’t do what you want to do, in my opinion.

    106. Facebook Developer says:
    107. Facebook Developer says:
    108. Existe una aplicación GRATUITA en facebook llamada MITUCAN que genera automaticamente una web completa dentro de tu página de facebook. Una vez instalada se elige un diseño y se edita la web con un gestor de contenidos muy completo. Podeis echarle un vistazo en la web oficial http://www.mitucan.com
      Espero sirva de ayuda. Saludos

    109. Existe una aplicación GRATUITA en facebook llamada MITUCAN que genera automaticamente una web completa dentro de tu página de facebook. Una vez instalada se elige un diseño y se edita la web con un gestor de contenidos muy completo. Podeis echarle un vistazo en la web oficial http://www.mitucan.com
      Espero sirva de ayuda. Saludos

    110. Thank you so much for this article, I’ve been swearing at my pc for weeks trying to get my lead gen page to work!!! I found your page, did what you said (which by the way you made EXTREMELLY easy) and voila my lead gen page is working!!! Thank you!

    111. tanx is d least I can say. pagemodo is great but i dont have d money and sites dont accept card payment from Nigeria and I need to setup a simple fan page for an author. Ur article helped.

    112. Good job. I like it.

    113. Hiya – please can you update this. The facebook integration link is no longer there. Many thanks, Mark N Hopgood

    114. Really helpful, thank you so much!

    115. Great tutorial, I was able to follow through the entire process in less than an hour.  It seems like the most time consuming part is creating your custom content 520px wide.  Do you know how the iframe is handled in Facebook’s SEO algorithm?

    116. Thank you for this tutorial and in relation to this tutorial I made a tutorial that explains how to use an SSL Shell to validate non-secure Facebook iFrame Apps – http://michaeltunnell.com/blog/11-tutorials/8-how-to-use-an-ssl-shell-to-validate-non-secure-facebook-iframe-apps

      The purpose of my tutorial is to provide a solution for people who have non-secure Facebook Apps to avoid the process of getting SSL Certificates for each of their apps.

    117. cacklinglaughter says:

      Thanks for the tutorial!

      I’ve got my app up, but for some reason, the content doesn’t show up in the content area of the tab on my page. When I go to the actual app page, the content from the iframe does show up.
      When I right click on the content area of the tab, there is not inspect iframe, so it seems like it’s iframe info isn’t even getting over to the page tab. 

      I’ve got both the SSL and none secure links filled in. 

      Thanks for you help!

    118. There is a current Facebook bug, a bug that’s not been squashed for some time, that prevents page admins from viewing their own iframe tabs. I think that may be the issue here.

    119. i have been searching for days and your website is the one that has valuable and relevant information about creating fb pages. thanks so much I`ll keep in touch with more questions when i start doing my page! thanks thanks and thanks many thanks

    120. I just want to put an image in the middle of a new page.

      I created an “app” (?)
      I can find the app as if it were a page (?)I do not have a secure server, if I take out the “s” (http) it’s not shown (page not shown/reload)
      If I put the s doesn’t show up.
      If I leave it blank a message asks me to update that URL

      I only want to add a page with an image…Is there any earthy way?
      Ta

      • Hi Marcel,

        I suggest just adding TabPress to your page: http://on.fb.me/tabpress

        Tim

        • hi tim,

          thanks again. I would like to create an horizontal menu nav on the top of the pages, pretty much like the multi tab template, but i would like to do it myself just because i love messing with web coding, etc…i would like to ask your help please please please. I have been searching for ages and i cannot find anything that teaches how to create a fan page from scratch. Please, what tools did you use to build the multi tab microsite? what do I need to learn in order to get the same result?? thanks again! hope to hear from you!

    121. All that happened to me because I browse facebook under “https”.
      Other people from “http” tell me they can see it, but I cannot trust to set it as a landing page…

      • Right. Currently, those using the Secure Browing (HTTPS) option in Facebook won’t see content on tabs or apps that don’t have a secure/HTTPS URL.
        However, as of this Saturday, October 1, Facebook says *no one* will see content not hosted securely.

    122. Great tutorial! Facebook has made some recent updates and no longer an ‘application profile’ link. Also is there anyway to make an app private so that only certain pages can add it? Thanks!

      • Yes. We’ll be updating this post after Facebook, um, settles down a bit in making changes to the developer app interface! They’ve been changing it a lot lately so we’ll be updating this soon.
        To keep your app private, don’t publish it. Just give out a private URL to the app page.
        -Tim

    123. Hi, I have a facebook welcome page, I only made it a week ago, I want to change the icons down the left hand side, eg, the ‘welcome’ .. I have seen other pages where all the icons are in a similar design to the logo etc.. Can anyone please tell me how I do this? the welcome I have at the moment is the gray star.
      thankyou

    124. Facebook tabs with custom icons are tab “applications”. When you create the app, you can upload the icon for that app. Then you add the app to your page so that it’s included in your navigation.
      If you haven’t created the app yourself, you can’t modify the icon. You can change the text, however.

    125. Awesome… I was going paranoid… After adding my facebook app to the page, I couldn’t see it in the list of apps…

      Thanks for pointing to the right direction… I didn’t know we have to manually add some of the apps

    126. How to add an application to the own page now ! Some month ago I was successfull in adding application to my page but since september 2011 the ADD TO MY  PAGE does not show my own page but only all fanpages I am allowed to administrat. What s new ?

      • I can only surmise that your page already has the app added to it. If such isn’t the case, then perhaps just some Facebook bugginess. But check: Edit Page > Apps … and make sure you haven’t already added the app.

    127. Hi, I’ve finally got ’round to playing with iFrames and my first ‘welcome tab’ is looking quite handsome but I have a small issue. I have a flash banner playing in the frame and it all works fine, but when you scroll down the page the banner seems to obscure the search box on FB’s actual interface. Would you happen to know why it does this? Seems odd that an iFrame could go outside it’s boundaries.

    128. Bryan Gentry says:

      Facebook has changed the format and process for creating page tabs. There is no longer a “Facebook Integration” section. Rather, when you create an app, “Page Tabs” is one option in an expandable list. The change also affects how to get rid of scroll bars, which you cover in another tutorial.

    129. Anonymous says:

      I agree, this article is a bit outdated now. However, it’s all pretty straight-forward and follows the same basic concept. I figured it out by reading my options in my newly created app.

    130. Having a little trouble with iFrame length.  The width is fine and no scroll bars are appearing, but instead of scrolling down through Facebook, a separate scroll bar appears within the iFrame.  You’ll notice that the content is cut off in the iFrame, but you are able to scroll down within it.  Any suggestions

      Here is a sample link:http://www.facebook.com/pages/DCS-Test/168731319885645?sk=app_296884996990186

    131. Make sure you define the height of your main content section. If you’ve done that and it’s still getting cut off and showing scrollbars, you’ll want to add some code to initiate a resize of the iFrame once the page is loaded.

      More info here – (http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/)

    132. Thanks for the post, finally i was able to build my own application using your guidelines. but now i figured out that coding and designing my own app takes too long since I am not a web master. Then I discovered amazing application for building facebook iframe tabs in minutes - https://apps.facebook.com/buildiframetab/