Facebook Static FBML & External Stylesheets – New Rules

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.Pre-Update:
Facebook has changed its API regarding the implementation of CSS styles in Static FBML application tabs.

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.”

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.

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 http://bugs.developers.facebook.com/show_bug.cgi?id=9601. 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.

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.

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!

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.

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:

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!

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?

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 –http://www.garoofsnow.com for more information about our company and the services we provide.

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.

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.

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:

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.

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.

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?

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?

At http://www.facebook.com/SwimAndSweat 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?

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.

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.

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?

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

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.

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

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.

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?

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.

It looks the same in Firefox on the Mac and IE 8. I just tested it. It shows a red image along the left side and that’s all. Is that your intent? The fact that both browsers show the same thing may be a good sign.

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.

Kobe: I deleted all your code for brevity, but it contained inlined CSS using <style> … </style> tags. You should transition to using external stylesheets for your CSS, as IE 8 is, as you know, choking on the <style> tag for some reason and not rendering the styles. Who knows when this will be fixed?

To keep the comments “tidy” I removed your code, but it looked fine and tested fine. There’s a line break after the “height” attribute in #wrapper that you might want to correct. Other than that, it was fine.

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.

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 http://www.facebook.com/MidpointCreative
Any help would be great

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.

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.

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).

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!

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….

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.

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.:) 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?

Trackbacks

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

[…] 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 […]

[…] 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 […]