How to Create an iFrame-Based Facebook Tab Page

By Janet Driscoll Miller | Feb 14, 2011
More Articles by Janet


My last post explained the benefits of the new iframes-based Facebook tab pages, so are you ready to set one up? It can be a little tricky, so here’s my steps to walk you through creating a Facebook iframe tab page (to enlarge screen shots, click on them):

  1. On your Facebook page, click on “Edit Info”.
  2. Click on “Apps” at the left hand side. This will show a list of the tabs you currently have along with other installed applications.
  3. At the very bottom of the Apps page, click on “Browse More Applications”.
  4. In the search box, enter “Developer” to search for the Facebook Developer app.
  5. Click on the Developer app, then select “Add to my Page” under the logo at left. A box will pop up to show which pages you can install the app on. If you do not already see your page listed there, the app is likely already installed. If your page IS listed, click on “Add to Page” to install. After you have installed the app or if it is not listed, close the pop up window and click on the “Go to App” button under the logo on the left.
  6. Click on the “Set Up New App” button at the top of the page. You’ll need to have a name for your page. This name will be what displays on the “tab”, so choose wisely.
  7. There are three screens you will need to fill out in the app setup to get your tab page working properly:
    • About Screen
      The About screen contains basic information about your page/app. You can upload a logo for the page and you will need to add your privacy policy and terms URLs to this page. NOTE: You MUST add either a trailing slash or a ? after your URLs for privacy and terms. Not sure why, but it is required by Facebook to submit the form. I suggest using a variable, such as I have below, to identify to your website that the page you are accessing should be formatted for Facebook tabs (see my example below).
    • Web Site Screen
      The Web Site screen contains information about your own company domain. NOTE: Like on the About screen, you will need to enter a trailing slash on your website URL (as I did in the example below).
    • Facebook Integration Screen
      This screen is where the beef of your tab page is set up.  Enter all of your page information, and be sure to choose the iFrames “canvas type”. On this page, “canvas” refers to your page that will appear within the Facebook iframe. NOTE: Like on the About and Web Site screens, you will need to enter a trailing slash or ? at the end of the URLs (as I did in the example below).Once you have completed these three screens,  click “Save Changes”. You will be able to come back later and edit these settings as needed.
  8. Now take a look at how your tab page will look by copying the “Canvas Page” and pasting it into another browser tab. Voila! There’s your web page! However, don’t get too excited yet… there’s likely more work to be done.
  9. The next thing you’ll want to do is create a version of your canvas page that fits the dimensions of the Facebook tab screen. While the Canvas Page looks pretty wide, the reality is that once you place the tab page in your company page, it will be more narrow. In the example that follows, I used an existing page on my website and used a different style sheet based on the variable “ls” appearing in the URL. This variable serves as an alert to the page that the layout should use the Facebook layout, not the normal website layout. Here’s the steps I took to reformat my page:
    • Create a separate style sheet for Facebook.
      Since I’m using an existing page on my website for this page, I created a separate Facebook style sheet, limiting the width of my page to 500 px, which fits nicely in the Facebook tab area on my company page.
    • Use dynamic programming language, such as PHP, to display or hide certain things from the Facebook version.
      Again because my Facebook tab page is so narrow compared to my regular web page, I decided to use PHP to declare which pieces of the page should be shown or hidden when the page was being displayed in Facebook. First, I captured the “ls” value from my Canvas URL in a variable by using $_GET["ls"]. Then I simply added conditional statements throughout the page in different areas to say that if the variable for ls was equal to (in my case), “fb”, then show or don’t show this element. I also used this approach to have the page select the Facebook style sheet when appropriate.
    • Test the version in your separate browser tab.
      To see how the tab will display, keep refreshing your open browser tab with the Canvas Page in it.Once you’re all set, you’re ready to add the app to your Facebook page.
  10. Next, click on the “Application Profile Page” link to add the new Facebook tab page to your Facebook page.
  11. Once on the Application Page, click on “Add to My Page” to add the tab page to your Facebook page. A pop up window will appear. Click on the “Add to Page” button adjacent to your Facebook page name.
  12. Go to your Facebook page. If you don’t see the Tab Page listed under the logo, you may need to change the order. Simply click on “More” then “Edit” and drag your Tab page higher in the order to ensure it is a page that shows in the menu there by default, if you prefer that. In my case, the page was a “Careers” page, so I wanted to ensure it was always visible.
  13. Preview the tab page by clicking on it. Make sure that the layout works the way you want. If it doesn’t, you can always edit your style sheet or page on your own website to ensure it fits properly.

