Contact Us
  • Facebook Static FBML & External Stylesheets – New Rules

    HOW TO HOST EXTERNAL STYLE SHEETS: New tutorial on how to set up free hosting of your external CSS stylesheet and images using Google Sites

    UPDATE Jul 31 2010: Again, inlining your CSS styles via the <style> tag isn’t working with Internet Explorer 8. If you call an external style sheet via the <link> tag, then IE 8 is happy. 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.

    UPDATE Apr 17 2010: It seems that external calls to CSS are working again, after some days of not working. It’s hard to know when Facebook has changed its API or just having a meltdown, particularly when they don’t issue a bug alert. Yes, there was a Facebook bug report 9601 specifically regarding canvas pages, but nothing that addressed Static FBML application tabs. I’m going to go exclusively with inlined CSS using the <style type=”text/css”> … </style> tags. They now work across all major browsers and platforms and just seem, well, safer.

    Facebook has changed its API regarding the implementation of CSS styles in Static FBML application tabs.

    You can no longer use the <link> tag to call an external stylesheet:

    <link href=”” rel=”stylesheet” type=”text/css” />

    However, after much testing here at HyperArts, I’ve determined that the use of the <style type=”text/css”>[CSS rules]</style> works across the major browsers on both Macs and PCs:

    <style type="text/css">
    .some-class { margin:0; font-size:14px; }
    #some-id { margin:0; font-size:14px; }

    In my previous post on CSS and Static FBML, I’d stated that Internet Explorer didn’t support the <style></style> tag, but now it does (even IE 6!), no doubt due to a change in how Facebook renders that tag.

    Although you can also inline styles (ex. <p style=”margin:0;”>), the easiest-to-maintain method is to add the <style></style> tag at the top of your Static FBML box, as shown above.

    Please post a comment here, if your mileage varies. And although it seemed yesterday that pre-change fan pages weren’t affected by this and still supported external CSS calls, today this doesn’t appear to be the case. If you make any changes to your existing application tabs, external stylesheets won’t be supported. PERIOD!

    Interestingly, I couldn’t find any information from Facebook that such was the case, and this Facebook bug report — that people thought related to this issue with Static FBML — concerns an issue with FBML canvas pages with linked stylesheets throwing a 500 internal server error with the message: “Invalid parameter: Unknown error.”


    1. I was just banging my head wondering why the heck my external stylesheet wasn’t working properly. The tag now works perfectlyas you’ve stated in this article.

      Thank you for your informative articles on this subject. I am new to FBML and you have done a good job explaining the basics.

    2. You guys rock. You are the first (that I can tell) that have identified this. I admin about 40 pages, and none of them seem to have been affected. However, I just setup a new Static FBML Tab that references my external style sheet and YES- you are correct. I will try your solution. Sure wish FB had something on this in their developers wiki.

    3. OK just used your workaround. It works. Again- thanks so much. Also, I searched in twitter and found a link to the dveloper bug report page… it (seems?) that this is a temporary bug that they will fix?

      • What’s the link to that bug report page? And you’re sure it’s not the bug report regarding CANVAS PAGES and external stylesheets which is a different deal. They could be related, but I doubt it. Whatever Facebook changed also resulted in Internet Explorer recognizing the <style text=”text/css”> tag, likely due to a change in how Facebook outputs the code.

        • Tim- here is the link Since I am neither a programmer nor the son of a programmer, (humorous biblical allusion) and do not have developer account, I could not login to see the details of this. So it is possible (likely) I got this wrong. Sorry. Anyway… thanks again for the excellent help you provide. I may have to get some paid help in the future and you would be my first call.

          • No, Ken, that’s the bug report for canvas pages, which was definitely a bug and temporary. I think the external-CSS change for Facebook is intentional, particularly because they also changed how they generate the HTML for the inlined stylesheet call — using <style> tag — so that it now works in Internet Explorer. So the new best way to apply CSS to Static FBML is using the <style></style> tags before the HTML.

            • Thanks Tim. Seems like Mike below misunderstood as well. You explanation makes sense, and it’s fine if FB decided to use style sheets that are included in the code rather than externally referenced. Maybe the style changes I make will update in real time rather than the 5 minute lag times I had to live with before. Hmm.. we can hope. I will check. 🙂

    4. There is a Facebook bug listed about this now, and it looks like cached linked stylesheets are fine, but even in older pages, if you try to send a new file (i.e. change the version) it will break that page also.

      • Mike, Although this isn’t a bug report relating to the Static FBML question (it addresses an issue they were having with canvas pages), it does appear that even older fan pages will not support external stylesheets. I would recommend that everyone switchover to using the <style text=”text/css”></style> tags to inline their styles.

    5. why oh why did FB removed this featured (i.e., call external stylesheet)

      anyways, thank you very much for posting a quick solution.

    6. Mike- I think I’m with you on this one. I also saw this morning that the bug was fixed. However, I will design my new Static FBML Tabs using inline CSS. Even though external sheets for me are easier to maintain for multiple clients… your word “safer” carries the day. Thanks for all your testing and hard work.

      • Just to clarify, that bug report 9601 said nothing about Static FBML or application tabs, just canvas pages, and said the error was “500 internal server error with the message: “Invalid parameter: Unknown error.” So, other than it being a problem with external stylesheets, it didn’t address the problem we were seeing with Static FBML. And I too have decided to just stick with inlining styles with the <style> tag and avoid any future disruptions, or at least try to!

    7. I’m new to the FBML App .. experimenting with a custom tab on my Facebook Fan Page for my business.

      Can someone help me with a code I need to remove the breaks/margins from in between my images. I would like everything to connect without any white space. Help! …

      You can view the page at .. under the ‘dw3 Design’ tab. Thanks.

      • In the absence of any code, I’d say to make sure that you don’t have <br /> tags between images, and no spaces. In the CSS, explicitly set the margins and padding for img to “0”. Other HTML and CSS help can be found at W3 Schools.

        • Ok. Don’t have any tags between images and removed spaces.

          I see according to this post we can no longer use the tag to call an external stylesheet .. would this be the proper code to use for my no margin/padding CSS? :

          img {margin: 0px; padding: 0px;}

          • *removed the so it would show in this post

            style type=”text/css”
            img {margin: 0px; padding: 0px;}

            • That looks correct, and I assume (because the code didn’t come through) that the “< " and ">” are missing only from your example?

              Also, external stylesheets seem to again be working, although I’d advise using the <style> tag to inline the CSS, to avoid problems down the road.

      • ok .. the breaks/margin problem seems to be only in Firefox and Safari browsers. In IE, there are no breaks .. didn’t even need CSS or Style tags.

        But for Firefox/Safari, neither the link CSS or style tags for 0 img margins/padding are working .. any suggestions?

        • I’m having the same 2 pixel space between image issue when viewing in Firefox…

          can I set padding to -1 ?
          I’m trying it now.

          • The first step would be to remove *all* linebreaks from the table cells <td></td>. I assume you included the: cellspacing=”0″ in the <table> tag? You also might try adding the “border-collapse” CSS property, along with the standard HTML table properties, eg:

            <table style=”border-collapse: collapse; border:0;” cellspacing=”0″ cellpadding=”0″>

          • In the <img /> tag, add:
            style=”display: block;” to get rid of white spaces.

          • Aaron’s answer works! Use

            aaron :
            In the <img /> tag, add:
            style=”display: block;” to get rid of white spaces.


    8. I can confirm that the fix applied for the bug report listed above did (currently) seem to fix external stylesheets again in StaticFBML pages. That being said, I agree that it might just be safer to embed the code in style tags to avoid similar bugs from wrecking havoc down the road.

      • Yeah, I think it did too. But it’s weird that now you can inline CSS with the <style> tag and it works in Internet Explorer. It didn’t used to, but now that it does, that’s the way to go, I think. Some say, Oh, you must separate the structure from the presentation, but one peek at “view source” on a Static FBML tab shows the absurdity of that!

    9. <style type="text/css">
      img {margin: 0px; padding: 0px;}

      <table id="Table_01" width="700" height="909" border="0" cellpadding="0" cellspacing="0" valign="top">
      <tr valign="top">
      <td valign="top"colspan="3">
      <img src="" class="img" width="351" height="213" alt=""></td>
      <td valign="top" colspan="4">

      <img src="" class="img" width="339" height="213" alt=""></td>
      <td valign="top" rowspan="3">
      <img src="" class="img" width="10" height="900" alt=""></td>

      can not get rid of the white space please help

    10. Hi there!

      Is there anyway you can take a look at this code and tell me why I am getting a blank page? I made a what I thought was a simple page in a wysiwyg editor and changed the image and j/s source tags to full urls and nothing?

      width: 520px;
      position: relative;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;

      text-align: center;
      margin: 0;
      background-color: #3366FF;
      background-image: url(;
      color: #000000;

      color: #FFAD5B;
      color: #0000FF;

      GA Roofing & Construction Services
      Welcome to our Facebook Page.  We hope you enjoy your visit here – If you would like to become a "Fan" of our company, please click the like button.  Also be sure to visit our corporate website at this address – for more information about our company and the services we provide.

      var fo = new SWFObject(“”, “YouTube1”, “479px”, “300px”, “8,0,0,0”);
      fo.addParam(“quality”, “High”);
      fo.addParam(“scale”, “ExactFit”);
      fo.addParam(“wmode”, “Transparent”);
      fo.addParam(“play”, “true”);
      fo.addParam(“loop”, “false”);
      fo.addParam(“menu”, “false”);
      fo.addParam(“allowfullscreen”, “false”);
      fo.addParam(“allowscriptaccess”, “sameDomain”);


      • What you provided makes no sense. I assume you surrounded those styles with the <style> … </style> tags? And that you put some HTML markup around your content? You define containers in your styles, but don’t have them in your HTML. And there’s a tutorial on this blog for embedding Flash and/or YouTube videos, but it appears you didn’t see that.

        I suggest you learn more about coding. I don’t have the bandwidth to provide elementary CSS/HTML support.

        • yes – im sure it doesnt make sense because i could not get the flippin code to paste correctly. I had the … and html markup and it worked fine on my server – just not in fbml. So the search continues. Thanks anyway.

          • It says very clearly above the comment field, in bright red text, to surround any code in your comment with the <code> … </code> tags. It will then display properly

    11. Hi. I have a paypal add to cart button on my static fbml, but for some reason it doesn’t work in ie6 and ie7 i don’t know what the problem is…

      I have a regular div. and then the button code after but whenever i click on the link it redirects me to the paypal home page. any help…???

      • Sounds like more of a PayPal configuration issue, Chris. And, as you may know, IE 6 and, to a lesser extent IE 7, can be, um, difficult.

    12. Ciaran McHugh says:

      Hi, trying to add a picture to my FB custom tab using this code but not working…

      <img src=””/>

      Page is

      never wrote code of any type before today…

    13. Hello Tim. Thank you for all of the useful information. I am currently customizing a facebook page, and I am trying to connect the dots from your message. Using HTML 4.0, you can style your page using an external CSS file. FB doesn’t allow external files anymore, so you place where to make this apply to the page? Thank you.

      • Facebook appears to be supporting external style sheets now. It was a glitch that stopped them from work temporarily. But I decided to just put the styles in the body of the FBML box with the style tag:

        <style type=”text/css”> styles here </style>

        Then your HTML….

    14. Does anyone know why Static FBML suddenly doesnt work on FB Pages tabs any more? I know that FB has downsized some people’s tabs from 760px to 520px but theoretically if i also downsize my graphic from what was, to what is, it should still show up.. seems some people’s pages are squished, some are blank and some have tiled the content – wonder if you’ve heard anything. thanks.

    15. Your FBML designs are really nice. Maybe you can help me, because I don’t yet understand code as well as I would like. I am trying to place a newsletter optin box as a background image and then the form code on top.

      This is what I have and it is certainly not working. I don’t quite understand using styles and inlining css with html.

      Where am I messed up?? Should I not put this in a table? Thanks for any help.

      <div class="table" >
      <table width="520" cellpadding="5" align="center" bgcolor="#FAFCC5">
      <td colspan="2" border="0" margin="-5"><img src="http;//">

    16. One reason for external style sheets: Downloadable/rendered fonts. But I have a feeling these don’t work in FBML for other reasons. Does anyone have experience using TypeKit or the Google Font API in FBML?


    17. Hi, Tim. Thanks so much for all the useful info here, it has been priceless 🙂

      I have a Static FBML tab on my page and it seems to work fine except that the CSS image map doesn’t appear unless you push reload after the initial loading. Have no idea what could be causing this? Any advice?

      Thanks, in advance!

    18. At I have numerous fan pages written in FBML with external css for the past six months with no problems. Suddenly the pages are blank only for users signed into Facebook. If you are not signed in they appear fine. When I log in as administartor the same results so I am unable to manage and edit any pages. Any ideas what’s going on?

    19. I’m trying to load several images and getting a nasty gap in between the images. can’t seem to figure out why. they are sitting inside of a div. please help! have to launch soon! follow the link and click on the terms & conditions at the bottom right of the image. the code is also below.

      <div style="position:fixed; z-index: 1" id="termsBG" style="display: none;">
      <img src="" width="526" height="385" border="0" /><br />

      • Well, it looks like you might have fixed this, but issue would be the <br /> tags between each image. If you add:

        style=”display:block” to each <img> tag, and remove the <br /> tags, this should fix it.

    20. Thanks for all of your tips and howtos, Tim. While I understand the push for the inline style tags, there is a very valid arguement for using externally linked style sheets.

      The Static FBML plugin seems to have a finite character limit. I pasted in 9000 characters (including my editor’s white space characters). The editing textfield of Static FBML seems to be accepting only 8000 or so. While my CSS is only roughly 2500 characters, it is enough to prevent all of my code being entered.

      • No, I’m back to using external style sheets. I haven’t tested your “character limit” but there are other reasons for using external stylesheets, particularly around background images called in inlined styles as opposed to external CSS. So I agree that external is the way to go. Thanks.

    21. I’m having issues with IE8 not loading the css when you first click on a tab. It only seems to load the css when you refresh the tab. When you click away and then back again the same issue happens again, it’s not until you refresh the tab that the css loads. I’ve tried an external css but a lot of the styles don’t get picked up, font-size of p tags for example, so I’m stuck with using an inline stylesheet. Has anyone come across this problem before?

    22. Thanks “timware” for advising to put the style=”display:block” in the tag. I’ve been trying to fix the problem with the gaps for a long time.

    23. donnam13 says:

      i am having issues with my FBml page – the image wont show up. i am using similar code on my second fb page, but instead of the images being in photobucket they are on a website so am wondering if thats the issue? here’s the code I’m using that did work but since the change to the page width by fb, no longer works


      • You shouldn’t have spaces in URLs, and your image URLs have spaces (represented by the %20 character).

        The <style> tag should be the first thing in the FBML box.

    24. I’m facing a real problem I can’t deal with right now …

      Here is my sample of FBML :

      <style type='text/css'>
      #plop : {

      <div id="plop">

      Do you have an idea of why there is no code between the two “style” tags ?

      Thanks a lot !

    25. Do you know if there’s a limit to the number of images that can be used in a single FBML box? I’m trying to place 9 images (with identical code except for the links, which I’ve double checked), and only 7 of them are showing up.

      • There may be but I don’t know what it is. But it may also be the total file size of the page with all the images, so a file-size limit.

    26. I have copied and pasted a code from our website. Figured out to just use content between body tags but page renders funny. I have a link to our style sheet where do you put it since generally you put it before the tag? I just copied and pasted from our website

    27. You mention that the inline style method should work in all browsers, yet when I check in IE7 and 8 neither renders any CSS. Since my page is new and didn’t exist before this change over external stylesheets are no longer working for me. And inline styles seem to work rather poorly. Am I basically screwed now because of these changes? I had a perfectly rendering site in FF and Chrome, but totally useless in IE.

      • Our experience is that external stylesheets work the best across all browsers including IE. I suspect it may be an error in your <link> tag? Inlining styles using the <style type=”text/css”> almost works but we’ve found Facebook inexplicably shrinks the size of background images called in the inlined CSS. In recent months we’ve had no problems using external CSS.

    28. mgranger says:

      I’ve made the change to a linked stylesheet using your methods above but with no luck. I’ve tried using the ?v=40.0 code and that doesn’t seem to work either. I’ve copied your code exactly and changed the URL. Does it take some time for Facebook to cache the page and show the changes?

      • Well, since you didn’t include any code, I can’t really help you.

        • It was a general question to begin with but I’ll include some code for you to look at:

          <link rel="stylesheet" type="text/css" href="">

          <div id="main">
          <div id="leftside">
          <img src="">

          Everything was working fine up until about a week ago then IE stopped working. Now that I’ve linked the css, nothing is working except the html. I’m sure its something very simple that I’m missing or have wrong.

          Thanks for your help.

    29. mgranger: It looks broken in Firefox on the Mac, so this isn’t an IE 8 issue. Your CSS URL looks okay, goes to the actual .css file, so that’s good. Send the HTML.

      • mgranger says:

        I’m fairly certain it’s not the html. Everything was working fine with the css inside tags in firefox (and IE up until about a week ago). Then when I linked the css file, everything is broken. This leads me to believe that the css file is not linked correctly.

    30. hi
      i’m doing my fbml in css, it worked great until today.
      IE doesn’t display it anymore (works in firefox)
      this is an example of the code i’m using

      [ CODE DELETED ]
      I would appreciate any help – i don’t want (and to be honest don’t know) to do it all over again using divs or external styles…


    31. Other than using external style sheet as you suggested, anything you can see to keep IE from displaying image?

      [ CODE DELETED ]

    32. I’ve tried an external css but a lot of the styles don’t get picked up, font-size of p tags for example, so I’m stuck with using an inline stylesheet. Has anyone come across this problem before?

      • Then you must have errors in your CSS or HTML. There’s certainly no compromise in using external CSS and, if done correctly, should work fine. If you’re a newbie to CSS, you should know that it is fairly complex to really understand. It took me years.

    33. Hi,
      A few months back I added a ‘Welcome’ tab to our FB business page according to your perfect instructions and all was well. In the last couple of days I have changed the code slightly and reloaded but the styles do not work. I have now changed to using inline as you suggested but not all of the styles work. When I test the fbml on FB it looks ok but not on our page. Going slightly mental at the moment. Can we still link to external css or not?
      The page should you be interested is
      Any help would be great

    34. Steven: That URL to your stylesheet is incorrect. It results in a File not Found error. PLEASE check URLs directly in your browser! Incorrect URLs are the reason for 90% of the problems people have with FBML.

    35. LA: There’s much wrong with your code. The .fbml document’s <link> tag has the URL to the stylesheet without the “src=” piece which is crucial. And the URL for the stylesheet is incorrect anyway, returning a 404 not found error. So browsers will go to your inlined styles and per recent post about IE 8 and inlined styles, IE 8 isn’t reading the <style> tag. Other than that, everything looks perfect 🙂 I think if you fix those things, which are very basic, things will be better.

    36. Be nice if Facebook would choose a method for developers to use CSS styling and stay with it.

    37. I LOVE your blog. Always direct, informative and helpful!

      Quick question for you. I’ve implemented external stylesheets as you recommend, but they do not seem to work for me if I’m using background-image or an image map (in any browser). If I stay away from those two items, everything is fine in all browsers (including IE 8).

      Any ideas?

      • Well, they should work! Make sure your URLs to the images are correct in the CSS by trying to access them directly in your browser. Also, I’ve seen some folks using single quotes around the URL in the url(http://… ) style. They’re not necessary. Remember that URLs after the domain name are case sensitive. If none of the above helps, show me some code!

      • HTML-Imagemaps are not supported by Facebook, try CSS-Imagemaps instead, they will work.

    38. Hi,

      I wonder if you can help me out please.

      I have written this code which renders perfectly across all browsers:

      However when I put it into Facebook i get these annoying White gaps between the images. See:

      Can you take a look and let me know where i might be going wrong?

      Thanks in advance 🙂

      • Add the display:block style to the <img /> tag:

        <img src=”URL” style=”display:block” />

        If that doesn’t work, try also removing all line-breaks.

        • Hi,

          I have the same problem, with white gap between my line of pictures…. But I’ve tried to put this code : ….
          It’s working for the begining, but, I have a link code in my code…. and, It’s not working, because, with this display:block, my link is under the picture….

          You can see the result here :

          And, my code is :

          Can someone help me?

          Thanks in advance.


        • Hi timware,

          I’m also having the same problem, that apparently only has gaps when viewd in Firefox. Viewing it in Safari looks great, it’s just firefox that puts gaps between images,etc.

          What might be happening for firefox to display it differently?

          Thanks very much, i really appreciate it.

          • I’ll assume you added:

            style=”display:block; padding:0; margin:0;border:0;”

            to all <img /> tags?

            Removed all linebreaks?

            Set the width and height values to the images correctly?

            If all of the above has been done, and it’s still not working, send along some of your code.

    39. Fixed it, i added this within each image tag:

      style=”display: block; padding: 0px; margin: 0px”

      Hope this helps other people.

    40. Hi,

      I wonder if someone can help, my customised Facebook page is not rendering correctly in Firefox and Chrome, but works fine in Explorer and Safari. I am getting some weird image overlaps.

      can anyone suggest any ideas?


      • It might be that your width is 750 and facebook is making the change to force everything to 520.

      • Hi Guru,

        I’m also having the same exact problem! It looks fine in safari, but firefox the spacing of images is “off” and misaligned.

        I’m confused and haven’t been able to sort it out.

      • It looks fine in Firefox on the Mac. Make sure you set height and width values for everything. I can’t see the code to see what you might be doing wrong, but you’ll see that there are plenty of solutions offered here.

    41. hey, just wanted to say thanks for the great article and heads up. you saved me what could have been an hour + of trying to figure out how to fix my pages.

    42. Thanks a lot for this FAQ!
      I had a lot of trouble with some IE issues until I realized I needed to ad both to be on the safe side:

      .fix { line-height: 0.0; }


      Then things are working with the chosen style. 🙂

    43. Hi Tim!

      This is a good FAQ, thank you! But im trying to make a slideshow using FBJS, where there is a container div and there are 5 other divs inside it. Since it’s a slideshow, all the divs have to sit side-by-side horizontally. They’re all floated to the left already and the container div has the width of all the 5 divs added, and it works fine with Firefox and Safari but not with IE. IE still stacks the divs in a column instead of putting them side-by-side! Help please?

      Thank you very very much!

      • Make sure you use an external stylesheet called with the <link /> tag. IE 8 won’t render your CSS with styles inlined with the <style> … </style> tag.

        • Thank you.:) But it actually works with IE8 (surprisingly), just not with IE6 and 7, which are my big problems. I’ve even tried to add “hacks” for IE6 and 7 but they also don’t work. (Although I’m also working on separating the style sheet right now.) Any suggestions for IE6 and 7, please?

          Thank you very much!


    1. […] UPDATE: Apr 2010: Facebook appears to have changed its API so that calls to external CSS files are no longer supported, in new fan pages. Fan pages created before the change still work, but for how long, who knows? Read my new post how to implement CSS in your Static FBML tab…. […]

    2. […] had been spooked a month or so ago when Facebook had a glitch and wasn’t pulling in external stylesheets, but made no announcement abo… They eventually starting supporting external CSS, but I decided to just inline the CSS in the […]

    3. […] 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” […]

    4. […] Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles […]

    Speak Your Mind