Contact Us
  • Static FBML & Internet Explorer 8 – Use External Stylesheets, Not Inlined

    As many of you have probably noticed, viewing Static FBML tabs with Internet Explorer 8 is now a rather painful experience IF you inlined the styles with the <style> … </style> tag instead of having an external stylesheet called with the <link rel=”stylesheet” text=”text/css” href=”URL TO STYLESHEET” /> tag.

    If you call an external style sheet via the <link> tag, then IE 8 is happy and will display your tab as dictated by the styles in the stylesheet. This is a problem on Facebook’s side, as nothing changed in the past few days with IE 8 and Facebook is constantly fiddling with their API.

    This current problem underscores the importance of using external stylesheets for your Static FBML tabs instead of inlining the styles.

    NEW: Read our tutorial on creating and hosting your external stylesheet, using Google Sites!

    There is a bug report on the Facebook Bug Tracker #11683, but no one from Facebook has commented there.

    The solution, as discussed in my earlier post on using external stylesheets with Static FBML, is to NOT inline your styles, but use the <link rel=”stylesheet” type=”text/css” href=”URL TO STYLESHEET”>. Of course, you have to put your CSS styles in a text document with the extension “.css” (and DON’T include the <style> </style> tags!). Besides the current situation, where IE 8 simply isn’t rendering styles inlined with the <style> … </style> tag, background images called from inlined styles are often displayed incorrectly.

    You’ve changed from inlined to external styles and your tab’s display is still broken in IE 8?

    If you changed from inlined to external stylesheets and your Static FBML still appears broken, try incrementing the number we’ve recommended in the past to refresh Facebook’s cache. Use:

    <link rel=”stylesheet” type=”text/css” href=”http://www.your-domain.com/your-stylesheet.css?v=40.0″ />

    The “?v=40.0” appended to the end of your stylesheet file name forces Facebook to refresh its cache. In the above example, I have intentionally set it high (usually you just start with 10.0) just to make sure. Every time you modify your external CSS you need to increment that number to refresh Facebook’s cached version of your stylesheet.

    If you’re switching from using the <style> … </style> tag to inline your styles, to calling your external stylesheet via the <link> tag, then I would strongly recommend using the “?v=”40.0” method to emphasize the change on Facebook.

    Comments

    1. Thanks for the heads up on this…now to fix all 20+ FBML’s…:(

      • Yup. Always an adventure with Facebook. But I’d stick with external stylesheets even though Facebook’s hosting server occasionally, um, takes a breather :).


    2. <fb:fbml version="1.1">

      <!--link to an external css file ">

      <link href="http://combatlondon.co.uk/facebook/hcarefbpage.css?v=40.0" rel="stylesheet" type="text/css" />

      <!--html starts|>

      • What is “<fb:fbml version=”1.1″> doing in there? And hopefully the above code isn’t how you’re really commenting stuff out! Commented-out text in code should look like this: <!– content that is commented out –>

    3. Now we have to write inline style only? for each fbml.

    4. Thanks very much for this. I use Firefox and I always forget to check IE to see if looks the same / similar.

      Your instructions were spot on!

      I keep telling people in my field (Continuing Education) who want to do more with Facebook, that you just have to do it. I’m no programmer, and if I can figure this out, my colleagues can do it too.

    5. My code looks like this right now:

      Doesnt take the stylesheet. Works fine with an inline stylesheet in other browsers.


    6. <fb:fbml version="1.1">

      <link type=”text/css” href=”http://marketingindia.net/smm/fan_nonfan.css?v=40.0” rel=”stylesheet” />

      <div id="wrapper">
      <fb:visible-to-connection>
      <img src="http://marketingindia.net/smm/imsocial/welcome2.jpg">

      <fb:else>
      <div id="non-fans"><img src="http://marketingindia.net/smm/imsocial/welcome1.jpg"></div>
      </fb:else>

      </fb:visible-to-connection>
      <div>

      </fb:fbml>

      • Hi Pareen. First, remove the open and closing <fb:fbml version=”1.1″> and </fb:fbml> tags. They shouldn’t be necessary, and even if they were, you’d definitely put the <link …> tag before the opening <fb:fbml> tag!

        Also, change that opening <div> tag after the closing </fb:visible-to-connection> to a CLOSING </div> tag!

        And all should be well, across browsers and platforms.

        Your URLs and stylesheet looked fine.

    7. Hi, Thanks a lot for help.

      I changed the div to closing but still its not working:

      <link type=”text/css” href=”http://marketingindia.net/smm/fan_nonfan.css?v=40.0” rel=”stylesheet” />

      <div id="wrapper">
      <fb:visible-to-connection>
      <img src="http://marketingindia.net/smm/imsocial/welcome2.jpg">

      <fb:else>
      <div id="non-fans"><img src="http://marketingindia.net/smm/imsocial/welcome1.jpg"></div>
      </fb:else>

      </fb:visible-to-connection>
      </div>

    8. Ohh ;P

      Thanks a ton.

      Couldn’t have figured this one out in years myself.

    9. I have two questions:

      1) I’ve read that FB won’t allow external stylesheets any longer. Is this true? If they do allow the external stylesheets, can you explain what the “css?v=40.0” part at the end of the URL is and how you know what number to use? I’ve seen all kinds of numbers at the end . . . css?v=10.0 and css?v=11.0 . . . and then if you update your css, your supposed to make it “css?v=”11.1” . . . what the? I don’t get it and have looked everywhere.

      2) I can get my CSS/HTML to work perfectly when I host it on my server http://www.adventuresinhcg.com/fb/adv-hcg-FB.html but when I paste it inside my static FBML page it breaks — it doesn’t look as though it’s picking up the CSS — and I’ve tried embedding it in the file as well as pointing to my external css >> http://www.facebook.com/adventuresinhcg#!/adventuresinhcg?v=app_4949752878

      When I point to the external CSS, I used

      and when I embedded it, I placed it inside the following tags . . .

      Thoughts?


      • GRRR. . . will try again

        embedded CSS: <style type="text/css"> </style>

        external CSS: <link rel="stylesheet" type="text/css" media="screen" href="http://www.adventuresinhcg.com/fb/text.css" />

      • The number after the “?v=” is arbitrary. The important thing is that you increment it when resaving the FBML if you want to see changes you’ve made in the external stylesheet. You can start with “v=10.0” then start incrementing from there (v=10.1 … 10.9 … 11.0) or start with “v=10.00” (then v=10.01 …. ).

        Your CSS opens with “<!–” and closes with “//–>” which is wrong. Those have no place in a CSS file. They’re used in JavaScript tags, eg.

        The <link …> tag looks fine.

        Don’t use inlined CSS with the <style> tag.

        Don’t include the <body> or <html> tags either. They’re supplied by Facebook when it builds the page.

        • Thanks so much for getting back to me as quickly as you did. I am going to give the “v” a go, but there’s one part I didn’t understand.

          You mentioned “Your CSS opens with “” which is wrong. Those have no place in a CSS file. They’re used in JavaScript tags, eg.”

          Were you referring to the inline CSS? My CSS doc itself? One of the tags? I’ve looked for the notation you commented about but couldn’t find it.

          Thanks (and apologies, as this is probably obvious and I’m just missing it)

          • First, I fixed my response so the code I was showing rendered (didn’t follow my own advice!).

            That “commenting out” code: <!– … //–>

            Shouldn’t be anywhere in CSS. I saw it in your external CSS file you provide the URL for in the <link> tag.

        • Ah. Thank you. I will delete it and give you the update. Thanks so much.

        • Ok, so I took those tags out of the CSS file and went back into the FBML page and used the following: <link rel="stylesheet" type="text/css" media="screen" href="http://www.adventuresinhcg.com/fb/text.css?v=10.1" />

          It still didn't work. I think I'm going crazy -- and what's frustrating is I know this has to be an easy fix.

          Any thoughts? I feel terrible taking up your time. Would be happy to pay you to look at it or donate to the site -- it's better than having my head explode, and since this is for the little business my wife is starting, I'd be a hero in her eyes, too.

          Thanks for your time and effort to this point. It is greatly appreciated.

    10. Are CSS files still working as expected for everyone. I’m having cross browser issues with custom share buttons, and even floats.

    11. i was using following style for my background image.
      <style type="text/css">
      body {background:url("http://i664.photobucket.com/albums/vv1/sripeople/test-bg.png")no-repeat;}

      </style>

      and save it as mypage.css and upload to server and place it in fbml page like this,

      <link href="https://www.opendrive.com/files/7423102_52gNt/jack.css?v=10.1" rel="stylesheet" type="text/css" />

      but it’s not showing at all…any thoughts?

    12. Hi Tim,

      Just wanted to say thank you for your guides! After much fiddling I have got my page working across the various browsers.

      It’s pretty if anyone wants to see it: http://www.facebook.com/youami?v=app_4949752878

    Trackbacks

    1. […] Facebook Static FBML FAQ / Tutorial « Static FBML & Internet Explorer 8 – Use External Stylesheets, Not Inlined […]

    Speak Your Mind

    *