Add an iFrame Facebook custom Tab

Facebook Page ChangesYesterday Facebook announced some major changes to Facebook Pages. A Quick hit list of some of the things that changed:

  • Page layouts now appear like the new profile layouts (pictures at top, “tabs” in the left column under pic)
  • Admins can be publicly displayed
  • Page Admins can comment on public users timeline and other pages’ walls
  • Lighbox for Picture viewing
  • FBML is going away March 11. Welcome iFrames

This post is aimed at the non developer (or dare I say the web developer not familiar with developing on Facebook) in an effort to give the bare minimum of what is needed to get your first custom “tab” via iframe deployed.

Facebook Custom tab?

In the new page layout there are no longer tabs, so we’ll shortly stop calling them tabs and move towards Custom applications, or Custom app. The Landing tab nomenclature will probably move to a Page’s custom landing application, or landing app. But for now even Facebook is still calling them tabs (strange?)

When we created custom tabs using FBML we actually added an application called Static FBML which supposedly is going away March 11. Facebook has had trouble deprecating things like FBML in the past so I take this as a warning but not a hard deadline. Oh and if you are reading this before March 11 2011, please please please add a couple Static FBML apps to your page, at a minimum it leaves your options open. We don’t fully know what we’re loosing yet.

Now that Static FBML is going away we will still need to add an application to our page to develop the custom tab. But instead of it being FBML, we need it to be an iframe. Since there is no “Static FBML” equivalent in the iFrame world below is a description of how to create your own custom Facebook application to use the iFrame capabilities.

What is an iFrame and why do I want it on Facebook?

An iFrame allows you to display content from page A on page B. Typically iFrames are used to cross domains. So I can embed a YouTube video on my site via iFrame. The code for the iFrame simply tells the browser to request the content from this location (server).

The key for you and your Facebook page is now you can use your company’s CMS and integrate with your database, or provide ecommerce information on this “tab” without having to go to Facebook. Once the iFrame is established all you have to do is change the content of the page it’s pulling in (typically on your company’s website, though I recommend you hide it from the general public)

How To add an iFrame to Facebook page

Facebook App Iframe

Go to facebook.com/developers and click on the “+ Set Up New App” button.  (Or click the “Create one” link) which takes you to: http://www.facebook.com/developers/createapp.php

Facebook FBML to iFrame

Give your application a name. And agree to the Facebook Terms of Service.

Facebook Captcha

Verify your humanness. Robots need not apply.

Facebook Custom App

Welcome to the craziness! What I will focus on here is the bare minimum to getting your Facebook custom iframe app up and running. However there is a lot more to these apps than what I will cover. Bonus: Not needed for this to work, but it makes you look good: Change the Icon (click Change your icon) to upload a 16px x 16px icon for your “custom tab” Everything else on this page is 100% optional for today’s objective.

Facebook iFrame Settings

The “Facebook Integration” link in the left column is where the rabbit trail goes even deeper.

Facebook IFrame FBML Canvas

The most confusing section for a non-facebook-developer is the Canvas Page and Canvas URL fields. The hint is this: Facebook combines a setting below with  your Canvas URL to create the URL it requests for the iFrame. For now fill out the Canvas page, and in the Canvas URL fill in everything but the page for your iframe, ex: http://myhost.com/iframe-content-here will break into the Canvas URL of just http://myhost.com whereas http://myhost.com/cat1/date/funURL/iframe-content-here will break into the Canvas URL of http://myhost.com/cat1/date/funURL/ Always have a trailing slash in this field.

This took me a little while and some 404 logfile reading to figure out, because Facebook does not make it clear how these are used.

Facebook Custom Tab Settings

Then We finally get to the important part: The Tab settings. Simply give the tab a name (keep it really short, limited to 16 characters) Choose iFrame and give it a Tab URL. The Tab URL is the final part of the iframe content request URL from above. So if your iframe content lives at http://myhost.com/iframe-content-here your Canvas URL would be http://myhost.com and your Tab URL would be iframe-content-here. Even if your content lived at http://myhost.com/cat1/date/funURL/iframe-content-here your Tab URL would be the same iframe-content-here (your Canvas URL should however be different)

Save these changes. Congratulations, you’ve made your first Facebook application. Now we need to add it to the page of your choice.

Add the App to your Page

Facebook Add iFrame to page

In the resulting page you have the option of Editing the Settings which allows you to dive deeper into these or fix any problems you may have encountered. But to add it to the page you will need to click the “Application Profile Page”

Facebook Add iFrame

On the Application Profile Page choose “Add to my Page.” Under the Profile image (which should be the default Facebook grey toned image) Choose the page you want this iFrame to appear on and click the “Add to page” button next to it.

Done!

When you visit that page you will now see the Welcome! as a link under the profile picture.

Make the iFrame Tab the Default for Viewers

Facebook Edit page FBML

To make it the default click Edit Page in the upper right hand corner.

Facebook Page Admin

Choose Manage Permissions

Facebook Default Landing Tab

In the default Landing Tab: Drop down selector choose your new application: Welcome! and Save Changes.