That’s it! Now you’re ready to promote your page!

NOTE: You do not ever need to publish your app to the directory. You can keep it private, so if you don’t want to share, don’t submit it to the directory. It’s not necessary to use the app.

Share this article

Share on LinkedIn Share on Twitter

Blog Search


Receive Daily Digital Marketing Tips

Subscribe to monthly updates from the Marketing Mojo Blog to get the latest digital marketing tips, best practices and insights - hot off the presses and straight to your inbox!

 

  • Kenny

    Hi Janet, thank you for the tutorial, very helpful indeed. As a test, I went through the steps and managed to get my website to show up in my Fan page. (Now I just have to make a 520px wide version of it!)

    The problem is, I find that when a visitor is logged out of facebook, the iframe doesnt show any content at all, which almost defeats the object!

    My old fbml static pages show up fine when logged out but not the new iframe tab. Is there a way to sort this out?

    Thanks again!

    Kenny

  • Kenny

    Hi Janet, thanks for replying so quickly!

    I’m delighted that this has been flagged as a bug, I was beginning to think that facebook meant for it to happen! I’m glad they are looking at a fix.

    Once again, thanks for your tutorial and your reply, I appreciate it very very much!

    P.S. – Don’t worry if you don’t have an answer for this, I just thought I’d ask while I was here – Do you know if it’s possible to have a section within the custom iframe tab where people can post a message that automatically posts to the wall?

  • http://www.search-mojo.com Janet Driscoll Miller

    Hmmmm… good question. You’d likely have to add developer code directly to your HTML canvas page. There are ways to do that, but not sure if you can specifically add copy to your wall per se.

    A good resource is the Facebook Developers’ site located at: http://developers.facebook.com/. There may be a prebuilt tool or widget you could use in there. Would save you a ton of time if there is!

  • http://kickstartcms.com Michael

    Can anyone tell me the current dims for images in tabs? Also, what are the width & Length for the profile images.

    Thanks!

    • http://www.search-mojo.com Janet Driscoll Miller

      Michael, I typically use 500 px wide for the tab page width. that seems to work well in Chrome for me. I’ll ask Renee Revetta, our social media specialist, to comment on the profile images.

  • http://blog.search-mojo.com Renee Revetta

    Hi Michael,

    The only restriction Facebook lists is that the image must be under 4MB. However, I’ve seen suggestions from Mashable and AllFacebook that you can use a photo up to 200×600 pixels. The article: http://www.allfacebook.com/facebook-profile-photo-hacks-2009-02

  • http://www.whosbloggingwhat.com Jeff Ente

    Janet-
    Thanks for the great walk through. I eventually got the iframe to work although not until I changed my .htm page to .php. My server just would not cough up the .htm version for some reason. Strange.

    Do you think that these iframes will become interactive? Will a Facebook user be able to input data about a sales item that interests them and then our ecommerce platform would send the product page for that item to the iframe?

    Thanks.

    • http://www.search-mojo.com Janet Driscoll Miller

      Jeff,

      I think that’s the real beauty of the iFrames approach. I’m looking to work with my ecommerce clients to try putting their category pages into FB as iFrames. I think it’s got HUGE potential! Good luck! Would love to hear about how it works out for you!

      Janet

  • http://www.young-guns-and-silverbacks.com Jim

    Do I need an SSL Certificate to view my page in my iFrame?
    Every url I’m plugging in seams to work but that one. This is the url that shows the page can not be found. And I’m not sure why.

    Jim
    much thanks

    http://www.facebook.com/pages/Young-Guns-and-Silverbacks/130126297053023?sk=app_130057867064858

    • http://www.search-mojo.com Janet Driscoll Miller

      Jim,

      You don’t have to have an SSL certificate (or secure site) to see the page in an iframe. But, if you want to make your page secure, you will need an SSL certificate to officially make it an https instead of http.

      Janet

  • Joseph

    “If you don’t see the Tab Page listed under the logo, you may need to change the order. Simply click on “More” then “Edit” and drag your Tab page higher in the order to ensure…”

    I do not see the “more” or “edit” links. Any ideas?

    • http://www.search-mojo.com Janet Driscoll Miller

      Joseph,

      Make sure you’ve updated your company page to the new layout. This is what puts the tbs on the side. Have you already upgraded the page to the new layout?

      Janet

  • http://smalltownkid.net/ Asif Hussain

    Excellent Post! And very helpful for a FBML developer like me.

    I have one question though: How can i set a secure (https) domain?

    Thank you
    Asif

    • http://www.search-mojo.com Janet Driscoll Miller

      Asif and others who have asked about secure domains:

      When you set up the page, in the Facebook Integration screen, there’s a location to place the secure page. While I haven’t tried using a secure page in the iframe yet, I suspect that this field is for that secure version’s URL. Try that and see how it works out for you. Curious to hear how it works… I need to try it… just need to figure out what I want to try it with!

      Janet

  • Eric

    Hi, I did all this and my external page is shown in the app. I also added the app to my page, but still there is no tab page listed on the left side. Also not if I click on more. There is no iframe tab shown at all.

    • http://www.search-mojo.com Janet Driscoll Miller

      Eric,

      Have you upgraded your company page to the new layout? That’s what will put tabs on the side. If you have not upgraded yet, you can upgrade to see them on the side OR, if you’re staying with the old layout for now, you should be able to see it in the tabs at the top. Again, there’s a limit to how many show at the top, so you may need to click on the tab at the far right to see a list of those tabs not displayed.

      Janet

  • Nathan Vogele

    I did all the steps but it only comes up with a red screen that says: This frame was blocked because it contains some insecure content.

    I don’t know what the problem is please Help.

    Thanks

    • http://www.search-mojo.com Janet Driscoll Miller

      Nathan,

      You likely have links to other content on the page, like images, that don’t use the https but rather http in the link to the content. I would try changing that first. It’s often overlooked in web pages and causes a security error.

      Janet

  • http://smalltownkid.net/ Asif Hussain

    Hi again,

    Can we create a reveal function with this new system?

    Thanks

  • Nathan Vogele

    Thanks!!!!!!!!

    :D they are working now.

  • rick

    Great tutorial, but when I do everything you say, I get this message on my new tab:

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

    I have remade several times. The website I am pointing to runs fine and the “go to app” button on Facebook takes me there OK. The custom tab displays the error. Is there some server side code I need for my website hosting server?

    • http://www.search-mojo.com Janet Driscoll Miller

      Rick, because it says it’s an FBML error, I question if you actually chose the FBML option instead of the iframe option. Go back to your page settings and check that the Facebook Integration screen has “iFrame” chosen as the canvas type and not “FBML”. See if that fixes it.

  • rick

    Yes, I thought of that too, but iFrames is selected. I’m going to play around with it this weekend. If I figure it out, I’ll let you know.

  • rick

    How did you get your Canvas Page “search-mojo-careers” as the base url of your app? When your app is called “Careers of Search Mojo.”

    I’m using the same name in both fields. I think that is whats wrong with my attempt.

    • http://www.search-mojo.com Janet Driscoll Miller

      There’s several places you have to enter information. One of the entries is the URL you want for your app, so that’s what I entered there. It can definitely take some back and forth to get the iframes working right — it’s not super intuitive. I had to play a bit to figure out the process just to write this post!

  • rick

    In Facebook Integration under Canvas there’s the http://apps.facebook.com/*field*

    I am not sure what to put in that field. My website url name not work. My app name does not work. You have “search-mojo-careers” there, but I don’t know where that comes from, as it isn;t your website name nor Facebook app name.

    Sorry for all the questions.

  • Marcy

    For me to see any iframe tabs that I have checked today, I had to go to Account Settings > Account Security, and then uncheck “Secure Browsing (https)”

    Someone asked about an SSL certificate. Since many Facebook users are using Secure Browsing, I am not sure how they are going to see our iframe tabs, if we don’t have a certificate.

  • Kenny

    Hi Janet, you really helped me before, I hope you can help again!

    I’m having a problem creating links from the iframe app I created for a client to his wall, photos, etc

    Here is the iframe I built for him:

    http://www.facebook.com/pages/The-Sax-Man-Ben-Barnett/88909269117?sk=app_102459789834489

    For example, if you try the link that says ‘click here to go to our wall’, it first takes you to a facebook logo which you then have to click to get to the wall.

    Any idea of how I would remove that unneccasary step?

    Thanks, Kenny

  • Kenny

    I figured out that problem I was having!!! If anyone else is having the same problem, just change the target to “_parent” in your HTML. Yippie!

  • Shannon

    How do you remove (or add back) an iframe based Facebook tab after its initial launch? I’ve tried looking around in my Page’s Apps section, and I see all my apps except the new ones created using iframes.

  • Daniel

    “I do not see the “more” or “edit” links. Any ideas?”

    For some reason, the more and edit only shows, if you have 7 or more apps on your page (including wall). With 6 or less – it’s gone. Don’t ask me why… Solutions to this are more than welcome!

    “How do you remove (or add back) an iframe based Facebook tab after its initial launch? I’ve tried looking around in my Page’s Apps section, and I see all my apps except the new ones created using iframes.”

    Well, here’s another problem I’m having too! True, you can’t see the iframe app in your pages app section. As far as I’ve been able to figure, there are two solutions to this problem and they both suck.
    1) You can delete the app in the developer section which will also remove it from your page. (Yes, the app is now all gone – told you it sucked!)
    2) If you can see the more/edit option (see my reply just above), you can click on the little “x” to the right of you app. This will remove (the visibility of) the app from your page, BUT (here comes the sucky part) you can’t (as far as I’ve been able to figure) add the app to your page again!
    When you go to your app in the developer section and choose “Add to my Page”, your page wont show anymore as the app is still/already added to you page in some weird invisble way.
    If anyone knows a way around this – please do tell! It would be much appreciated! :)

  • http://www.sellingudesign.com Scott

    Hi Janet!

    Great article and it looks like a great tutorial that I am looking forward to implementing. However, in step #6, after I click “Set Up New App,” I get a screen that wants me to add a mobile phone or credit card. I selected the mobile phone and get a pop-up that says my mobile phone has been verified, but when I go back and select “Set Up New App” again, I get the same screen asking me to add mobile phone or credit card – I’d really rather not add a credit card to my account. Any idea why this isn’t clearing the verification process and allowing me to continue on with step #6?

    Thanks,
    Scott

  • Charles Dillon

    For those of you having issues with removing and then re adding iframe applications, I found this on another site…

    make sure you have something in the canvas page field.

    *ALL* of the tutorials I have found don’t mention putting anything in this field. If it is left blank, the iframe application WILL NOT show up in your page applications list

    The website I found with the instructions:

    http://www.kimwoodbridge.com/how-to-add-the-facebook-iframe-app-to-the-list-of-applications-in-the-page-settings/

  • http://www.facebook.com/pages/Teddington-Hockey-Club james maxwell

    Hi Janet,

    Great post. Just want I was looking for.
    However I am having issues getting the app page on the facebook fanpage

    I have created the app page however I can’t seem to be able to get it on the facebook page I just get a facebook link and facebook image.

    The fanpage is

    http://www.facebook.com/pages/Teddington-Hockey-Club/120971554625662?sk=app_186471671398236

    The app page is
    http://apps.facebook.com/teddingtonhc/

    I would appreciate any feedback that you can give

    Thanks

    James

  • http://www.mysportsclubs.com Dennis

    Hi Janet. Thanks for the detailed tutorial, however, when I click on the “Set Up New App” button I’m taken to a page that says, “Your account must be verified before you can take this action. Please verify your account by adding your mobile phone or credit card.”

    I don’t have a company cell phone, don’t text on my personal phone and don’t have a company credit card. What are my options? Have you come across this requirement? Seems odd to be required after having to click on so many links to get to this point.

    Thanks.

  • http://www.tave.lt Mindaugas

    Your post is Just brilliant! Thanks!

  • Craig

    Hi Janet – your step by step guide was great and I have the tab on my fan page but for some reason it is showing someone else’s web page instead of mine? Ever heard of that happening?

    Thanks.

    • http://www.search-mojo.com Janet Driscoll Miller

      Craig,

      I’ve never seen that. Check to be sure you typed the iframe URL in correctly in the setup first. Otherwise, also make sure you don’t have a virus on the iframe web page… wondering if a virus could be redirecting it. One way you may be able to see the URL in the iframe is to right click somewhere in the iframe and look at the frame properties. Good luck!

      Janet

  • Craig

    How would I tell if I have a virus in the I Frame? Also, if I paste my canvas into my web browser (https://apps.facebook.com/pacificmg/) it also comes up with the same web site that is appearing on my tab?

    • http://www.search-mojo.com Janet Driscoll Miller

      I use Google Chrome as a browser. If you go to the frame page, and right click on the iframe content area and select “view frame info” or “view frame source”, you can see what happens. Chrome has a built in malware detect, so it immediately stopped me from going further. I sent you a screenshot via email. The best course of action for you will be to use Google Webmaster Tools to help you identify where the malware code appears on your website page code so you can remove it. After the malware code is removed, then your iframe should work properly.

  • http://www.dumbo.com Adrian

    Voila! where’s the code?

    • http://www.search-mojo.com Janet Driscoll Miller

      Adrian, please clarify what you’re looking for… there’s really no iframe code you have to have… Facebook sets most of that up for you. Were you looking for information on how to format pages to fit the iFrame best?

  • Bassem

    Hi Janet,

    this really very nice tutorial. after i create my application, is it possibile to make it ask the users to enter their profile link on my website so that when they integrate the tab to their page it shows their profile on my website?
    Best regards,
    Bassem

    • http://www.search-mojo.com Janet Driscoll Miller

      Bassem, I’m not sure about that. Sorry I can’t be of more help!

  • https://www.facebook.com/ToUrSuccess Queenie

    Hi Janet,
    I created an icon, but some how it disappeared from my page but I can see it on iphone as a new page? If I don’t have a proper website, would the above still be applicable?
    Cheers,
    Queenie

    • http://www.search-mojo.com Janet Driscoll Miller

      Queenie, can you provide more details? I guess I don’t follow where the problem is occurring. Thanks!

  • ratnam

    can we create a facebook tabsite page by using API.
    my requirement is to create a facebook tabsite page using .net web application.

    • http://www.search-mojo.com Janet Driscoll Miller

      I’m not sure if you can do this via the API. You might try checking out their API documentation to find out.

  • https://www.facebook.com/Ballymore Bob Brooks

    Hi,

    I only got to step 3. Couldn’t find “Browse More Applications”

    Have things changed?

    Thanks

  • http://www.tabprojector.com Bob

    Hello Janet! Have you found a way to see who’s using your app? I just launched mine at tabprojector.com, got a few quick users and would like to offer assistance. I snooped around in insights but found nothing there. Many thanks!

  • http://arntariq.com ambreen tariq

    thx a lot for sharing this. as i was searching a lot about this topic and your article is the perfect match. Previously, i was able to do the simple coding at the fan page. but now i will try out this iframe thing with my own icon’s and my own coding.

  • Martin Grace

    frankly speaking, I prefer to use pre-made apps that build and publish iframe tabs without requiring too much user interference. the one i’m using now is facebook iframe tab builder from hostFB – https://apps.facebook.com/buildiframetab/