Contact Us
  • Static FBML and Facebook's Move from FBML to iFrames – Views from the Experts

    UPDATE – March 30, 2011: The Static FBML app can no longer be added to Fan Pages. Existing Static FBML tabs can be edited, but new tabs can’t be created.

    For our Final Word on Static FBML (June 16, 2011)….

    The news rippled through the Facebook developer community — Facebook is phasing out FBML, its proprietary mark-up language that facilitates communication with the Facebook Platform API (“Application Programming Interface”).

    What will this mean for Static FBML, Facebook’s application that allows users with little coding experience or expertise to create custom tabs for their Business Pages?

    And what will it mean for a thriving class of FBML Entrepreneurs, many of whom knew very little about Web coding a year ago but, because mastering a small subset of HTML and FBML tags isn’t exactly rocket science, have been able to build and market to communities of followers who know even less?

    In this article, I will explain the change and clarify some of Facebook’s confusing terminology.

    Also, I posed some key questions regarding this change, how it affects Static FBML, why Facebook is making this change, whether or not it’s a good thing, and what developers need to know and do to adapt to the change. Read the responses of our esteemed Panel of Experts!

    Facebook Drops the First Shoe: Use iFrames, Not FBML

    In early 2010, Facebook advised on its FBML page:

    Note: We do not recommend FBML for new developers. If you aren’t already using FBML, you should instead implement your application within an iframe, using the JavaScript SDK and social plugins for client-side integration with Facebook services. The one exception: if you absolutely must create an application that appears as a tab on a Facebook Page, you will need to use FBML for now; tabs do not currently support iframes directly. We will be transitioning tabs to iframes later this year.

    I know that I found this advisory a bit confusing. Facebook always offered two “flavors” of custom application, FBML and iFrame, so why would they tell you not to use FBML?

    The Other Shoe Drops: No New FBML Apps After 2010

    Well, on August 19, 2010, Facebook posted on their developer blog:

    We are also moving toward IFrames instead of FBML for both canvas applications and Page tabs. As a part of this process, we will be standardizing on a small set of core FBML tags that will work with both applications on Facebook and external Web pages via our JavaScript SDK, effectively eliminating the technical difference between developing an application on and off Facebook.com.

    We will begin supporting IFrames for Page tabs in the next few months. Developers building canvas applications should start using IFrames immediately. By the end of this year, we will no longer allow new FBML applications to be created, so all new canvas applications and Page tabs will have to be based on IFrames and our JavaScript SDK. We will, however, continue to support existing implementations of the older authentication mechanism as well as FBML on Page tabs and applications. [Emphasis added.]

    What are iFrames and Why the Change?

    An iframe is an inline frame, an HTML structure that allows another HTML document to be inserted into an HTML page.

    With an iFrame canvas application, the content of your application is located in an HTML document that is NOT hosted on Facebook’s servers. Rather, the content is pulled into the Facebook “chrome” (all the graphical and content that surrounds the content of the application — the header, the right column with ads, etc.) via the iFrame.

    Most developers believe the external hosting of app content is the primary, although not only, reason for the move away from FBML.

    Aren’t iFrames Already Supported for Custom Tabs that use an iFrame Canvas App?

    What Facebook means about iFrames not currently being supported in Page tabs is that on a Page tab, a user action (usually a click) is required in order to load the iFramed content (an external HTML file). So, I assume that “in the next few months” Facebook will no longer require the user action to load iFramed content in custom tabs. (Remember, these are “Facebook Months” which can translate into much longer periods of time!)

    iFrames? Canvas Applications? Custom Tabs? What’s the What?

    My colleague Tommy Inglis of BrandCraft Inc. explains the differences:

    A canvas application describes an application like Farmville or Mafia Wars. The application lives on the Facebook Platform and usually requires a user to “Allow” the application to use their information to operate.

    A canvas application is viewed on a Canvas Page which has its own URL distinct from a Fan Page URL.

    A custom tab is a tab (on a Fan Page) in Facebook’s top blue-tabbed navigation that isn’t the Wall, Info or other Facebook generic tab.

    A custom tab has a maximum allowable width of 520 pixels.

    Canvas applications, when viewed on their application URL, have a maximum allowable width of 760 pixels. When added as a tab on a Fan Page, the maximum allowable width is 520 pixels.

    The Pros Answer Some Questions about What It All Means

    I posed some questions regarding this upcoming shift to some individuals and companies that are in the Facebook application space, developers and “entrepreneurs.” Their responses provide an in-depth view of the Facebook application landscape as it appears today, and where it may be heading.

    Click the questions to see the responses »

    Contributors to the Q & A

    Zach Berke is founder and CEO of Exygy, a San Francisco company that develops custom applications for Web, mobile, APIs, WordPress, Facebook, and more, for startups, social-venture and corporate clients. Prior to joining exygy, Zach was responsible for the development of high-traffic, public-facing websites for the FORTUNE Magazine Business Leader Council.

    Joanna Carrero is Creative Chief at Likeable, a social media marketing agency leveraging social media to create more transparent, responsive and ultimately more likeable companies, organizations and governments. Joanna has managed the creative process behind social media marketing for clients like 1-800-FLOWERS, Cumberland Farms, Omaha Steaks, UNO, Stride Rite, and Entenmann’s.

    Dominic DiMarco is Director of the @214apps team at Room 214, a social media agency that develops custom Facebook, dashboard and mobile applications.

    Hazel Grace Dircksen has been using and working on social networking sites for the past 8 years from Friendster to Facebook and everything in between. She founded the Facebook services company, Socialbees, after being an official Facebook Platform launch partner and debuting her first application at Facebook’s F8 conference in 2007.

    David Ginsburg is Hector’s chief strategist and tactician, as well as a Social Media geek who doesn’t understand why everyone isn’t spending 16 hours per day participating in the Social Web. His background in radio promotion and programming provided a strong foundation in how to build, engage and sustain an audience-exactly what marketers everywhere are trying to do with Social Media.

    Tommy Inglis is responsible for research and development at BrandCraft Inc., a social media design and development think tank.

    Nathan Latka is known as “The College Entrepreneur.” He has created a number of social-media-related businesses. After getting several requests for “fan pages” he taught himself FBML and now works with his community at Fan Page Factory providing customized fan pages to his “clients” (Nathan prefers to call them family).

    Mary McKnight is the Consumer Marketing Director at Where.com, a leading mobile ad network. She has formerly served as an Online Marketing Director for an EMI Music label and her consulting company, Sacrilicious Marketing, provides Facebook Development as well as reputation management and online marketing to celebrities, musical artists and consumer brands.

    Chris Treadaway is Founder and CEO of Lasso, a local business marketing platform that is sold by partners at local newspapers, major technology companies, and major corporations. Previously, Chris was Group Product Manager of Web Strategy at Microsoft, where he was responsible for the company’s Web 2.0 marketing and messaging to developers. He is the co-author of Facebook Marketing An Hour a Day which was released by Sybex on May 3rd.

    David Turner is the Technical Lead at BrandGlue, a social media consulting company that focuses on converting Facebook users into a listening audience for your brand. Intel, Mint.com, Kiva, 99designs, and the Washington Redskins love what we do for them.

    Bill Warren is a writer and business owner. When he is not running the Custom Fan Page Help Center, he builds custom fanpages for a few of his friends and fans.

    If you would like to share your thoughts, speculations or opinions on Facebook’s recently announced changes, please comment below!

    Comments

    1. Whew, Tim – this is incredible!! Awesome roundup of expert opinions and helpful ideas. The main thing for the myriad DIY’ers out there, they’re worried that anything they create now will have to be re-done when the change over to iFrames becomes official. But, you’ve confirmed here what I’d read too and that is Facebook will continue to support any iterations of FBML up until the point they make the switch entirely.

      • You’re correct, Mari. The consensus, hands down, was that Static FBML will be around for quite some time. I do feel they’ll whittle down the number of available FBML tags to the essentials. And I would imagine that, sooner rather than later, they’ll not allow the addition of Static FBML app to Pages anymore. Then they just let FBML fade away. So I think folks are “safe” creating their custom tabs with Static FBML.

    2. Thanks for including me in this! It was a real honor! What great answers from all the participants – I always take always something new and useful from the group here!

      • Thank YOU, Mary, for your insights. Your opinions were spot-on, particularly regarding the SEO implications of iFrames. I even updated the “Takeaway” to the “Is this a good move” question to include more about the SEO implications. So thanks for that!

    3. Ian David Chapman says:

      Thanks Tim for an enlightening and detailed post. I also agree that static Fbml will be around for a while to come, just like Facebook have kept groups around long after they castrated their newsfeed access. I am sure they will end up doing a similar thing with the static Fbml app, probably burying it and making it impossible to find

    4. Tim, This came out great. I love reading the valuable information and insights you so generously provide. Thanks for including me among the industry insiders quoted here – what an honor!

    5. Hey Guys,

      Thanks for posting about this. As I mentioned on Twitter, there are unfortunately affects on SEO if the iFrame is adopted.

      Search engines do not crawl content within an iFrame, so therefore those anchor text links you currently have on your FBML tab will now not be crawlable and therefore no search engine value will be passed.

      The advantage as Mary said, is that you will be able to produce much better pages than before, but Facebook have to be careful.

      I remember Squidoo used to allow you to include an iFrame module. I used it for my optin form. They then removed the ability as malicious content can be placed in the iFrame. We’ll see how this pans out.

      In the mean time, get as much SEO value as you can from your FB page. Have the landing page to non fans as a custom tab and where possible have anchor text links, so the search engines can pass value.

      The search engines wont index many of the tabs, so give it what it needs right up front.

      Hope that helps!

      John

      • Thanks John. Good points. I actually don’t think it’s so cut and dry as to how Google or other SEs will handle Facebook iFramed content. Google is fairly ambiguous about how it deals with iFrames, as indicated on Webmaster Central (“Google tries to associate framed content with the page containing the frames, but we don’t guarantee that we will.”).

        And then Facebook is a special case and you never know what arrangements this Big Players will make with each other. Of course, for Google I would assume this is all in the service of providing relevant search results.

    6. Wow Tim, as someone who is trying to launch a small business, geared for small business; you have provided not only great information, but insight.

      I had just started to work with FBML, and I was tracking all of the issues and announcements regarding it, and frankly, it was a lot to digest. The information that you provided is the push I need to learn Facebook application development and broaden my knowledge / skill base. Thanks for the guidance!

      • Thanks for the kind note, Bob. This article helped ME as much as anyone else, get my head around this stuff. Facebook’s always maddening lack of details creates a perpetual fuzz of ambiguity….

    7. Tim… this was awesome. It’s everything I’ve come to expect from you… and then some.

      The detailed analysis and especially the “congress of the experienced” that you pulled together really has put my mind at ease.

      As you know, I am one of those “amateur coders” who is ok at html and css, but pretty rough when it comes to advanced coding. I will follow the advice given and start putting in the hours with canvas apps and iframes, and try to follow the new changes as you announce them. I’m glad you are there… this is indeed a new opportunity for you, as Facebook will require better coding skills to allow social media managers to deliver the goods to their clients. :)

      • Thanks Ken. And I’ll be posting some help. I already posted a tutorial on creating a Facebook iFrame FBML application.

        But the fate of certain current requirements for iFrames — FB requires a “user action” to trigger the iFrame to load — is still just subject to speculation, as Facebook has only promised changes, but no details.

        • Thanks for the link… I think I had missed that. And I know… buyer beware with Facebook… whatever I learn this weekend can change next week. :)

        • Hi Tim,

          I’m not sure if this is relevent or not, but I’m trying to add a like button to my fan page video that I embedded. The code i’m finding on the developers facebook page starts with iFrame, but when I paste it into my fbml tab, nothing shows up.

          Thought you might have a reason why this is.

          Thanks again, really appreciate all your posts above as well.

    8. Exactly HOW is the off-Facebook-hosted html document “pulled into” the Facebook “chrome”?

    9. I cannot figure out how to add a custom tab from a canvas application anymore. It appears that facebook has turned off the feature for new canvas (custom) tabs, although old tabs are still showing up on fan pages that already had them.

      • Where are you getting stuck? Facebook hasn’t “turned off” adding canvas apps as a custom tab to business pages.

        I assume that for in your app settings, you’ve set:

        Facebook Integration > Profile Tabs > Tab Name

        Facebook Integration > Profile Tabs > Installable to?

        If those are set, and you go to the app’s “Application Profile Page” you should see “Add to my Page”.

        When you click “Add to my Page” you should get a pop-up dialog window that shows the Pages you admin, and you can select the Page you want the app added to.

        If this all happens, then when you visit the Page and click “Edit Page” you should see the app listed under applications.

        If you’ve done all this, or any part of this fails to occur, I’m not sure what you’re doing wrong.

        • Thanks for being so prompt. I’ve gone through all of the steps you listed. Interestingly, today I can’t even add a new canvas application. It errors out. Yesterday, even after following all of your steps, the application would appear associated to my fan page, but it wouldn’t give the option to make it a tab and it didn’t show up automatically. I think with their recent changes, Facebook is ironing out some bugs, but it’s too bad as it damages our release schedule (yeah, pretty dumb to try to have a release schedule built around such a fickle platform)

    10. Wow Tim what a read, and have learned a quite a bit!
      i remember making a welcome tab on my fan page and found it incredibly confusing making the html for it! basically all I wanted was a cool background my youtube vid and an aweber optinform on mine! eventually after spenind many hours on dreamweaver and photoshop as well as loading it up to my server! then getting the code from between the tags I got it perfect looking and was very proud of my wooden looking facebook welcome tab on my fan page!
      So what happens a few months later facebook shrink the size and its all out of sync now so was not a happy bunny as have forgotten how to do it again.
      great post buddy!
      Confused in Sutton.
      -Phillip

    11. I don’t know if anyone can help me here. I would greatly appreciate any info. I’ve been trying to use sprites to create three buttons on my landing page that have hover states. I finally thought I cracked it, but come to find out my code is only working in Firefox and no other browser. If anyone knows what I might be missing or a better way to create some simple buttons in fbml that would be awesome.

    12. Hey Tim – since you posted this ages ago I have no idea if you still browse through here, but I have a quick question.

      I wanted to ask if there is a difference between FBML and STATIC FBML – when making applications FBML is still mentioned, so if my thinking is right would that no longer be the case once the iFrame thing is concrete?

      • FBML (Facebook Markup Language) is a markup language developed by Facebook to allow users to add interactive elements to their Fan Pages. Static FBML is an application created by Facebook that allows for a limited set of FBML tags to be used to create custom tabs on Fan Pages (aka Brand Pages).

    13. Hey Guys,

      Looks like we’ve already been hit by this (load of c**p) that is FB (and their weird, whimsical ways of “pulling the rug from under our feet” as and when they wish).

      Has anyone else noticed that you no longer have the option/link to “add another FBML tab”?

      This happened to me y’day AM….just as I had decided to add around 10-15 “dummy/blank” tabs to my fanpage, for future use, and just as a safety measure (incase FB decided to remove the functionality overnight).

      I added around 4 tabs and then took a break for lunch, expecting to get back and add the others.

      No prizes for guessing what happened next. Yep, the link to “add another FMBL tab” was no longer available….no mater what I tried or where I looked.

      Now, the worst part is that there seems to be no alternative solution already put in place (or at least I’m not aware of one) that will allow us to build custom FB fanpages.

      As luck would have it, all of this happened to me just as I was about to launch/market my own fan page and then start building similar ones for my clients.

      If anyone knows of/hears about a workaround/alternative solution that would be great.

      • Gerard, My experience has been and still is that the Static FBML app on your fan page will support 10 tabs max. If you’re not seeing the “Add another FBML box” link (which is at the bottom of any FBML tab editing page, after the FBML box) after 4 tabs, I’m not sure what to tell you, but I can speculate that it’s not a Facebook change of policy, but maybe just some buggy behavior. You might try logging out then logging back in and taking a look. Sorry!

    14. Thanks Tim!

      I wasn’t aware of the 10 tab limit…and perhaps that’s exactly what the problem may be….since, (and I didn’t make mention of this fact in my earlier post) that I already had a couple of tabs in place, before I started down the path of adding another 10 or 15 tabs.

      Ok, so I guess I’ll have to find a way of working with the 10 tabs then.

      Later.

    15. Tim,

      Aside from the Facebook Developer forum, what are some other sources for people to learn about creating tabs with iFrames?

      John

    16. Hey Tim,

      Great article, as usual! You know, I can’t help but think that using iFrames, and the potential that they won’t be picked up by Google so well, isn’t part of Facebook’s overall strategy to nudge into the search space.

      It sure would be easy for Facebook to index all of the content on those page tabs, and of course cross-reference it user/profile data of fans, page owners and app developers, etc.

      I bet that would make for some relevant Facebook SERPs that Google just couldn’t touch externally. And, as more and more businesses/orgs create FB pages with unique, custom app content, so will the public want those more relevant SERPs — They’ll never have to leave FB.

      Just a hunch… what think?

      -Mark

      PS I wouldn’t blame them one bit – this is going to be a BIG battle, even though FB says they aren’t, ahem, “after” Google. ;)

      • You know, I was just discussing this today, the viability of FB Search somehow impinging on Google’s territory. I think Google’s algorithm for identifying quality & relevant content results in vastly more valuable SERPs than any results I’ve gotten on Facebook. Perhaps in some dim future the content of Facebook, and the ability of Facebook to figure out what you’re really searching for, will make it comparable to some of the weaker search engines, but I do think that Google, particularly with real-time search getting better all the time, is just a better search engine.

        I think it more likely that the next biz to feel FB’s hot breath on its neck will be PayPal. There’s no Facebook payment system, so merchants have to create storefronts and try to maintain the illusion of it all happening right on Facebook even though the final transaction is done via PayPal or someone’s merchant account.

        Whatever the case, it’s certainly interesting to observe, eh?

        Cheers!

        • Oh yeah, I totally agree… but that’s right now. ;) If they ever could nail down better FB SERPs, they might have something, but I agree that they are nowhere near now – just thinking they might like to be in the future and so may be slowly engineering things so they have more control of the content.

          Yeah, they’re going to have to work hard to replace PayPal also – I don’t see much value in the current implementation of FB Credits… yet.

          I’m looking at a new service now that may help bridge the gap by providing an advanced eComm video player, with a cart, store, donations and digital media delivery on the back-end. This could be a full solution (via a custom FB app) to the current fractured stores on FB now. It’s too new to tell – they’re just signing up founding affiliates right now.

          http://on.fb.me/AMuQast if you care to have a look (my FB page). :)

          Cheers,

          -M

    17. Can anyone plz tell me how the twitter feed is done here.

      http://www.facebook.com/HYPERARTS#!/HYPERARTS?v=app_126026510774735

      Thank you.

      • The “HyperArts” tab is an FBML canvas application. You can pull in RSS feeds via PHP with canvas apps because canvas apps support dynamic content. Static FBML, being “static”, doesn’t support dynamic content so you can’t pull in RSS feeds using Static FBML.

        • Thnx for the quick reply.

          So first i have to setup an application for this. But my question is I have an application, and i have selected iFrame for the canvas page(there are two options in canvas page 1. iFrame 2. FBML) . But the problem is when i add this application to my page. It shows that it doesn’t support IFrame. If you have any tutorial regarding this please help me.
          Thanx a lot for the reply.

          Regards
          Arefin

    18. Hello,

      I am new to facebook development (more of a java background) and I am currently in the early stages of building a new facebook App

      So is the recommended best practice going forward is to build new applications using iframes instead of FBML?? Can’t use any FBML at all??

      Please advise cuz i am a little confused…the book I am reading swears by FBML (but the book is a few years old) so it does not account for the fact that Facebook itself is moving in an iframe direction now.

      • If you’re reading *any* book about FBML it’s out of date before it even gets printed! Certainly Jesse Stay’s O’Reilly book is way out of date, although it can still be used for more general info. FBML canvas applications are very soon being terminated, and only “iFrame” canvas apps will be allowed for developers. As for FBML itself, you might read my article on the Future of Static FBML which contains links and info about Facebook’s plans for FBML.

      • Thank you timware!…for your clarification.

        I’ll follow the “iFrame” approach going forward and won’t use FBML at all.

        Thanks,

    19. I’m one of those DIY-er, micro business types. After messing with this a little, it seems to me that there is one huge implication for iFrames (perhaps I missed it in the discussion?). With the FBML boxes, I can have links that take people to my website pages. With iframes, links keep people on Facebook where 520 pixels dont’ work well for displaying a website. There is plenty for FB to gain from keeping people on FB. Also, be careful, it seems if you hit “hide” for an FBML box with the new format….that really means it is deleted….and your options are reduced go forward.

      • Add the following parameters to the <a href=”” /> tags (link tags):

        “_blank” (open link in a new window or tab)
        “_parent” or “_top” (replace the Facebook page you’re on with link)
        “_self” or no target parameter (open link within the iframe)

        Example:
        <a href=”URL-HERE” target=”_self”>link text</a>

        or

        <a href=”URL-HERE”>link text</a>

        opens the link within the iframe. Whereas:

        <a href=”URL-HERE” target=”_blank”>link text</a>

        opens link in a new window or tab. And:

        <a href=”URL-HERE” target=”_top”>link text</a>

        replaces the page you’re on with the linked page.

      • And, yes, it does appear that if you “hide” a Static FBML tab via the Edit screen below the left-column links, it’s actually deleted and can’t be restored.

        I think it’s the difference between hiding an *application* which can be added back, with its data, via the “Edit page > Apps” screen. But deleting individual Static FBML tabs just deletes them, period!

    20. Bob- great questions… I was just getting to that point in my own testing world…

      Tim… glad you were there with the answers so quickly… this is dev/testing weekend with lots of Sumatra coffee :)

    21. Much like everyone else, I’m trying to adjust to the new iframe change. I did your tutorial on adding iframe applications to your fan page but I’m not seeing how I would be able to add multiple custom facebook tabs other than creating another application. Is this correct or there another way?

      Thanks!

      • No way around it. One tab per app. Of course, setting up the apps takes about 5 minutes, so it’s only a little bit more work.

    Trackbacks

    1. [...] this detailed article on the future of Static FBML and FBML, which includes the opinions of a number of expert [...]

    2. [...] documentation for fb:share-button indicates to me that at some point it won't be supported. Facebook is in the process of nudging developers to use XFBML and not FBML. It may be supported for years, but no one outside of Facebook really [...]

    3. [...] And, BTW, Static FBML should be supported for quite some time, perhaps years. Read Expert Speculation on the Future of Static FBML » [...]