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

    IMPORTANT: Facebook announced that as of February 1, 2012 they are removing App Profile Pages, and the new way is pretty great. Read our article on the App Profile Pages being removed.

    Updated Tutorial: Fall 2011

    Facebook has been very busy updating how things are done, and one of the changes is how you create an iFrame application tab.

    Although the concept is pretty much the same, the interface for creating a Facebook iFrame tab app has changed. This tutorial updates a tutorial we did on this subject earlier this year.

    What is an iFrame application?

    An iFrame application you allows you to embed an external Web page in your custom Facebook Page tab. Your “index” or “canvas” page is actually hosted on a non-Facebook server and is surrounded by Facebook “chrome” (the Facebook elements on the page).

    Because this iframed page isn’t hosted on Facebook, it 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. Or you can add an iFrame-creation application to your page, such as TabPress, freeing you from having to create a Facebook application but more restrictive in that you can’t control the icon that appears next to the tab name in the left navigation.

    Setting up your server

    Facebook’s HTTPS / Secure Hosting Requirement
    The first thing to know is that wherever you host the index page of your Facebook iFrame application, the server will have to be secure, i.e., have an SSL Security Certificate for the domain under which it’s hosted.

    If your index page is not hosted on an SSL secure URL, or you don’t specify a Secure URL in your app settings, your tab will not display for those using Facebook under Secure Browsing. Instead, the user will see:

    Non-secure page Facebook security error HTTPS

    Read our article on Facebook Page Tabs and HTTPS.

    The other assets called into your page (images, JavaScript, CSS, video, etc.) will also have to be hosted under HTTPS. We recommend Amazon S3 hosting for this, and this is also addressed in our HTTPS article.

    Create your iFrame application

    On your secure Web server, create a directory for your iFrame application. In this example, on our server we create a new directory 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 the “mytestapp” 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 the first time you’ve 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 your application an “App Display Name” (the name displayed to users) and a “Namespace” (for use with Open Graph — 8-character minimum; alpha, dashes and underscores only — keep trying until you get a Namespace that hasn’t been used). Then tick the “I agree to Facebook Platform Policies” box; then click the Continue button.

    Facebook iFrame App - New App Dialog

    On the next screen, 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 iFrame tab application up and running.

    The Settings Tab

    This is where you do the basic set up for your app.

    iFrame Page Tab App - Settings Tab

    First, at the top, you’ll see the App ID and App Secret values. Most frequently you’ll be using your App ID to integrate with Facebook.

    Second, notice the “edit icon” below the App Secret. This is the icon that will appear to the left of your tab’s name in your page navigation, so make it eye catching and make the dimensions 16 x 16 pixels. If you don’t create your own icon, your tab will have a generic Facebook-tab icon: Generic Facebook Tab Icon

    Basic info:

    • App Display Name: Make this the same as the original value you provided;
    • App Namespace: Make this the same as the original value you provided;
    • Contact Email: Where you want Facebook to send emails regarding your app;
    • App Domain: just put “mydomain.com” where “mydomain.com” is your secure hosting server;
    • Category: Select a category from the pulldown list.

    Cloud Services
    Since Facebook instituted their HTTPS requirement for all applications, they started offering cloud hosting solutions for those who find setting up a hosting account and secure server too much bother, expense or both. But click the Learn More if you’re interested.

    Select how your app integrates with Facebook

    This is where you select the type of application you’re creating and how it integrates with Facebook.

    Facebook iFrame App - Integration

    An explaination of the Facebook-integration values

    For the purposes of this tutorial, you will select “Page Tab” from the various integration options. It’s the last one listed but once you’ve saved your changes it will be listed first (as in the above example).

    • Page Tab Name: The displayed name of the tab in the Page navigation;
    • Page Tab URL: The unsecure URL (HTTP) of your index page — if the index page is named either “index.html” or “index.php” you can just put the directory with a trailing forward slash (as in my example above); OR you can specify a file name in the directory, eg myapp.html or myapp.php;
    • Secure Page Tab URL: Same as the “Page Tab URL” but with HTTPS instead of HTTP;
    • Page Tab Edit URL: You can create any URL at your domain here and then set up that URL to redirect to the Edit Page for the Facebook tab. This is commonly done using a 301 or 302 Redirect. I’m not covering 301/302 redirects in this tutorial;

    If you intend to use calls to the Facebook JavaScript SDK on your tab – Add “App on Facebook” values

    If you want to use the Facebook JavaScript SDK in your Page Tab — for example, our Share Button for Page Tabs — you will also need to select the “App on Facebook” integration, and add the same URL values as for “Page Tab”:

    Facebook iFrame App - Page Tab and App

    NOTE: The “App on Facebook” URL MUST be a directory, not a specific file:

    http://www.myDomain.com/facebook/mytestapp/

    NOT

    http://www.myDomain.com/facebook/mytestapp/mycanvaspage.php

    So if you need to specify an “App on Facebook” URL, you’ll need to use “index.html”, “index.htm” or “index.php” for the file name of your canvas page.

    The “Canvas Page” value is autofilled by Facebook, with your Namespace value.

    Click “Save Changes” and you’re done!

    Installing your iFrame application on your Fan Page

    UPDATE – December 9, 2011: Facebook is in the process of removing the App Profile Page completely, and has added new ways to add your App to your Fan Page. Read my article on Facebook’s removal of the App Profile Page.

    If your App is only to add a Page Tab to your Facebook Page, and not an App that you want to make available to multiple pages, you can simply navigate to this URL in your browser:

    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

    Replace “YOUR_APP_ID” with your App ID and “YOUR_URL” with your App’s Canvas URL, both of which values are available in your app settings.

    You’ll see a page similar to this the one below when you navigate to that URL:

    Add App to Page

    After selecting the Page from the pulldown menu and clicking “Add Page Tab,” your 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” button in the top-right corner of your page. Then click on “Apps” and find the application that you just added. Click on the “Edit Settings” and you’ll get this popup dialog:

    Edit Facebook App Settings

    • Tab: If it says “Available (add)”, click “add” to add it to your navigation; if it says “Added (remove)”, you’re set;
    • Custom Tab Name: You can override the default tab name by entering a new name in this field, up to 32 characters, and then clicking “Save”.

    Click “Okay” to save your changes.

    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).

    Make sure you have specified an HTTPS / Secure URL for your Page Tab application. If you don’t, your tab won’t load for people using Facebook with Secure Browsing activated.

    If you can’t add your Facebook Page Tab application to a Page

    People often report this problem, and the cause will likely be one of the following:

    • You’ve already added the App to your Page: Click the “Edit page” button at the top-right of your Page; then click “Apps” in the left column of the admin area; look for your Page Tab app; click “Edit settings” and make sure that in the popup dialog it says “Added (remove” and NOT “Available (add)”;
    • You’re not an admin of the Page to which you want to add the App;
    • Under the App’s “Settings > Advanced” area, you have set “Authentication > Sandbox Mode” to “enabled”; this restricts the ability to add the App to a Page to only the App’s developers;
    • It’s a Facebook bug/glitch: Yes, this could be the cause.

    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.

    API Error Code: 191 Popup Dialog

    If you get the “API Error Code: 191″ popup dialog error:
    Facebook API Error Code 191 - Dialog Popup

    when using an embedded Share Button or other feature that requires the Facebook JavaScript SDK, it’s may be because you haven’t specified the “App on Facebook” URLs. See above for details.

    Scroll Bars – Getting rid of them!

    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

    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.

    Additional Resources

    Comments

    1. I have followed all the instructions, however, when I select the “Add to my page” link, the box appers but my page is not listed.  When I test by doing the same with any other app, the page is listed.  Any ideas?  Many thanks

      • Perhaps you’ve already added the app to your Page?

        Click the “Edit page” button at the top right of your page, then, in the admin area, click “Apps” in the left column, and see if your app is there. If it is, then you can’t add it again.
        Or perhaps you’re not an admin of the page you want to add the app to?
        I suspect one of those. Let me know.

        What’s the URL of your app?

      • Perhaps you’ve already added the app to your Page?

        Click the “Edit page” button at the top right of your page, then, in the admin area, click “Apps” in the left column, and see if your app is there. If it is, then you can’t add it again.
        Or perhaps you’re not an admin of the page you want to add the app to?

        I suspect one of the above. Let me know.

        What’s the URL of your app?

    2. Is there any html code to make my app have a “wall”, or place to have posts like the discussion app?

    3. Anonymous says:

      I would like to link from one tabbed app to another – unforunately, if I enter the full link to the tab (//www.facebook.com/pages/Demo/1234567890?sk=app_1234567890) I get the “display forbidden by X-Frame-Options.” error and it doesn’t ‘jump’ to the desired tab.
      If I link using the relative location on my server it displays the content but doesn’t ‘activate’ or jump to the desired tab.
      Any idea how I could acomplish this?

      Many thanks in advance and kepp up the great blog!
      JD

    4. Nice tutorial. It worked really nicely! Can I share this app with another person? If so do I add my to App on Facebook?

      Also when I entered this address raffledog.com in the app domain I recieved this error:

      “You have specified an App Domain but have not specified a Site URL or a Mobile Web URLraffledog.com must be derived from your Site URL or your Mobile Web URL.”

      But then when I put http://raffledog.com it works fine? Any ideas?

    5. I get this error? invalid credentials

    6. I’ll need a little more detail. Thanks.

    7. Thanks! This whole process is a pain but your page really helped me get through it as painlessly as possible :)

    8. An excellent step-by-step tutorial. I must admit, though that I’m not sure why not to simply use existing apps – say Static iFrame, or TabSite, or whatever. Other than than their tiny logo at the bottom, is there a great advantage in having your own iFrame app?

      [Promo removed]

      • The reason to build your own iFrame app is CONTROL.

        iFrame Page Tab apps like TabPress, etc., don’t allow PHP code, so that’s one limit.
        Also, if you build your own app you can control what icon appears next to it in the left-side navigation.

        • I appreciate the control issue, and I must admit I didn’t know that Facebook iFrame apps don’t allow PHP. As for the icon – I work quite a bit with Facebook users, and from what I can tell, most of them don’t (unfortunately) see or care about the icon. 

          • We work for businesses primarily and, believe me, they care — and they SHOULD care — about that icon. It’s part of their visual branding over which they have control, or should have control.

    9. Thanks for a great tutorial! Followed it and it worked perfectly.

      Question: How can I make my iframe-page to be the splash page visitors see?

    10. Chet Pelletier says:

      Thx for your help and we got through the whole process, but the page does not render in Facebook. The Tab is available and appears fine, but will not display the actual iFrame ( html page we tilt on our server)

      the actual page is:
      http://www.visaomd.com/VisaoMD/Facebook/Cleanse/CleanseMe.htm

    11. I think the problem is that you don’t have an SSL Security Certificate for the visaomd.com domain.
      Facebook recently changed so that tabs that don’t have a secure URL are not rendered.
      Read this article on HTTPS and Facebook and this article about hosts that offer cheap secure hosting.

    12. Chet Pelletier says:

      Ok thx I assume then, once we set that URL up on the https side of the server we should be good to go…

    13. This tutorial rocks!! I’ve been trying to figure out how to point my facebook page to my wordpress templates. I’m hosting my domain with a ssl certificate and installing wordpress into a subdirectory.
      It works. Ive bought a couple of wso’s at the warrior forum and either they were out of date on this app procedure or  you have to be able to code with css. Many thanks again, it works!

    14. Paulo Vasco Silva says:

      Thanks for your tutorial Tim. Very good and helpfull.

      My apps rock’s very hell. My question is: i dont want the scroll bars… my html has a 980px height.

      Can i eliminate the vertical scroll bars?

      Nice work. Thanks
      Paulo

    15. Justin Kui says:

      I’m trying to get this page up http://www.eyelife.com.au/facebook.html
      It doesn’t allow URLs ending with .html…..

      What should I do?

      • If you’re trying to have that page be the index page for an iFrame tab, you have to make sure it’s hosted on a server with an SSL Security Certificate so that you can provide a Secure URL in the app settings (HTTPS).
        Try changing the name of the index.html to index.php.

        Tim

    16. I am having a problem with error 405.  I have both a secure and unsecure area setup and have tried .htm .html .aspx extensions.  All of which come up in the browser.  I don’t have php available.  Is it required?  I am running on a windows 2003 server.  The error page is coming up on the unsecure url. Any ideas or suggestions?

      • I believe that Error 405 means the server was not expecting a POST to be made to the page (which Facebook does when loading a iFrame app), so it has to be on the server side. The workaround has been to use .aspx since most servers allow POSTs to those page, but it’s possible that your server is not set up that way.

    17. I have one little issue. I added my app to my page,  and I can see the tab there on the left on the admin version of my page. But the tab isn’t there for the regular version of the page. help? http://www.facebook.com/profile.php?id=100000258257422 (admin screenshot is attached)

    18. Thank you for the tutorial.

      I have things pretty well set up, but I’m wondering if there is a way to point users to a specific page within my application. For instance, if a user creates a photo collection in my app and wants to share it, is there a way they can post a specific link on their wall (like http://apps.facebook.com/photo_collection/?list_id=12345)?

      I’ve searched high and low but I can’t figure out if this is possible.

      Thank you again.

    19. tahoehomelink says:

      I am not getting an edit my setting box on my app. The app is working on my page but I cannot get to load on another page – no setting set for this app??
      Any one help

    20. Fatal error: require_once() [function.require]: Failed opening required ‘public/index.php’ (include_path=’.:/usr/local/php5/lib/php’) in /home/content/56/8110456/html/TahoeHomeLink/facebook/index.php on line 1I am getting this fatal error and it says there is no setting box for my app. I can view my app on a page but I cannot open it on any other pages. Thanks for any input

      • When you code your index page for a Facebook app, it may be making calls to scripts that don’t work outside the Facebook context.
        If you can see your tab when you’re on your Facebook page, then that’s success, right?

    21. Hi just a quick question. I’ve setup my app and added it to my chosen page not problem but nothing is visible on the canvas page https://apps.facebook.com/myapp … not sure why?

      • Is the canvas page viewable through the tab on your fan page? Sometimes app index pages don’t show up when viewed alone instead of via the fan page tab.
        I assume your index page (canvas page) is hosted on a server with an SSL security certificate and you specified the Secure URL in the app settings?

        • Yep, viewable through the tab on the relevant fan page but not  https://apps.facebook.com/myap.. Hosting has SSL certification and all secure URL’s have been specified.  

    22. By default, the icon for Welcome tab is a “Star” which I don’t want. I need an iframe tab where I can put in my own icon.  The fanpage to this tab is not a mere jpeg but has numerous weblinks.

      I’m not sure but does this tutorial addresses what I need? Does this means that if I created an app, the app is automatically an iframe app? If I recall correctly, we use to be able to select iframe app whenever we create an app ourselves.

    23. If any of your PHP or other scripts in the index page are dependent on Facebook, then that may cause the tab to not be viewable when accessed outside of the Facebook chrome. But, hey, if your tab works then it sounds like you’re good.

    24. Tim, This tutorial is *precisely* about creating your own iFrame page tab, with control over the icon that appears.
      The “star” icon indicates you’re using the Static HTML iFrame app. This app, like TabPress, has its own icon which you can’t change.
      To have your own icon, you have to create your own app.

    25. Tim, Just read this post carefully. It’s all there. Thanks.

    26. Zaid Daghestani says:

      Hey
      Great tutorial.
      I’m just running into an issue using S3. It returns MethodNotAllowed apparently because Facebook uses a Post request to get the page. Do you have a workaround for this? Should I use a redirect on my own domain?
      Help appreciated.
      -Z

      • You can host all the assets for a Facebook iframe tab on Amazon S3 … EXCEPT the index page. You’ll have to either use a free custom iFrame page-tab creator app like TabPress or get your index page hosted on a secure server.

        • Zaid Daghestani says:

          That’s too bad. Any idea why Facebook uses a POST request? Seems like a strange way to get a page.
          Thanks for the help btw.

          • Jason Batchelor says:

            My guess would be that they use POST to prevent having to pass data via the Querystring. I think there was mention in Tim’s article to Facebook sending data to the remote server, and POST would be the only way you could do so securely (which also makes the SSL requirement make more sense, as well).

        • damenchoy says:

          Hi Tim,

          You mentioned in your article: “We recommend Amazon S3 hosting for this, and this is also addressed in our HTTPS article http://www.hyperarts.com/blog/how-to-prepare-for-facebooks-secure-hosting-https-requirement/”

          I am trying to look into the details of using Amazon S3 to host secure objects like images, etc but I could not find any clue in the article you referred.

          Could you advise?

          Thanks

          D

    27. Can you add an iframe app like this to a profile as well or is relegated to pages?

    28. Hi I am trying to create iframe page for a client. I have used dreamweaver to create a html and uploaded this html to a secure sevrer and pasted the url for the page into the iframe page. However when it loads none of my images appear, any ideas?

      Thanks

      Jody

      • Are your images hosted securely? Are they called with https:// and NOT http://?
        Do you see the image when you access it directly in your browser?

        • Hi Tim, thanks for SPEEDY response. They do appear when you view it in a separate browser, but the images are on the server in a separate folder called ‘images’ as this is how it was saved when creating in dreamweaver. Do I have to get code of the images themselves and paste that into the facebook iframe window too? ________________________________________

          • Send a link to your tab and I can better assist.

            Make sure the URLs to your images, on the index page of your page tab, are like this:
            <img src=”https:// …… />

            NOT

            <img src=”http:// ….. />

    29. Emeric Jego says:

      Good tutorial … I used to make my app e few weeks ago when it was not ssl needed. As I get a ssl certificate today i try to add my landing page but as i had it to my page … nothing in my page, the app is well added but if i click on parameters it says “nothing to configure for this app”. I recreate the app … the same. 
      Any ideas ? something change since ssl needed ? (i had removed the app since i got the error page which said ssl is needed.

    30. Thanks.nice tutorial. Actually i was trying to create a facebook page. I followed the same steps and it shows the contents from my web page using iframe when i use the following url:
      http://apps.facebook.com/pixelnpixel/ but how to get contents of this i frame to be appeared in a web page for example

      http://www.facebook.com/apps/application.php?id=289553827742270.

      Thanks

    31. “ErrorYou have specified an App Domain but have not specified a Site URL or a Mobile Web URL
      poojim.com must be derived from your Site URL or your Mobile Web URL.”

    32. hi i have a question
      infact i have created application added to my created page. the problem is that i can see this tab when i am loged in and i can’t see when loged out.

    33. Hi TimHere is the ftp link working online http://oliver-marketing.com/DCL2/SteljesFacebookPage/facebook_home.htmlbut we are unable to view this page once the source code has been stripped and put into facebook….?here is how it looks!http://www.facebook.com/Steljes?sk=app_190322544333196thanks for your time and help!

    34. I’m not sure what your issue is. You might start by reading our tutorial on preparing for Facebook’s HTTPS Secure Browsing requirements.

    35. Please read this tutorial more carefully.

      • I got it already. I realized that I made no choice in
        “Selecting how your app integrates with Facebook”
        It’s really confusing that those list of options are really options…
        Anyway I went back to Disqus.
        Thanks @timware:disqus 

    36. Bianca Cloutier says:

      Hi Tim! Great tutorial – I’ve created a few apps and find that some users are able to view the campus while others are not. I can’t seem to find a consistent pattern amongst those who are able to view it and those who are not (other than the fact that the users experience the same visibility pattern on the different apps on different pages). For example, user A can always see the canvas on all pages that have the app active while user B can never see the canvas no matter what page or app i’ve set up for them. Any thoughts?

    37. It sounds like a Secure Browsing / HTTPS issue. Facebook changed how it handles page tabs that aren’t hosted on a secure SSL / HTTPS server. If someone on Facebook has opted for “Secure Browsing” in their Account Settings, they won’t be able to view any page tabs that don’t provide a secure HTTPS URL.
      Read my article on Facebook and Secure Browsing Under HTTPS.

    38. Hello Tim,
      I actually made everything  you show. Secure host (SLL), check URls, I made this app more than 4 times. And appears this message http://apps.facebook.com/reglafan/ , if you see it’s not a especify erro. Can you help me!

    39. Hi Tim…
      I actually follow everything you show here. But It’s not worked!
      I have a website : https://boost-metabolism.org and I want that website works like : http://quickweightlose.byethost10.com/. Hint : open the site and click the button on the main page and see how it works.

      On my site,if I click the button that redirect to https://boost-metabolism.org/facebook/ it’s only shows a blank page. What wrong Tim? The problem is on my app or on my script?

      Here’s the script I use as index.php

      • If you’re trying to view your Facebook iFrame page tab directly, outside of the Facebook environment, then you won’t usually have success if you’ve set up conditionals based on Facebook parameters. Does your iFrame tab show the content as you intended it?
        I tested the quickweightlose.byethost10.com, and it doesn’t seem to work under Secure Browsing / HTTPS. You *must* host your iFrame tab index page on a secure server.

        • Hi Tim…

          My site has been work under secure browsing. I’ve been installing SSL certificate on it.

          Now,what should I do now in order to my website can works like  quickweightlose.byethost10.com? What should I changed on my app and my php script?? I’m very confused now! Thanks.

          • In your tab-application settings, you need to add the URL of the page you want for the index page (the page embedded in the Facebook iFrame). The landing tab should be named index.php or index.asp. It depends on your server.

            You should ask your hosting provider if Facebook can make POST requests to your page, because that is necessary for it to work.

            I don’t think your SSL is set up properly. When I can’t access the secure version of your URL: https://quickweightlose.byethost10.com

            I think your problem may be due to what we discuss under “Error messages from your server….” under Troubleshooting:

            “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. I wanted to mention this now since it caused issues for some people.”

    40. Geffrey Barendregt says:

      Dear Tim,

      Thank you so much for the tutorial. It worked perfectly fine for me. However I have a more in-depth question, I was hoping you could answer it for me.

      I have created a default tab named “Become a fan!” this should be the tab non-fans see as the default page. Now, i want to create a second tab that is only visible for fans that should become either:1. The page they see as soon as they liked the page.
      2. The default tab for members if option 1 isnt possible.

      Basicly you get a special code once you become a fan. For non members they see “Become a fan and receive X” once theyre a fan they see a new splash with their gift. Do you know how to create this? I would be very thankful.

      Thanks in advance,

      Geffrey 

    41. Great tutorial! Do you have any tips, suggestions or tutorials for adding video?

    42. You just embed video on your custom tab the way you would on any Web page. Just grab Vimeo’s or YouTube’s embed code for the video and paste it on your tab’s index page.

    43. I am having an issue adding the app to my page. I go to the app and everything seems all good (test app page – http://apps.facebook.com/welcometrackingdog/) but I do not see the sidebar on the left to add it to  “Now click the Add to My Page link on the left.” Maybe I am missing something but it seems very weird. I went through your list of why this might happen but everything still seems right on my end. Have you had any Facebook bug errors like this before? Or am I just missing something? 
      Appreciate all your help!

    44. Tim:
      I followed the tutorial and created:  https://apps.facebook.com/ecoesc_iframe/   however, as you can see when you go there, I don’t have the box with the link “Add to my Page”  The page displays properly but I can’t get it on my Page.  I’ve checked the “Apps” and this app has not already been approved.  Any ideas?

    45. Beth, Go to your Facebook Developer page, and click on
      Settings > Basic

      for your app.

      In the left column, under Related Links, you’ll see, “View App Profile Page”:

      Click on that and it’ll take you to the URL where you can add the app. to your page.
      As you probably note, Facebook has changed the way they do this.

    46. Hmm. Second comment about this today! I’ll amend this post:

      Go to your Facebook Developer page, and click on
      Settings > Basic

      for your app.

      In the left column, under Related Links, you’ll see, “View App Profile Page”:

      Click on that and it’ll take you to the URL where you can add the app. to your page.
      As you probably note, Facebook has changed the way they do this.

    47. Beth, Go to your Facebook Developer page, and click on

      Settings > Basic

      for your app.

      In the left column, under Related Links, you’ll see, “View App Profile Page” (see below image).

      Click on that and it’ll take you to the URL where you can add the app. to your page.

      As you probably note, Facebook has changed the way they do this.

    48. Hi Tim,
      Hello & Good Day.

      I created an application, but this application is working properly in my own account, but when i sae this application from other account it’s not working. i put the app id and app secret also in the facebook.php. I will be very thankful if u solve me this problem.

      With regards
      Lalgamba

    49. Anonymous says:

      Im having such problems with this. Firstly just adding the app I make to my page. I am an admin and sandbox is disabled. I only get the option to add to my page favorites. As a workaround, I had to make my personal profile an admin of my page. Then log into my page to access my apps on the developer site, and add it to my page favs. Then log out, log into my personal profile, and then go to my page which is shown on the left.
      Once there, click on the app shown in favorites, THEN add to my page is available, and I can also remove from favorites…..grrrrr.

      Any ideas?

    50. Hi, great article but i was struggling for ages with a HTTP 405 error. My server was configured correctly allowing GET, POST, etc (I am running a Windows 2000 server with PHP… i know old but it works;-)). But everytime i tried to call the page it threw the 405 error.
       
      I eventutally worked it out, you have to call the page with a full URL in all your setting. So everywhere you mention in the article above:
       
      http:// http://www.myDomain.com/facebook/mynewtab/
       
      Or
       
      https://www.myDomain.com/facebook/mynewtab/
       
      You infact need to reference it in its entirety as:
       
      http://www.myDomain.com/facebook/mynewtab/index.php?
       
      Or
       
      https://www.myDomain.com/facebook/mynewtab/index.php?
       
      YES, you need to add the ? at the end to validate in the Facebook form when you save it.
       
      So not sure if this is a bug at Facebook’s side or not as it makes it look like it’s the server throwing an error when it just seems to be the way Facebook is POST’ing the data through to the URL within the iFrame:-)
       
      Hope this helps.

    51. Thanks for the info, David.

    52. Facebook is changed the way you add Facebook application to Facebook page

      Please checkout this article
      http://blog.onlinebizsoft.com/recent-facebook-application-profile-changes-add-facebook-application-to-page/

    53. Thank you for the tutorial, I am having issues with this error:

      =====
       In order to accept POST request originating from this domain, the admin must add this domain to the whitelist.
      =====

      Based on your article this is because Facebook is doing a POST to my page which my server is refusing.  Where would I explicitly allow Facebook (whitelist) to pass these post requests?

      I am using nginx as webserver.

      Thanks.

    54. Jose, I think you need to call your host’s support and explain what you’re doing and what you need from your server.

    55. They changed the “View App profile page” :(, anyone no what to do now, to add my selfmade app tp my fanage :((((

    56. This post was like WONDERFUL! Man, you save my life! Just one little thing:

      Facebook Dev isn’t generating the Profile Page of the App. You may access it with the link:
      http://www.facebook.com/add.php?api_key=APP-ID&pages=1
      and activate the app.

      (more: http://stackoverflow.com/questions/8335987/unable-to-view-app-profile-page-the-page-you-requested-was-not-found)

    57. Hey, Great tutorial.. thanks for the insight.. 
      I wanted to know if you knew how to do this..
      http://www.facebook.com/jordanbelfort?sk=app_4949752878 

      if you go here.. 
      do you know how to embed a video like he did?
      do you know how to embed the form with name and email like he did?

      and at the bottom underneath Connections.. 
      do you know how to add those buttons and make each of them forward to different URL’s like he did?

      Thanks so much
      very appreciative!!

    58. Well, that tab you mention is using the deprecated and soon-to-be-disabled Static FBML app. You should create a custom tab as an iFrame app, and there are plenty of tutorials on how to do that on this blog. Just use the navigation at the top, under “Facebook” and select “Facebook Programming”.

      • Hi Tim.  I want to do the same thing. I have a working iframe tab with a donate button that should redirect the user to paypal (), but it doesn’t work. I guess you can’t “post” out of an iframe. Anyway, what tutorial are you referring to? Can you give us the exact tutorial?

    59. Hello, i have an app created and a tab too. Both point to http://www.goltratec.com/facebook/iframe/index.php for testin it but.
      How can i add this tab to one page? i can access to app url but i dont have any button for install.
      Can you help me?

    60. Ive got problem cuz i did all the same as you show and on facebook get msg
      “403 Forbidden
      You don’t have permission to access this document.”
      or
      “400 Bad Request
      Your browser sent a request that this server could not understand.”
      depends on what values i set.

      here is my:
      site url : http://www.cactusek.home.pl/facebook/index.html
      Canvas URL:http://www.cactusek.home.pl/facebook/
      Page Tab URL:http://www.cactusek.home.pl/facebook/index.html
      and my domain :www.cactusek.home.pl

      Can any1 help me please :))

      • It looks like you’ve made a coding syntax error somewhere in your code. Doublecheck to make sure your code is correct and is plain text ASCII, with no “fancy” quotes or other rich-text characters.

        • i did multiplycheck and always whatever i try it doesnt work . There is no fancy coding at all, it is example code from this tutorial – just for try. I also tried on some other server but there were problem with security ssl. Still id like to run it on myown server:/.
          It cant be syntax error cuz i just paste adress link from browser window. Anyway i was readin this over and over again …:(

    61. plz tell me how can we add multiple tabs . using this single app.. waiting for your reply..

    62. You can only add an app to your fan page once.

    63. I made the app, I made the htmlpage, I have the facebook fan page.

      Now, something very simple you missed?
      How do I get the app to show on my facebook fan page??? I’m tearing my hear.

    64. sangeetha bhatta says:

      Hello
      I have created a page tab app whose URL in the settings is .com/tab.php
      Now I attached this app to many of my pages and got a tab in each page.

      Now the problem is in tab.php code I want to know the current pageID or the browser URL EVEN BEFORE THE USER AUTHENTICATES MY APP so to choose which content to display. 

      I have tried all possible javascript and php ways by looking at $_SERVER, top.location.href etc but all I get is this http://static.ak.facebook.com/platform/page_proxy.php?v=4 

      How can I get the current pageID or browser URL. Please note, this I want to know BEFORE the user authenticates my app. After user authentication I can get it using Graph API or signed request. But how to get it before?

    65. sangeetha bhatta says:

      Sorry please disregard my earlier comment. Thanks. I am getting signed request parameter. There was a setup glitch.

    66. What do you mean by “browser URL” and what “pageID”? Are the user variables you wish to obtain before the user authenticates your app? I’m not sure what info you’re looking at, but you may not be able to get that info without showing the user the allow prompt which advises the user about what info the user is allowing the app to access.

    67. Thanks for this great tutorial. I have followed each steps but when I enter the url to install the app I have the following error message:
      API Error Code: 191
      API Error Description: The specified URL is not owned by the application
      Error Message: redirect_uri is not owned by the application.

    68. Hi Tim. Great info. I’m pretty sure last week I found a link  here that allows you to enter your FaceBook apps info & ad it to your Apps so you can make it a live page people can see while FaceBook is rolling out the option. You have so much conten here I can’t find it again. do you happen to know of the link I’m asking about? Thanks in advance. Guy

    69. Bianca Cloutier says:

      I love your resources! I have a quick question – if we had land page apps up and running before the change happened in December, do we need to make any changes before Feb 1st or will these continue to run going forward on the fanpages they’ve been added to? Thanks!

      • The removal of App Profile Pages won’t have any effect on existing implementations of the App. It just affects how users can add your app to their pages after February 1.

        • Bianca Cloutier says:

          Very cool! Thanks. And last question, I was wondering if you knew roughly the percentage of users out there that have their privacy settings set so that they would be unable to view an app landing page? This is the only challenge I’ve run into with the apps so I just want to be mindful of the number of folks this may impact. :)

          • If you mean how many users are opting for “secure browsing” and thus your tabs can’t be viewed by them, then I’d expect a pretty big number, although I don’t know the exact number or even a range.
            But not hosting your iFrame content securely will definitely cost you in views of your tab, so I strongly recommend you do secure hosting.

            • Bianca Cloutier says:

              Hmm… we’re using HTTPS in terms of URL for the canvas. Does that count as “secure browsing” or is there something else we need to do?

            • If HTTPS works on your canvas page / index page URL, then you’re good with secure browsing.

    70. hey tim, i am completely lost! i’ve made the tab/app in the developers area, and i’ve even now had to make a “page” for this tab (how silly is that?), and now i can’t find the “add this app to my page” link that used to be on these pages. they have made this process so convoluted for simple welcome tabs. 

    71. Hi,
      Thanks for the tutorial.
      Quick question I am using a stand alone business page that is not linked to a personal Facebook profile. As such I am having problems using TabPress – it will not load when I click on it in the page editing area – is this because being a Business profile and page it is limited?

      Thanks
      Danielle

      • Business Pages are much more limited in what you can do than Pages linked to Personal Profiles.
        For one thing, business accounts can’t add custom tabs or other apps. From the Facebook Help Center:
        “You will not, however, be able to view the profile information of any other users on the site, or add any other applications to your account. Your account will not be visible in search and other users on the site will not be able to find you and add you as a friend.”

    72. Please please please help. Facebook appear to of changed the backend again. I’m trying to create my own iFrames app and not use pre-existing static html iframes apps (as they have limited functionality). I’m trying to create multiple tabs for my facebook page. I’ve followed every example on the internet and none seem to resemble what i’m seeing. You’re posts are super informative but i just can’t seem to work out how to create multiple iframes tabs on my page. Any idea on how to do this? or wether we have to wait until feb when they change it all again? so confused… please help :)

      • Apps like “Static HTML” and TabPress can be used to add a custom Page Tab to your Page.
        If you create your own Facebook App for a Page Tab, then you can create as many of them as you wish. But you can only add an app to a Page once.
        To create “multiple iframes tabs” you’d have to create a separate app for each tab.

    73. Hi, just two Question:
      On the part “Setting up your server” you create the folder “mytestapp” and later on you link in “Select how your app integrates with Facebook” you link to “mynewtab”. are they the same?

      And what file does facebook take on that folder i link to on “Select how your app integrates with Facebook”? is it allways the index.htm if i have more than 1 .html file?

      Thanks for your help

    74. Hi Markus. Thanks for pointing out that incosistency in my post! “mynewtab” should have been “mytestapp”. I’ve corrected this error.
      As for the Page Tab URL, if it’s called “index.html” or “index.php” you can just have the directory with a trailing forward slash, as in my example. Or you can specify a specific file name, eg app1.html OR app1.php, app2.html…. etc.
      I have also clarified this in the article. Thanks again for the heads up!

    75. I always used your tutorials but this time I was, and to some extend still am, lost.  I had a basic iFrame site that I set up app for.  Then I added it to my test page.  Now, when it was done and tested, wanted to add it to the “real” page though that was a problem.  I could not figure out how.  Finally I did so by following this 
      http://developers.facebook.com/docs/appsonfacebook/pagetabs/ and pasting some needed info into the URL (how weird to add an app to a page this way??).  So, if somebody is spending hours to figure this out, it may help.
      My question is: will I have to still update my app/iFrame page and migrate it to the new system? 

    76. Hi Tim, would really appreciate if you answered my question.

      I’ve tried lots of the big iframe-apps (tabpress for instance) on facebook, but no matter which one I use CSS-codes doesn’t work, which is really frustrating. HTML and javascript works, but not CSS. Do you think that if I made the effort to create my own ifram application, which I imagine to be kind of a big job, CSS would work? 

      • If your CSS isn’t working in TabPress or other iFrame Page Tab apps, then it’s your CSS that’s the problem, not those apps. You should double check your CSS syntax and make sure it’s error free.

        • The CSS works fine when I save it as an htm-file in notepad and open it in a browser. Also, some of the CSS is produced by programs, for instance slideshows, so it is supposed to be working.. 

    77. Once you’ve added the Page Tab App to your Page, it’s done. You only need to migrate your App Profile Page to a Facebook Page if you feel you need a Page for your App.
      As this article says, for Page Tab Apps that are added to only one Page, you don’t need and probably don’t want a Page for the App.

    78. Tim,
      Facebook shows the following Dialog:

      This application does not support integration with your profile.

      Any answer?

    79. Thanks for the tutorial. Very clear explanation. Right now I am using fan page apps, but they are way too expensive and have ridiculous pricing. I think I will start making the fan pages by my hand now.

    80. Great.. this is very helpful as I search around for how to install the page tab for long time & just realised that FB has to remove the App profile page… 

    81. I’ve created a test html page “test” on a secure server. 
      (https://www.0808project.com/bettySport/facebook/tab/index.html)

      Created the facebook app, added it to my page, and when you click the tab it doesn’t load. If I go to edit my page and go to the app and click on “go to app” it loads fine. I’ve built many apps before and never had this problem. Any ideas would be greatly appreciated.ThanksWesley

    82. Christopher Hobson says:

      Hey Tim,

      Great tutorial. Are you aware of FB changing the width settings for apps? In the setting it states a fixed width of 760px. My app only takes up 700px but it has created an iframe about 525px wide with scroll bars. Tried changing to fluid width but no change…

      Appreciate the help,
      Thanks 

    83. Christopher Hobson says:

      I have just seen the answer as I posted about the 520 max width! Sorry about that. doi! Why do they state 760px as a fixed width in the app settings?

    84. Is your app a Page Tab or a Canvas App? If it’s a Page Tab, it shouldn’t exceed 520px in width. If it’s a Canvas App (with a URL like: apps.facebook.com/your-app-name), then you have a max of 760px in width.
      If your App is a Page Tab, you can also ignore: Settings > Advanced > Canvas Settings.
      Those settings are only if you’re developin a Canvas App.

    85. Anonymous says:

      when ever I ty to set up a server for my app, I get the error messages ”
      Error
      You have specified an App Domain but have not specified a Site URL or a Mobile Web ”

      Where do I set up a Site URL?

    86. I’m doing my first facebook app-what I’m trying to do is a landing page for a business where you will see the app first then can click through to the wall. I used your instructions (which are the best I found on the internet) but I can’t get app to show up on the page when it’s loaded. I still only see the wall and the app shows up on the left below the profile pic. How do you get it to be the landing page?

    87. You can ONLY set a default landing tab for non-fans. An admin of the Page or anyone who’s already Liked your Page, will default to the Wall, and this can’t be changed.
      So in the “Edit Page” area you can set the default tab, but only for non-fans.

      • Chloe Gray says:

        Hi Tim,

        I have a question regarding your comment: if it´s only possible to set a default landing tab for non-fans only, then why create a custom iFrame app instead of just using the simpler Static HTML iFrame app provided by Facebook? I´m not clear on what the benefits of this method are. Is there really no way at all to send fans to a landing page other than your wall?

    88. Hi Tim, a nother question from me to your GREAT tutorial :)

      is it possible to preset all of this and put it on invisible?
      so i can put it visible on a later date?

      big thanks!

      • Just add the App to your Page. In: Edit Page > Apps > Your App] > Edit Settings

        If, next to “Tab:”, it has “Added (remove)”, just click “remove”.

        When you’re ready to show to tab just do the above, but click “Add”.

    89. Anonymous says:

      Hi,

      I’m getting this message in a red box when I try  to save the ‘Basic’ page:

      “You have specified an App Domain but have not specified a Site URL or a Mobile Web URLwww.thesatmathprep.com must be derived from your Site URL or your Mobile Web URL.”

      In Basic Info then App Domain, I have typed in ‘thesatmathprep.com’ (the address of my website).

      Can somebody inform me of what I am doing wrong, please?

      • Under “Select how your app integrates with Facebook” section, you have to click the bar which says “Website” with the checkmark next to it.  That will make the bar fold open and you’ll see “Site URL”. Then enter your full site URL there.  It took me a little while to find it, too!

    90. “https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL” Where or what the heck is the “YOUR_URL”?

    91. Your URL doesn’t go to a tab.

    92. Thank you very much! This is one of the best tutorials I have read BY FAR! :) everything went down smoothly. But I couldn’t figure out how to add multiple tabs on my funpage.. Thx once more!

    93. Jodine Hansen says:

      Hi there,
      Is is possible, when displaying a webpage in a tab, to add at ‘click here to open in a new window’ button?
      Thanks.

    94. This is so brilliant and helpful. Had problems adding app to page and this worked! Thank you for sharing.

    95. Hello Tim!
      I want to ask if it possible to re-direct users to my funpage-wall when someone is on my landing tab and press the like button. I am asking because when users like my page, the button disappears but tab does not change! Any ideas?
      PS: Very helpfull article!

    96. hello everybody I need some help!
      I am trying to set up  a new facebook app, and I am using this to add the app to the fan page ”  https://www.facebook.com/dialog/pagetab?app_id=310933605605212=http://files.cusheconnection.com/rf_fb_welcome/rf_app.html ”  I do every single step as mentioned beyond. but I am getting a error message: An error occurred. Please try again later.

      Also I tryed with one: https://admine.eu/addapp.html
      But nothing happens, same problem.

      I know the page is working because i loaded in the browser 

      Any help please?

    97. Your URL should have this format:
      https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
      Your URL omits the “&next” after the App ID and before the URL.

      But your URL apparently isn’t the same subdomain as the index/canvas page for your app and it has to be for this to work.
      Try using: http://www.facebook.com instead. I tested your URL with the above changes and it works fine.

      • Thank you so much Mr Ware! Now it is working! :)
        But I got another problem! Hope you can help me with this one too
        I have created some others facebook app and they work fine, I always use the same codes, same process and all the apps work in any browser, but with this one I cant make it to work with Chrome, its works in Firefox, safari but not in Chrome.
        Any idea what could be the problem with?

        And again thank you for your time and your help
        btw Greetings from El Salvador

    98. I would like to develop a vote entry application using PHP but I am just learning it so actually I am completely lost. I want to build an application like this 
      http://www.facebook.com/Dr.Luis.Bitar?sk=app_134514206651551
      Thanks in advance

    99. Good question, Chloe!

      Facebook understands that the purpose of your Welcome tab is to — or *should* be — to entice users to Like your page. Once that is accomplished, then Facebook prefers that the default be the Wall as that’s where everything really “happens” … all the engagement etc.
      So Facebook allows you to set your Welcome tab as the default only for those who’ve not yet Liked your page.
      You refer to the “Static HTML” app, but you must be referring to “Static FBML”, Facebook’s custom-tab app that can no longer be added to pages. The Static HTML app isn’t provided by Facebook.
      Whether or not you use an app like Static HTML to create your Welcome tab, or just code it yourself, you still can make that tab the default for those who’ve not yet Liked your Page.

    100. Hello,

      This Tutorial helped me so much!
      I am however having one issue. My app will only work if the page tab url and secure page tab url are set to /index.php. My app will not work with other .php or .html files like for example, /enews.php, /giveaway.php, etc.

      I have checked my server and all of these files exist on my web server. Any Ideas?

      Thanks,Gator

    101. The “App on Facebook” URL can only be the index page of a directory, either just the directory with a trailing forward slash, or index.php, index.html, index.htm, index.asp, etc.
      The Page Tab URL can be a specific web page such as your examples (enews.php, etc.).

    102. Renata Fortes says:

      Hi, this is a great tutorial. I still can’t see my tab when the user doesn’t like my page. I haven’t developed any fan gate i just want to both who likes and who doesn’t see the same page but it is not working, this is my page: https://www.facebook.com/?ref=logo#!/WeAreBuiltToLast?sk=app_242901325795370 thanks

    103. Ian Simmons says:

      Very good tutorial! I was confused by the YOUR_URL part at first, trying to figure out what url it wanted but once I got it figured out it wanted the url of the app on my server everything works great. Moving on to the article on the reveal page setup.

      Thank you very much!

    104. Great tutorial…

      Q. I have currently just set up a welcome tab and have set the tab to Default Landing Tab in setting and yes we are just waiting on the SSL. But what I can not workout is why the default page is not coming up when I go to the URL to this page all I get is the sign in page of facebook and the welcome tab is not the default page…

      Have a missed thing here?

      Link:
      https://www.facebook.com/folio1Communications

    105. I followed the very clear tutorial step by step, however, when I go to the app it just displays Incorrect function.  http://www.facebook.com/ClassroomEssentialsOnline/app_191332630971691 I have tried enabling and disabling different parts of the app setup with no prevail.  First time developing a FB app and I’m not sure how to fix this issue.  Advice? 

    106. Nikki Valens says:

      I’ve followed the above steps and tested the url on its own but when it is loaded in the page tab I get this:

      Method Not AllowedThe requested method GET is not allowed for the URL /facebook/welcome.html.Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.What does this mean and how can I get my tab to work?

    107. Chris, Just search this blog, or look under the “Popular Posts” section in the right column here, or, as I said, look under “Facebook > Facebook Programming” in the navigation on this blog. Thanks.

      • Thanks Tim. I search the blog, but it looks like there’s no solution.  Doing something like this, 
        http://www.facebook.com/jordanbelfort?sk=app_4949752878, can’t be done anymore, I guess.  I did find this in paypal’s documentation: “To use POST in iframes, please enable the migration POST for Canvas (Beta) in your application settings,” but that option no longer seems available.  You just can’t use a form inside an iframe, at least on facebook :(

    108. You should still be able to use forms in an iFrame. I’m not sure what you’re talking about. I did test the page URL you provided and it worked fine.

    109. Wow — this tutorial is truly an asset! After the “Add to page” function was removed from applications, it took me hours to get the app settings and URL to successfully post. A few things that I walked away with: I did need “App on Facebook” settings added even without leveraging any other components of the Javascript SDK, all 4 of the URLs (secure/non secure page/canvas) should be to directories and don’t forget the trailing slash or the secure link in the pagetab dialog URL. Thanks for being thorough!

    110. I created a Google Calendar app to display in an iframes page, however only admins can see it.  Not in Sandbox mode.  I’ve checked everything.  I set up a test user and the user can see it, but no one else can see it.  

    111. Hi Tim, thank you so much for this information. When the app profile page existed, it was easy to link to a specific page on a blog (file, not directory), and now as you say it is not possible from the destination of the link you provided.

      Is there a workaround for this? I posted the question on Stack Overflow, may I include your answer if you answer it here (that is, if it can be done.)

      Thanks.

    112. Holly, I’m unaware of any workaround. In the App Settings > Advanced … at the bottom, you can set the App Page, and it’s a Facebook community page.
      If you learn anything, please share it here!

    113. I’ve just created an iframe tab on my fanpage using static html iframe tab. Morever when i go to the page settings  to make my welcome page as default but i don’t see any welcome tab on my settings. Till now the welcome tab is not the default tab. Please help. This is my page “Amazing Must-Have Recipes”.

    114. Goodwill_man says:

      First of all, sorry for my bad english, it’s not my foreign language. This looks too complicated for me and i need someone’s help. I only want to create simple facebook app that will place specific image to user’s wall/timeline and text that will  redirect that user to my page. I think this is a good post and this helped a lot of people. Thank you in advance. 

    115. yes,
             it is briliant i have neve seen any where the usage of FBJS.
      thanks for this trick.

      Facebook Application Developers

    116. why you are doing spamming on this such a great blog ?

    117. If you want to add an app to your facebook fan page, all you need is your app id:
      http://martinwittmann.at/content/how-add-facebook-apps-page-tabs

    118. I dont know what is the problem (img 1), you can check that the page url and everything is ok (img2):

      http://www.kunste.cat/PFB/ (this is what I want to see)

      Nothing shows up at my page….(img 3)

      Please help…

    119. niteshgwb says:

       Hi it seem that the structure for the assign application to the page like this  https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL  is not working more.

    120. https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
      i use this url ….something went wrong..
      anything wrong?

    121. Anyone have any ideas why the Add Page Tab URL is not working at the moment? or has the format changed and what i am using now out of date?!?! I am using: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

    122. clicki123 says:

      Hi, thats a great article. i followed the steps but i keep getting “sorry somthing went wrong” message….  anyone else got it too? (i got it for 2 days now) thank so much!

    123. Hi Tim, thanks for the tutorial, it was really of great help to me.
      I had a minor query though, i have created a page tab app for which i have set all the parameters
      under Auth Dialog in the app settings.

      Now when i send a friend request through my app, and my friend clicks on
      the app request, he is able to see the authentication box describing
      the app and the permissions requested etc.

      But if anyone visits my page on which i have added the app, and clicks
      on the app from there, it directly takes the user to the page tab
      without displaying the auth box.

      Is this how it is supposed to work from a page? is it possible to
      display the auth box for a user coming to the app from a page?

    124. What is the URL of your tab?

    125. How can I, at 77 years of age, understand all this gobbledegook? I just want to use Facebook to work with my groups, not have to work around this message almost every time I open a tab.

      “Add Page Tab””You must have permission to add apps to at least one Facebook Page to perform the requested action”Must I unsubscribe from Facebook just because you keep changing for the sake of change?

    126. I’m not Facebook, John! It sounds like you’re trying to add a page tab but you don’t have any pages for which you’re an admin, so there are no pages for which you have the permission to add page tabs.
      Many users, not just elderly ones, have trouble keeping up with Facebook’s changes. Hang in there!

    127. uniformmarket says:

      I have created app in this format only.. Now  i want to redirect my page when users click on like button (i.e not the button created by us it is face book main like button please help me)

    128. Tim – this is a great tutorial – thanks!  I am wondering if, by chance, you have any thoughts about the following situation.  I have a Facebook canvas app (written in Ruby on Rails and using the Koala Gem but I am not sure if that matters) that works fine as a canvas app.  Specifically, if you go to: apps.facebook.com/trinkon you will be prompted to authorize the app.  One authorized the app will load and run correctly.

      I want this app to also be available as  a Page Tab app.  I have set up a test page at: https://www.facebook.com/trabcz  While there is not much content on this page, there is a tab for trinkon.  I was able to set this tab up using your tutorial.

      If a user who has already authorized Tirnkon from the canvas app clicks on the page tab for trinkon, then trinkon will load and run correctly.

      However, if a user who has not yet authorized the app (or who has authorized the app and then has uninstalled the app) clicks on the trinkon tab the behavior is unexpected. In particular, I expect Facebook to display an app authorization dialog in this case, but this does not happen.  Since the app is not authorized my app chokes and displays an error message.  Note that the contents of the error message are likely misleading…  we crafted wording for this error because it is appropriately displayed in the cases described in the message text.  

      Long story short… do I have to do anything special to get Facebook to display an app authorization dialog when a user uses my page tab app without having first used the canvas version?

      And, by the way, I have tried using both my app’s Canvas URL and my app’s secure Canvas URL but neither work.  The only place I have deviated from your tutorial is that I have not set a value for the “Page Tab Edit URL” because there is nothing for the Page Tab Administrator to edit. 

      Dave B.

    129. That’s a very bad user experience. And it can’t be done anyway.

    130.  How to choose a directory link in a blog in Blogger Canvas

    131. Dave, I can’t really help you with the details. But from what I read here, you may want to create two instances of the app, one for the stand-alone and one for the Page tab. This isn’t much help, but it’s all I can say at the moment.

      • Thanks. This may in fact be what we have to do.  I filed a bug report with Facebook.  The assigned engineer has acknowledged the problem but assigned the issue to be “low priority”.  So I have no idea when or if they will fix it.  Thanks!

    132. I set up a page tab, but the only one who can’t see the content is me as the admin of this page. Talking about https://www.facebook.com/Strandkindergartenfreunde/
      Please click on the tab “Impressum”.
      Any idea?

    133. steve ause says:

      I’ve created a static iframe tab on my http://www.faceboook.com/stevenjause page to capture emails… I want to add a button for “close” which I know how to do, but I don’t know the code to close the tab window and let it return to the main page. Can you help?

    134. Just make the “Close” URL the main URL of your page tab.

      eg: http://www.facebook.com/stevenjause?ref=hl

      Make sure you specify target=”_top” in the href URL.

      Hope this helps.

      Tim

    135. magia! GRAZIE

    136. disqus_y36KQdLr3S says:

      Hi ,please help me .

      In orther to add iframe application to my facbook fanpage .

      I use it to my situation : my app only website with facebook theme ( 820px weight ) and add website url ( app url ) to ifram tab of facebook .

      I follow your guide, simply navigate to this URL in your browser:https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

      i will change YOUR_APP_ID by actual my app id and YOUR_URL is app url .

      That is ok , after i chose my fanpage to app that app , click submit Add page tab button , the browser immediately redirected to My app url is my website .

      I don’t want redirect to my website , i want it redirec to facebook fanpage have tab , or user facebook timeline …

      One more question , my app url now only is http:// not https:// , is that reason , when i access app on fanpage tab , my app don’t show anything ?

      please guide me .

      • If you use the direct-URL approach to adding a tab to a page, your “next” or “redirect_uri” URL can only be http://www.facebook.com or to the domain where the app’s canvas page (aka index page) resides.

        • disqus_y36KQdLr3S says:

          I still haven’ understand your reply . Yes, i use direct-url approach to adding a tab fanpage , how can i change this problem :

          “click submit Add page tab button , the browser immediately redirected to My app url is my website .

          I don’t want redirect to my website , i want it redirec to facebook fanpage have tab , or user facebook timeline …”

          about : one more question , my app url now only is http:// not https:// , is that reason , when i access app on fanpage tab , my app don’t show anything ? – please give me some guide !

          Thank Tim Ware .

    137. Hi there, can pages still direct fans to the iframe when they havent liked the page?

    138. Prabhash Singh says:

      Hello, i need to create a facebook app. The theme is. A user would be shown a default page, when he will open the app for the first time. If a user Likes the app, he will be directed to a page where he will fill up a form else he will remain to the default page untill he Likes the app.At this point, i have created the app and using $_signed request to get the value to know wether the user has like the page or not. But, somehow i am not getting the value for like, some other values are coming. Would you help me, please?

    139. Cybertime Dev says:

      Great work!
      Thx for the tipps!
      The 405-Error-Solution saved my day! ;-)

    Speak Your Mind

    *