Contact Us
  • Static FBML Browser / User Agent Detection with the fb:user-agent FBML Tag

    Static FBML Browser User Agent DetectionAs with general Web coding, when dealing with CSS and Static FBML, you have to take into account how different browsers render your HTML and CSS, particularly with Internet Explorer.

    Because you can’t put the standard browser-detection scripts in your Static FBML box, as those methods require access to the <head /> tag, how can you detect the user-agent (browser) and provide unique content (particularly, a different stylesheet or styles) so your custom tab renders properly across all browsers and platforms? The answer: fb:user-agent.

    Browser Detection with FBML — fb:user-agent to the Rescue!

    As I’ve noted on another post, you must use an external stylesheet for your CSS to work with Internet Explorer, using the <link /> tag.

    Static FBML Stylesheet

    If you need to have special CSS that addresses, say, an Internet Explorer CSS bug, you can create an IE-only stylesheet and link to it. Using the fb:user-agent FBML tag, you can call this stylesheet and only the targeted browser(s) will see that <link /> tag.

    For example, if you need special CSS for just IE 6 and IE 7:

    <fb:user-agent includes="ie 6,ie 7">
    <link rel="stylesheet" type="text/css" href="http://www.my-domain.com/ie-6-7-only.css" />
    </fb:user-agent>

    Only IE 6 and IE 7 will see that <link /> tag and that CSS file can have styles that overwrite the general stylesheet styles of the same name, thus accommodating Internet Explorer’s often-lamented non-standard CSS implementation.

    To target all Internet Explorer versions:

    <fb:user-agent includes="ie">
    <link rel="stylesheet" type="text/css" href="http://www.my-domain.com/ie-only.css" />
    </fb:user-agent>

    There are other examples on Facebook’s page on the fb:user-agent FBML tag.

    Make Sure You Call Your Stylesheets in the Correct Order!

    If you use the above method to link to additional, browser-specific stylesheets, make sure you call them in the right order.

    Most likely, you’ll want to call the general stylesheet first, followed by the one that creates browser-specific rules that overwrite the same rules in the general stylesheet.

    Static FBML Browser Detection fb:user-agent

    The most important thing to remember is that as the stylesheets are loaded, style rules in the next stylesheet will override the rules in the previous stylesheet, if they have the same name.

    Being able to detect what browsers are viewing your tab and tayloring your CSS to accommodate those browsers is essential to Web coding, and the fb:user-agent FBML tag is the ticket.

    fb:user-agent Can Do Much More

    You can also use the tag to display any content for specific browsers, or to exclude specific browsers. But browser detection seems the most useful application.

    Comments

    1. Hi Tim,

      thanks for the tip.
      Wonder if plain old IE conditional comments would also work (or may those get stripped by FB parser?).
      Of course, those are just useful for serving IE its own medicine, whilst the fb:user-agent tag seems to be powerful, as it can be used to detect different UAs.

      And now, a second set of comments and questions:
      Today, I visited Hyperarts (last time it was like two months ago), and find a bunch of new, great articles about Facebook, FBML, Static FBML, etc.
      And that’s what have confused me a lot.

      Wasn’t it supposed that Static FBML was going to be phased out and transitionally replaced by other method? (app canvas, what else?)

      Is it still valid/possible to add the Static FBML app to create custom tabs? Your “Comprehensive Static FBML Troubleshooting Guide” seems to confirm so.

      If so, is it still advisable to create custom tabs using the Static FBML app? Won’t it be better to just “let it go” and start clean, future-wise, using a canvas app (iframe-based) as a tab?

      (Of course, I understand that the canvas app still has the limitation of having to be clicked once to be properly displayed to visitors, correct?)

      • Julian, Currently, and particularly considering Facebook’s restrictions around iFrames, it’s probably advisable to use Static FBML for simpler, non-dynamic, tabs, and iFrames for canvas apps, although Facebook still requires the user to click an image or text to load the iFrame, a restriction which they say in plan to eliminate in “Q4” but which is still in place.

        The consensus among developers is that Static FBML will be around and supported indefinitely.

    2. Hello. I’ve been googling for hours trying to get the hang of this FBML. I just have a few questions, hoping someone could answer them.
      My goal: I want to make everything hidden (except for my Default Image) on my facebook page, until someone “likes it” then they can see everything.

      Is this possible? To hide the tabs, info, friends, wall, etc?

      Could someone look at my page & possibly help me out with the coding? I can’t seem to understand it, how it works to hide certain things? I’m lost. Appreciate any help! Thanks a bunch

      FB Page: http://www.facebook.com/pages/AquariZ/173482339337872

      • You can hide content on tabs, with the fb:visible-to-connection FBML, but you can’t hide the tabs themselves, other than have them below the “>>”. This blog should provide plenty of guidance in terms of learning FBML. The key is to practice. I don’t have the bandwidth to provide support services.

    3. hi,
      first i want to say thanks so much this blog has been so helpful!

      but i have a question that i cannot find the answer for. i’m using a static fbml and just have a simple font size change that works perfectly in firefox but when i open it in IE it stops working actually it makes the text bigger when it should be smaller. here is the code, it goes at the bottom of some other stuff which all works fine. it’s just this one little chunk. any ideas? im completely stumped.
      thanks so much

      <br>
      <br>
      <br>
      <br>

      <font size=”1”>TEST ftygdsy gds ygdsygdsy gdsygdsygds ygds ygdsygdsygdsygdsyg dsfdk mmm mmmmm mmm mm m mmmmmmmmmm mmm mmmmmmmmmaporjgm pamjrs;lrejk hgl;dffmgehrgbskdjfoeirh goierhfgoesihfoewijrog</font>

      • Well, Tory, all bets are off using the <font> tag. That one is deprecated and has been abandoned by Web developers. If you want to set a font size, use a modern method with CSS:

        <div style=”font-size:1em”> …. </div>

        you can use decimal increments of font-size: .5em, .8em, etc.

    4. Hello,

      Since the fbml tag “restricted-to” has been deprecated, you can detect visitor location/language on your facebook page by creating a little application that takes 10 minutes. Everything is explained here: http://www.devquotes.com/2011/03/20/how-to-create-a-facebook-page-dynamically-translated/

      Hope this helps!

    Speak Your Mind

    *