Follow Up?

These directions might not be 100% accurate, however please let me know if you find the useful, or if you se any problems here.

Yeah I miss FBML already ;)

  • http://www.thinkfullcircle.com kirby watson

    fantastic post as usual….all bow to Mr. Kortman!

    • GRDude

      Nice response Mr. Kirby. :)

    • henry

      could be better!
      I found a solution to create an iframe application without being a facebook developer . It’s very powerful:
      http://www.facebook.com/iframe.apps

  • Pingback: Tweets that mention Add an iFrame Facebook custom Tab | Paul Kortman -- Topsy.com

  • Pingback: jodiontheweblog » Blog Archive » New Facebook Fan Pages

  • IrishManInUSA

    About time FB did something like this, FBML was just too much of a pita to work with, and I have come across articles that implied that apps could be done using iframes. Freakn A. :)

  • http://www.tourabsurd.com Katrina

    Thanks for the info. Some of the layout has changed since you screenshot, which throws a non-dev type like myself off a little.

    I managed to slog my way through the FB screens and get something up, but it can only be seen if a user is logged in.

    http://www.facebook.com/tourabsurd?v=app_189918757705018

    …vs. old school FBML:
    http://www.facebook.com/InspiringTravellers?v=app_4949752878

    Is there a way to enable the content to be seen without being logged into FB? (Speak slowly and use small words; I am a newbie. Thanks!)

    • http://paulkortman.com/ Paul Kortman

      Katrina,

      I’m digging into this currently but you are not the only one wondering this. Nice work on your first iframe… though now I want some bread pudding and I’m feeling the urge to buy you a beer … ;)

      • http://www.tourabsurd.com Katrina

        Ha! It worked! I should really set up a series of these and post in the comments on many websites. It will save me a bundle in food bills! ;)

        Another question: I created a page containing another iframe, but it would not display at all. Is there a limit to the number of nested layers one can include in the code? It was going to another simple HTML file on the same domain, if that matters. Worked by itself in Firefox and Chrome, but not through FB. Probably too many nests indicates a potential security threatening flock of birds that FB doesn’t want to feed.

        Thanks for the reply! Eagerly awaiting any discoveries you find about the logged vs. non-logged in user. If you solve it, I will buy YOU a beer next time you’re in Ireland. ;)

        • Eric

          Katrina, how did you get your page to appear when not logged in like that? PLEASE share your trick/code/etc. There are a lot of people who are stuck with this bug right now!

          • http://www.tourabsurd.com Katrina

            My landing page still doesn’t show when not logged in. It’s a FB bug that has been reported here: http://bugs.developers.facebook.net/show_bug.cgi?id=15166

            I set the default landing page back to my Wall until this issue is resolved. Is that what you’re seeing? The Wall? Because I still can’t see the contents of the Welcome tab unless logged in.

  • http://www.facebook.com/apps/application.php?id=182882261740702&sk=app_182882261740702 MIssEm

    I LOVE iFrames, they are super cool and so much better than FBML.
    (Sorry Folks). I’ve actually never used the Static FBML App…ever!
    With iFrames you can use any standard web code such as php, mysql, jquery, javascript etc etc. You can even use databases to store and use information. Given facbook permissions of course :)

    Understandably, you need some computer coding nouse, so this may not be for the light hearted but once you get the basics the possibilities are endless.

    My username link is an example of an iFrame Facbook Page Tab.
    If you click ‘Go To App’ you will see the full version of just what iFrames are capable of :)

    Em

    • http://paulkortman.com/ Paul Kortman

      Nice Work Em,

      Did you have this iFrame up before this week?

    • GRDude

      iframes may be cool for this instance, but in terms of SEO, they are not the greatest. However, with this it shouldn;t be a problem.

  • Ken Hood

    Paul- I’m a designer who has setup over a hundred niche clients with FBML Tabs… now spent several hours wading through and with your help got my first “hello world” iframe tab working. The Problem: the tab is only viewable to folks who are logged in… if someone who is not logged into fb goes to my page (on which I set the new iframe tab to be the default) they see the title of the page, but no content – which now is just “hello world.” http://www.facebook.com/KenHoodTV

    • http://paulkortman.com/ Paul Kortman

      Ken, you are right… I’ve seen this on multiple iframes now, I’m trying to find some way around it, but in general fb users will be logged in, it’s just Google (Search Engines) which will not see your content.

  • Rafael

    Sorry if I sound ignorant, but how exactly do you create iFrame content that’s hosted on another page? I’ve only used FBML, so this is all new to me, and any help would be very much appreciated.

    • http://paulkortman.com/ Paul Kortman

      Rafael,

      Any page, any content on the web can be the source of an iFrame content. For example, a google search like: http://www.google.com/search?q=facebook+iframe could be the source. Most people have a website other than their Facebook page and that is where they are putting the content for the source of an iframe. Remember that your iframe’s width will be limited to 520px. Keep that in mind when creating the content or choosing which page to embed.

      • Rafael

        Ohhhh, OK. I’m starting to understand now. So basically I can create content on a page on my site and follow your instructions to pulling that content via iFrame into a Facebook landing page. Is that correct?

        Is there any Facebook-specific code I have to copy into my site’s HTML? I feel like I remember seeing Facebook mentioning something about this.

        • http://paulkortman.com/ Paul Kortman

          Rafael, you have this correct! There is some advanced functionality provided to you from Facebook, but you do not need anything special to get your content to display via an iframe on Facebook.

  • John Arroyo

    WOW. This was the most useful and easy-to-understand DIY of 2011. This is HUGE for the organization i’m using it for, Best Buddies International. You can see a working model of this writeup at http://www.facebook.com/bestbuddies. A million thanks!!!

    • http://paulkortman.com/ Paul Kortman

      John, Your Donate tab (http://www.facebook.com/bestbuddies?sk=app_182914628412374) iFrame content was blocked the message I received: “This frame was blocked because it contains some insecure content.” Perhaps the form or the content you have on your iframe source is triggering a spam filter?

      • John Arroyo

        Thanks for the heads up, Paul! The issue is that the certificate is invalid from the host site. There is a host name mismatch. Unfortunately, we don’t manage this information and are waiting for a resolution on their end. Thanks again for the great help!

        • http://paulkortman.com/ Paul Kortman

          Well I’m glad you are working that through. I’m happy to help!

  • http://www.tourabsurd.com Katrina

    My other comment is still awaiting moderation (due to links, I presume?), so I’ll ask again: I managed to slog my way through the FB screens and get something up, but it can only be seen if a user is logged in. FBML did not have this restriction, so that someone who is *not* logged in could still see the contents of the landing page.

    Is there a setting somewhere that I need to adjust in order for an iframe/app-based landing page will show its contents regardless of login status?

    I’m not a developer, so all of this is quite confusing. I’m glad I managed to get the code to work at all.

  • Paul Chaney

    I’ve developed a number of custom tab pages using good old staticFBML. But, I’m not a developer, so this is a new skill set for me. Your instructions are put in as much in laymen’s language as any I’ve seen, but I still get confused at the Facebook Integration level. I guess it’s a matter of learning this via trial-and-error.

    • http://paulkortman.com/ Paul Kortman

      Paul, Thanks for the compliment. Feel free to comment here with questions as you bump into problems/issues.

  • La

    great !!! thanks a lot !!!

  • http://www.thehow2girl.com carol

    Great easy to follow info – thank you – setup my first canvas page and default welcome tab today and it worked great.

    What I am wondering is if there is a way to be able to do this for people who are not techie and do not have a cpanel available to uplaod their html files to?

    I not only create welcome pages and tabs for other people but also want to be able to teach people to DUY their default welcome tab on their facebook page but if they have no idea about html or do not have a website/cpanel this is going to be almost impossible for them perhaps ? Unless there is a way and I havent found it yet?
    carol
    http://www.facebook.com/thehow2girl

    • http://paulkortman.com/ Paul Kortman

      Interesting though Carol, it wouldn’t take much to set it up… WordPress with multi-site enabled, the only child themes would be limited to 520px and then let the folks do as they please to put their content up there…. IS there a market for this? Do that many people have a Facebook fan page that don’t have a website where they can put html?

      • http://www.facebook.com/thehow2girl carol

        Interesting idea Paul…..I will have to look at that ….a WP site still has to be added to a cpanel somewhere and installed though?

        So are you saying I can setup a wordpress platform that is multi site or that clients would do that?

        Carol

  • http://donaldjenkins.net/ Donald Jenkins

    Thanks, that was a very clear tutorial and a great time saver given how muddled the Facebook instructions for switching are. I’ve set it up and rather liking it:

    http://www.facebook.com/donaldjenkins.net

  • Pingback: iFrame Facebook, so wirds gemacht… | Marketing im Internet

  • http://www.facebook.com/thehow2girl carol

    Do we actually need to use the iframe code in the new welcome tabs? Ive setup a welcome page on one of my test pages on FB (didnt put it on my main biz page yet)

    I did it using the above info to create an app but have then simply used html coding and added my optin form raw html and a video html and it seems to be fine so I am wondering what using an iframe tag around everything will do that is different?

    would appreciate your feedback
    carol
    http;//www.facebook.com/thehow2girl

    • http://paulkortman.com/ Paul Kortman

      Carol, you do not need any special code on the source page. Facebook does make some code available to you for knowing if the user likes your page or allows you to display their friends and interaction with their friends. But you do not need to use any of this.

      The reason Facebook has deprecated FBML is in my opinion: why create another language that needs to be cross browser and kept up to date with the most current standards. FBML was quite limiting (by design) because it had to run on Facebook’s servers. the content of an iframe is not cached on Facebook’s servers and thus does not have access to bring their servers down. So you can run whatever code you wish in these iframes (less limiting)

      This is of course just my opinion.

  • http://www.facebook.com/glynhopkinltd ashley wade

    can anyone help me…
    The iFrame i have created works fine – http://apps.facebook.com/ghlused/
    However when i try and look at it from my page, its coming up with page can not be found -http://www.facebook.com/glynhopkinltd#!/glynhopkinltd?sk=app_193407297353952

    Does ayone know why this is?

    I could really use your help.

    Thank you

  • Kirk

    Newb question…but I’m just getting started with development in Facebook (what am I thinking?!?!) and I’m a bit confused. I’m following this DYI for the most part, but here’s what I don’t understand. It seems that you can only develop from a personal FB account, not directly inside a fanpage. So lets say I create an iFrame app for someone else who wants to included it on their fanpage. How does that work?

    Any help/insight/links would be greatly appreciated!

    Kirk

  • Ken Hood

    Paul-

    Any idea on whether or not there will be a limit for developers like me on *how many* apps we can create?I know that a year ago FB had a blog post/comment about a 100 API key limit. This never applied to Static FBML setups (I know cuz I have setup over 400 custom tabs for about 100 clients). That said… I’m worried that if we have to create a *separate* application for *each tab* we could run into a problem. Any thoughts?

    • Eric

      Ken, did you ever figure out how to allow people not logged into Facebook to see your custom (canvas iframe) page?

      • Ken Hood

        Hi Eric- it’s a known (and assigned) bug so there is hope that Facebook will get it fixed. I’ve been following all of the posts and comments in the Dev Blog at FB… and I’m confident that it will get fixed. They have their plate full of bugs right now. :)

        • http://www.tourabsurd.com Katrina

          Do you have a link to the thread, Ken? Would love to be able to keep up on this myself. Thanks!

          • Ken Hood

            Katrina- Everyone who follows this at the in-depth level are reading at least the blog post here: http://developers.facebook.com/blog/post/462 Good luck… to read every comment and comment (you have to expand them as you go) will take you an hour or more… so get a cup of coffee and settle in. :)

          • Ken Hood

            oh… make sure you are logged in to facebook to see the comments and replies (169 so far)

          • http://www.tourabsurd.com Katrina

            Thanks for the link, Ken. Eventually led me to a bug report about it.

            If you have a developer account, be sure to go vote up the bug report for this: http://bugs.developers.facebook.net/show_bug.cgi?id=15166

  • http://www.synergy.com.gr tony

    thanxx so much we start doing the same for our webpage http://www.synergy.com.gr πλαστικοι χειρουργοι θεσσαλονικη πλαστικός χειρουργος θεσσαλονικη and works great

  • Pingback: 10 étapes pour intégrer une Iframe App plutôt qu’un onglet FBML sur sa Page Facebook | Kriisiis.fr - Outils, Conseils et Actualité Social Media

  • Jay

    Thank you for this! I have set up my new app and installed it on my page. However, I have just a standard JPG that I have uploaded to Photobucket, I don’t have it on a HTML website – just the direct link to the JPG. How can I put the JPG image into the app, just for it to come up on my Welcome page tab on FB?

  • http://www.SocialMediaCG.com Dave

    Hi Paul.
    I was wondering if you’ve heard of a way for people not logged into Facebook to be able to see the new iframe Tabs? Here’s mine http://www.facebook.com/SocialMediaCG

    • http://www.tourabsurd.com Katrina

      That’s been my big question, too.

    • Eric

      HI Dave, it looks like you got your facebook canvas/iframe app to show up for people NOT logged into Facebook. Could you PLEASE share your secret, I can’t figure it out yet. Anything you can share would be great, thank you.

  • http://www.bluewavedesign.com Sandi

    Thanks so much for posting this. One of my goals this year was to learn FBML. Well, scratch that one off the list! :) I’m very happy that FB is switching to iFrames, and your blog post is a great place to start. Thanks for the info!
    Sandi

  • Jesse

    I do not see the Set up new App button??? I see apps on the left side but when I click more apps it wants to direct me back to my personal page rather than the FB business page https://www.facebook.com/lovepookieposh? Any suggestions? Im not trying to plug. I would actually like to make this work:) Thanks, Jesse

  • Pingback: The New Facebook Fan Page « Geeky Girls Marketing Blog

  • Elizabeth Hart

    Clueless…. (i.e., blonde) ::laffin'::
    I THOUGHT I followed everything correctly, but I’ve got nothin’….. help, help, HELP!! LOL
    This is all foreign to me but I’m thinking it MUST be simpler than I’m making it!
    If someone who knows what they’re doing with this could message me, that would be great.
    Thanks much!!
    http://www.facebook.com/ElizabethHartPhotographicExpressions

  • http://www.FreeTGRbook.com/KENMEAKIN ken from freeTGR.com

    We just have to move on and learn iframes

  • Lynn Self

    I am so not tech savvy. So most of this just sounds like gobbledgook to me. So far facebook has worked just fine for me. I don’t need more apps.

    • http://www.facebook.com/thehow2girl carol

      @Lynn this isnt a new app as such it is the new way for people to create default welcome tabs and other tabs within their facebook business pages and will replace the FBML tabs soon :)x

  • Pingback: Facebook is phasing out FBML | simpleonlinesolutions.info

  • http://about.me/mikedmcgee Mike McGee

    Hello!

    I have been looking through any and every article I can on how to build an app (a tab) for a non-profit page I am the admin of. You can view the link of the page I am referring to here – http://www.facebook.com/USEmpowered

    All the tutorials I have seen seem to be geared towards people who want to move information from their “websites” to Facebook.

    Our facebook page is separate from our website, so is it possible to create custom apps with coded content when those two entities are separate? I am getting tripped up at the Canvas URL lines, and I think that might be the reason why.

    I just want to make an app that I can edit on Facebook without having to deal with servers or hosting.

    If you can help in any way that would be great.

  • Mike P

    Thanks for the great writeup! I am able to serve html from the index file of a subdirectory of my web site (index.html), but when I specify a particular file (e.g. contents.php or contents.html) as the Tab URL, Facebook seems to be ignoring this. From server logs, it looks like FB is just requesting the directory from the Canvas URL and not the page from the Tab URL. Any ideas?

  • http://www.kristinepaulsenphotography.com Kristine

    Do you know what the max dimensions are for the content before it automatically creates scroll bars to hold it? (I tried inserting my main webpage which is designed to be horizontally rectangular – I selected to have it autofitted, but facebook appears not to be doing that, and instead is only showing me the web page within scroll bars.)

    Thank you, and thank you for this post! Very helpful!

  • Tim

    Everything seems to be working with the app I’ve set up.
    http://apps.facebook.com/vegasforeclosures/
    When I add the app to a page it will not show as one of the apps on the left of the screen. When I edit the page and then go into the apps, my new app shows on the list of “Added Apps”.
    Anyone know why it’s not showing on the page?

  • Mike Bailey

    Ecellent post thanks a million really clear and helpful for a complete non tecchie like me to be able to do this is great.

  • Maureen

    I’m also wondering why I can’t get my iFrame tab to display when NOT logged into Facebook. Does anyone know if this is a bug, or if its permanent?

    • Ken Hood

      Hi Maureen-
      This is a KNOWN BUG and here is the link: http://bugs.developers.facebook.net/show_bug.cgi?id=15166

      You (and everyone) should click the checkbox on the right side of that bug page and be added to cc list.

      Another major bug was new iframe tabs defaulting to 512 or less in width. FB says that’s fixed, but some still see problems. It may be caused also by the next “bug” that has not been acknowledged by FB (yet) to be a bug:

      The default height for new iframe tab is 800px. More than that, and you get a vertical scrollbar, which of course messes up your width.

      here is the infamous FB blog post where much (not all) of the discussion is occurring: http://developers.facebook.com/blog/post/462

      • Mika Tuupola

        800px is default height but you can adjust it. If you include JavaScript SDK in your tab code you get access to FB.Canvas.setSize() and FB.Canvas.setAutoResize() methods. Here is an example tab which is 5000px high.

        http://goo.gl/g4wnd

  • Pingback: 3 Must Dos when setting up a Facebook Business Page « Cedar Sage

  • http://nimbu.com.br/ Erica Mattos

    Thank you for this tutorial!

  • Pingback: Facebook: Convert your Static FMBL to iFrame – It’s not as painful as you think! | Vestor Logic

  • Adam

    Apologize if there’s an obvious answer to this question, but if I plan on creating multiple tabs (Welcome, Twitter, Tab X, Tab Y, etc.), would the app name be my page name and then I create multiple tabs under that app? That’s where I’m confused. I can’t just create an app named ‘Welcome’, right?

    • http://www.facebook.com/thehow2girl Carol

      hey Adam – this has probably been answered by now but you add an app TO your facebook page, then you name the APP whatever you want to name it ie: welcome

      You now create your welcome page that will display as the first page any new visitors to your facebook fanpage will see and you can add tabs to that page or whatever you want, images, video etc. when people say it is a page they mean it is a screen/page WITHIN your facebook fanpage (so a little like your fanpage is the whole book and the welcome page is the first page in the book, the rest of the pages, are yoru content, videos, updates, e-shop, notes, discussions etc – all nicely contained in the compelte book
      Carol
      The How2 Girl
      http://www.facebook.com/thehow2girl

  • NG

    Hello all,

    I’m finding several problems:

    1. Can’t reorder the tabs using the new page layout

    2. They don’t appear in the app section under the edit mode, so I can’t remove them!

    3. If you’re not logged in they are empty. (this should be solved by Facebook)

  • NG

    2. They don’t appear in the app section under the edit mode, so I can’t remove them!

    Fixed! Make sure you stablish the Canvas name :-)

  • Pingback: Facebook To Replace FBML with iframe Tabs for Pages « David Sullivan

  • Josh

    Has anyone else noticed a problem with this approach when visiting the page with HTTPS? I have the force HTTPS option turned on for my profile, but when I visit my page, no content appears. If I change the URL to HTTP, the content shows up as expected (when logged in). Any ideas? My server has a valid HTTPS certificate.

  • Pingback: Integrate Social

  • mark

    Hi folks,

    How do i re-order the tabs with new layout?

    Ive created a custom iframe tab as default landing page but when I click on my other tabs the browser window goes black…anyone no a fix for this?

    • http://www.paulkortman.com Paul Kortman

      This is lame, but to re-order the links in the new facebook page layout you need to add enough apps “tabs” to force the More link, (I think it’s 8 or more) when the more link shows up an edit link will show up for admins allowing you to change the order. Once you like the order remove the other apps/tabs/links to get it back down to the appropriate size/number.

  • http://www.tourabsurd.com Katrina

    My contents disappeared suddenly. That is, everything is still on the original site, but without changing any part of the app, nothing shows on the welcome screen now.

    https://www.facebook.com/tourabsurd

    Welcome tab links here: http://fbapp.tourabsurd.com/

    Did FB change something?

    • http://www.paulkortman.com Paul Kortman

      FB is always changing things… the best recommendation I have (since you pulled it down form your FB page is to setup a fake FB page and tinker with it there until it appears again. Then copy the settings (or add the app ) to your production/main page. Feel free to make me an admin of your fake page and I’ll see what I can do to help.

    • http://www.paulkortman.com Paul Kortman

      Also, could it be the https/http issue that Josh commented about 3 comments above?

  • Pingback: Aggiungere un Iframe in Facebook « Mich81.com's Blog

  • Pingback: from FBML to iFrame ‹ Vane Creative Studio

  • Timothy Mensing

    We made a free app that makes facebook iFrames in one step, with fangating + fbml conversion for current pages.Check it out here…

    http://on.fb.me/fuDF9E

    No subscribing or liking necessary.

    Feedback welcome & wanted!

  • Pingback: R.I.P. FBML, Hello IFrame | Michael Tucker

  • Pingback: Deal 80 » 10 étapes pour intégrer une Iframe App plutôt qu’un onglet FBML sur sa Page Facebook

  • Benjamin

    Very helpfull. Thanks a lot for the guiding.

  • http://webmarketersguild.org Web Marketers Guild

    You, sir, are my hero. Thank you for posting this. Itn’t couldn’t have been a more timely find as today I decided to use Static FBML and guess what day it is <-:

  • http://webmarketersguild.org Web Marketers Guild
  • Pingback: 5 Facebook Tips for Political Candidates

  • Hendrik Maat

    Hi,

    I think this tutorial was a lot of work. I hate to say, but why don`t you not use our free app “iframewrapper”, which does all the work for you and offers an iframe within minutes, fangate and multilingual pages included.

    Regards,

    Hendrik

    • Robert

      I can tell you why, You want 15 Dollar to place a small 16×16 pixel Logo. That is very expensive and so it is much easier to write my own app. To pay that money would be o.k. to delete the ad at the bottom but not for a own icon. This should be free.

      But your app is great and i used it for some customers ;-)

  • Betty

    hello I found a page that it teaches as to use the iframes in fan page of facebook know it http://fbsuperfanpage.com/fan/fanpage

  • andy

    Hi, i used a company to design my facebook page, http://www.iframepros.com
    cheap enough not to worry about doing it yourself.

  • Pingback: r2d2a « Mindless Chatter

  • http://www.systemacorp.com Troy

    You might want to check out our Facebook Page iFrame Tab app http://apps.facebook.com/pageiframetab for a quick and easy way to create a custom iFrame tab with Fan Gate.

  • http://www.career.vi Ashraf Raheem

    I have a business page build using iframe. it is running fine in Pakistan but when someone tries to open it from outside the pakistan. The iframe contents is not shown. Plz hekp me out.

  • Hendrik Maat

    Use http://www.iframewrapper.com, we have a lot of pakistan users.

  • http://www.justcustomz.com Lowrider Guy

    Hey, thanks for the great post!

    I have followed your instructions and now have a lovely events section on my FB page!

    Happy Days!

  • Sia

    Hi there,
    I have followed your instructions, and everything works except that it includes the home page rather than the intended page in the iFrame. Any Ideas/suggestion?

    Thanks,
    Sia

    • http://www.paulkortman.com Paul Kortman

      Sia, the key is the tab-url setting. Since I wrote this blog post they have changed the combination issue, you can now enter the full URL to the page you want to display as your iframe in the tab-url field. Give that a try, if it doesn’t work post here what you have set for your tab-url setting.

  • http://www.caninereview.ca Savladai

    Just tried to add an iFrame tab to our FB Page but can’t get past the “robot text”. It keeps giving an “oops this is broken” error. Any idea if this is permanent or just temporary?

    • http://www.paulkortman.com Paul Kortman

      do you have a link to the fb page and the page you are trying to pull in via iframe? — Facebook is not as stable as it used to be and we see glitches like this often. But they usually fix themselves in minutes to hours, unless its a settings issue.

      • http://www.caninereview.ca Savladai

        It took 5 or 6 days this time but they did finally figure out what the problem is and I have the iFrame working now.

  • Sam

    Hi,

    Is it possible to use this approach to redirect multiple facebook fan pages to a single facebook fan page.

    The same way you would redirect a website url using dns or javascript, etc.

    I’ve been struggling this one for a while. Is it possible?

    Regards,
    Sam

    • http://www.paulkortman.com Paul Kortman

      Sam, this method will not redirect from one (or multiple) Facebook pages to another. At this time that is not possible as far as I know.

  • Pingback: 10 étapes pour intégrer une Iframe App plutôt qu’un onglet FBML sur sa Page Facebook | Allomonsite.com

  • BigDogStudioX

    Thanks for posting the guide, I know a lot of people will appreciate this!

  • http://www.lovestation.com.au Love Station

    Thank you for shaering. I have a question, what kind of contents I can use for iFram tap? Is it possible to use my online shop index page? Thanks

    • http://www.paulkortman.com Paul Kortman

      Yes you can have just about any content you desire in an iframe page on Facebook. Including your shop content. I assume perhaps anything illegal in the US won’t be allowed, but outside of breaking the law your content will be allowed.

  • GregE

    I’m trying to create a customized app for my organization’s Facebook page using the iFrames method. I log in using my organization’s account. When I try to add the Developer app, though, I am told I must have a profile to do so. I’m also told that I can’t create one for my organization’s page.

    How I can can access this app? Do I have to use my personal Facebook account profile and somehow link it to my company’s page? Or must a completely different profile be set up?

    Any help is greatly appreciated.

    • http://www.paulkortman.com Paul Kortman

      Greg, simply make your personal account an admin of the Organizations page. Remember it is against FB’s terms of service to have multiple accounts.

      Facebook want’s you to do everything from your personal account. And this is possible and how the majority of brands (large and small) operate on facebook.

      Once your personal account is an admin you’ll be able to do what you need to.

  • Andrew

    thank you for this post! i’m new to facebook and have found their documentation to be extremely confusing. this helped a lot.

  • pinoytechhub

    I have been planning to create this landing page for my Facebook fan page and found this from Google. I will give it a shot thanks.

  • http://www.webzplus.com.au John

    Thank you for a great post, I set up the custom tab using these instructions and it works great – You can check out my custom ‘Welcome Page’ here – http://www.facebook.com/webZplus

  • Denish

    Is there any way we can add FBML tab to our facebook user profile in spite of facebook page. ??
    Please help me out here .

    • http://paulkortman.com Paul Kortman

      As far as I know there is no way to add iframes to a personal profile. That’s one of the key differences between a profile and a page.

    • carol

      Denish – no you cant add any fbml/iframe tabs to a personal page and really there is no need to as your personal page is just that – for personal connections nad communications and your busines page is for business where you want to be adding tabs – welcome pages – sales pages – promotions – your e-shop and more

      Carol
      better known as the How2Girl
      http://www.fb.com/thehow2girl

  • marko

    Hi! Very intresting this article but I tried to create a new app but FB ask me a credit card or mobile number … There is an other solution or is incorrect what I do ?

    • http://paulkortman.com Paul Kortman

      If you have an account at facebook and are logged in go to https://developers.facebook.com/apps click create app and you should be good. I’ve never had it ask me for a CC or my cell number. If it still doesn’t work let me know what country you are in.

      • Jill

        I have the same problem – they want my cell phone # or credit card… I’m in the US (New York). Any ideas? Thanks!

  • Pingback: CRE Outsider | Customizing Your Facebook Page

    • mark

      Hi Paul! Thanks for your reply but i have a old app and don’t have problem. The problem is when I try to create a new APP… :(

  • http://www.perfectdayweddingplanners.com Wendy

    Hi!
    I loaded an iframe to my facebook page, http://www.facebook.com/perfectdayweddingplanners however, I can’t get the photo to show and I am very confused! I am not tech savvy at all, was told the iframe was very easy to create labels such as giveaway, contact form, like button, etc…but when I tried to do a welcome page (want this as my landing page) it did not show the photo. I put them on photo bucket, which gave me the html code. It is an http. So then I tried amazon s3 and the https code they gave me didn’t work either. I am frustrated! I thought this was going to be easy so I can have a professional looking landing page. Can you help me see if I am doing something wrong? Thank you!

    • http://www.paulkortman.com Paul Kortman

      Wendy, First off, nice work, you’ve gotten much farther than the other non technical user out there in creating an iframe and getting your fb page connected to it.

      The issue you are having is in the link to the images, not that it’s on an iframe. here’s the first image that doesn’t show up: https://s3.amazonaws.com/wedding1/IMG_8298+edit+2.jpg when I try to load that link in a browser it fails with a authentication error. Is it possible this is not a public image?

      the second link: ../../WEBSITE/Photos/IMG_8298%20edit%202.jpg doesn’t work either for the same access denied error. (plus you are using relative links ../../ … which should be avoided… instead use: https://s3.amazonaws.com/wedding1/IMG_8298+edit+2.jpg (same as above)

      Let me know if this helps or not.

    • http://www.systemacorp.com Troy

      Hi Wendy,

      Try this http://apps.facebook.com/pageiframetab. We have FREE hosting of your Fan Gate images. Just upload your images from your S3 site and you should be all set. If you have problems just send me a message and I can help you.

  • Ken

    Thank You – Thank You – Thank You

    You completely simplified the crazy facebook instructions.

    I now have an iframe !!

    Question: I have the iframe page sorted as a landing page – But what I want is: “When some body clicks the like button – they are then automatically forwarded to my wall”?

    Is there a way?

    Thanks
    Ken

  • Laura Cunnigham

    how about steps for building an app on a Facebook page that requires a user to enter unique code (given to them in advance by the Facebook Page client, through email for example), and once they enter their unique code, they go through an authentication process. If code is correct, then they get access to the app and if not they get a rejection message. Thanks and you guys rock

  • Yuki

    Thank you so much! i have succeed making a new tab for my page!
    At first i was having problem on linking it to my website page, but after reading the comments i manage to solve the problem. about the tab url setting. Thanks again!

  • http://www.beaute-sante.ma Zouhir

    Thank you so much for that guide.
    I built my landing page and it displays. The issue is that the tag
    seems not to work. Meaning the same image displays for both connected and not connected visitors. Can somebody help? Fan page

  • Pingback: Add an iFrame Facebook custom Tab | Cybind's Blog

  • Katy

    This is a great tutorial!

    I’m just testing this out before building out my own iframe content. But I’m having a problem with the display. When I actually go to the app, it shows the iframe content, but on the actual ‘tab’ itself on the Page, there is nothing there.

    Thank you so much for your tutorial and follow up!

    • http://www.paulkortman.com Paul Kortman

      Can you visit your page url with https:// and http:// ? I’ve found that if you are unable to display an SSL encrypted (https) version of the page then Facebook sometimes throws and error, sometimes displays nothing at all.

      • Katy

        Hmmm. We have an SSL encrypted site (that’s what I supplied for both urls). It’s possible that some of the content within the iframe isn’t being delivered securely. Would that cause the same problem?

        • http://www.paulkortman.com Paul Kortman

          yes, without a doubt that could be the cause of your blank page.

  • http://www.caninereview.ca Savladai

    I’ve received a notice that my app needs to be upgraded to OAuth 2.0 and HTTPS by Oct. 1. I’ve read the information at http://developers.facebook.com/docs/authentication/ and can’t make head nor tail out of it. Is there somewhere I can find simple – “do this, then do that” instructions for upgrading the Welcome app on our FB page? Also, what do I do about not having access to a secure server? Do I need to host the iFrame on one or can this be done on a non-secure server?

    • http://paulkortman.com Paul Kortman

      You have to have a secure server… once you do and you put the https address into the iframe settings page you’ll be all set. Everything on the page has to be secured (css, embeded objects, and images)

      I have access to a secure server and can help for a fee… for more information email me at paul “at” paulkortman “dot” com

  • http://communitylinc.org Jill Owens

    This was an awesome tutorial but I have this problem too. I feel like an idiot, I’m not a web developing genius…but how would i fix this problem. I can see the tab perfectly when I use facebook in Google Chrome but not in IE. I can visit the url in Http:// but not https://

    How do i make it so everyone can see it if using https?

    • http://www.paulkortman.com Paul Kortman

      Hi Jill,

      You have to make sure the https:// works for your content that is being iframe-ed into facebook so verify that that content shows up in IE using the URL you put into Facebook for the secure content.

      Typically you’ll need to purchase an SSL certificate, although your webhost may offer another way using their shared ssl certificate.

      • http://communitylinc.org Jill Owens

        I didn’t see that you answered me before I posted that last comment, sorry :)

        I do website maintenance for a nonprofit i used to work for and also built several fbml tabs – converting to iframe has been a tedious task because of this SSL stuff. Apparently we aren’t secure! So I’ve contacted the nonprofit to contact their support. I hope that works!

  • http://communitylinc.org Jill Owens

    Do I need to talk about our web hosts about our server not being secure?

  • http://store.onlinebizsoft.com/ Magento Exension

    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/

  • gowmukhi

    Hello
    I am writing an app for a page tab. I do not to make the app publicly searchable in Facebook i.e I do not want the app name to appear under apps search for public. But I want the page tab to work. How do I do this?

  • gowmukhi

    I removed the \App on Facebook\ part and it worked.

  • Dana

    I would like to recommend you about simple site that Create a custom iFrame Page: http://www.myfbfanpage.com

  • Dana

    There in no option to change default landing tab. I want my app to show up with the page tab at the top. How can I do this?

    • http://www.paulkortman.com Paul Kortman

      Dana, This is an older post and with the new Timeline rollout there is no longer an option to have a default landing tab, users will land on your timeline … unless you use a link to send them to the url of the app you have (facebook ads, google ads etc can all be directed to a specific URL for your iframed content)

  • Pingback: Face book Tips for Political Candidates/Aspirants | my Aspirant my Leader Blog

  • Pingback: Make a Facebook Page | How to Make a Facebook Page | Facebook Fan Page

  • Lance

    cool

  • Pingback: 10 étapes pour intégrer une Iframe App plutôt qu’un onglet FBML sur sa Page Facebook - Kriisiis.fr - Social Media Trends