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....
Original Post...
In my post on adding the Facebook application Static FBML to your Fan Page, I laid out in detail how to use this very useful app to create very nice page layouts for your Wall tabs. As I've researched this further, I found that good ol' Microsoft Internet Explorer versions 6, 7 and 8 do not handle these Static FBML pages like Firefox, Safari and the other browsers. Of course, any seasoned Web developer expects this and IE does not disappoint.
Static FBML CSS: Internet Explorer (all versions) and other browsers
With Internet Explorer you have only two options in applying CSS styles to your Static FBML application tab:
- Calling an external stylesheet using, for example:
<link href="http://yoursite.com/styles/layout.css" rel="stylesheet" type="text/css" />
Of course, you need to upload the CSS file to your server (or some Web-accessible server). NOTE: Add this string to the end of your external stylesheet call to force Facebook to refresh the version it has cached (example): <link href="http://yoursite.com/styles/layout.css?v=10.0" rel="stylesheet" type="text/css" /> (change the v= number each time you refresh the page.) - Putting the CSS styles inside the HTML mark-up, i.e. inlining the styles, for example:
<div style="font-size:14px; margin:0 auto;">
Although inlining the styles has appeared to always work with Static FBML application-tab pages, using calls to an external stylesheet seems to be only recently supported. I tested our HyperArts Static FBML Page, calling an external stylesheet, and it's working fine. (If anyone does notice an issue, please let me know!)
The option that <em>doesn't</em> work with Internet Explorer is using the style tag to embed your CSS rules:
<style type="text/css">
.some-class { margin:0; font-size:14px; }
#some-id { margin:0; font-size:14px; }
</style>
Although the above works in most other browsers, Internet Explorer ignores the contents of that tag.
If at all possible, you should choose the option to call an external stylesheet. You have much greater flexibility in applying — and making changes to — your CSS using a stand-alone stylesheet.
Static FBML Code Templates for Sale!
#1 by efoc - December 20th, 2009 at 19:08
I am using and test your facebook pages in IE 8, your tabs look not working in IE 8. I try to use external CSS but, however, all my browsers cannot show my css style.
What I do is paste my following code in "Edit FBML" page:
***********Begin***********
<a href="#" rel="nofollow"></a>
<a href="#" rel="nofollow">Title</a>Blablablabla...
***********End************
I am using Fan Pages with FBML application added. Thanks.
#2 by efoc - December 20th, 2009 at 19:13
OK, I solve it already. The following is my way how to add my external CSS.
<link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” media="screen"/>
Hope this help for other.
#3 by Daniel - December 21st, 2009 at 10:08
That's all very well but in the Publisher context, your application isn't allowed to have an external stylesheet, using the link tag, so, I'd like to know, how is one meant to make a publisher app for IE !?
#4 by Dan - December 21st, 2009 at 15:31
I've tried using an external style sheet and style tags, and facebook still won't pick up my font sizes...everything else (borders, colors etc.) is working. What am I doing wrong?
#5 by admin - December 21st, 2009 at 16:54
Well, it's hard to know what you're doing wrong w/o seeing the stylesheet. But also be aware that Facebook caches your CSS and it's hard to clear and get exactly what's on the page. Sometimes you have to wait awhile. It's very frustrating.
#6 by Joe Breaux - December 23rd, 2009 at 16:20
Hi Tim,
I'm a newbie and looking to create custom facebook tabs. I'm not a coder and would like to know what is the best (visual/design) software to create dynamic html/fmbl tabs..
Thank you,
Joe
#7 by admin - December 23rd, 2009 at 19:10
HTML can be done in a plain text editor. As for the details of using HTML markup, there are plenty of resources online for the newbie.
#8 by Jana - December 30th, 2009 at 11:33
Okay, this is really weird. I created my page on Firefox and discovered that it did not show correctly in IE 8, so I set about moving all the style info into internal as you suggested. I did not get finished before Christmas and returned today, and it is displaying correctly in IE 8 without making the changes. Did IE 8 make changes?
#9 by admin - December 30th, 2009 at 11:53
Sounds like it was a caching issue, which often happens because FB caches stylesheets and styles and rather tenaciously. If you go with an external stylesheet, make sure that at the end of the file name (mystyle.css, for example) you add this string: ?v=10.0. Look at the top of this post to see more about this.
#10 by Jeff - January 11th, 2010 at 12:05
We just experienced this issue of IE not seeing embedded style on 3 different instances of IE. I say "instances" because they are 3 different version of IE (6, 7, &
but the same versions on the majority of other computers see the embedded styles just fine. One version was on one of our account guys computer which was mirrored off another computer that has no issue (mind you, we're not sure if this user altered their version since installation - we're looking into it next time he's onsite.)
Does anyone have any idea what might be causing a few instances of IE to not see it?
BTW, thank you for posting. We implemented your solution and now the CSS work on all instances of IE in our tab.
#11 by timware - January 11th, 2010 at 12:12
If the IE versions were also on identical Windows OS versions, then I'm not sure what the issue is. But it might be an OS issue. If you provide the OS and IE version and a URL I can tell you what I see. But I found that IE, any version, doesn't like styles embedded with the <style></style> tags.
#12 by Ana - January 19th, 2010 at 07:49
I am using Static FBML for the first time. I read in a blog that I should only copy the code between the body tags. I did so, but nothing shows up after I click save changes.
What am I doing wrong?
FB_welcome
#13 by admin - January 19th, 2010 at 08:49
Without seeing the code, I have no idea why nothing is showing up. Hopefully, you've read my blog post/tutorial on FBML: http://bit.ly/6joFj
If you haven't read it, you should.
#14 by Rick Clark - January 22nd, 2010 at 06:26
I read your articles and set up my FBML box with the following css stylesheet. Uploaded the css to my css folder and I still get nothing. Below is my link, any idea why it is not working?
#15 by timware - January 26th, 2010 at 09:10
You have to wrap your code in <code></code> for it to appear in a comment.
#16 by Fredrik - January 22nd, 2010 at 07:27
Hi. This is working very good with CSS. But how do I do to stop .swf to cache? I'm having problem with IE not displaying my .swf correctly after refreshing the site. I have to empty my TEMP folder everytime I refresh.
Thanks / Fredrik
#17 by timware - January 26th, 2010 at 09:12
Not sure what you can do about the swf caching issue. You might try adding the "?v=10" bit to the end of the URL, after the .swf. I know that works with the .css file call, as it forces Facebook to load a fresh copy of the file. Let me know how it goes, here.
#18 by matthewfreyer - January 28th, 2010 at 01:00
I am having the tag problem with IE. I removed the tag and created an external stylesheet, now using the tag and I am still having trouble. The embedded CSS works great in Safari and Firefox. I just want it to look the same in IE. Help please.
#19 by timware - January 28th, 2010 at 09:09
Sorry to hear this, Matthew. I can't provide support here for display issues with IE, the bane of coders everywhere! This post is about getting IE to just read the styles. Once they are rendering at all, the display issues are something else entirely. There is plenty of info online. I'd start by googling: internet explorer css bugs.
#20 by matthewfreyer - January 28th, 2010 at 09:58
Perhaps IE isn't reading the style. I placed the
<link>tag for my external stylesheet above my html. Is this the correct placement.#21 by timware - January 28th, 2010 at 10:12
As it says in my Static FBML tutorial, *all* content for your page must be what would be between the <body></body> tags in an HTML file. There should be NO <html>, <head> or <body> tags in your Static FBML app. These are implemented by Facebook. Your content would be placed within Facebook's <body> tags.
#22 by matthewfreyer - January 28th, 2010 at 12:31
I understand that, Tim. I have read your tutorial several times. If the
<link>tag is placed withing the<head>tag in normal html coding, and there is no<head>tags in the FBML app, where do you place the<link>tags? Let me be even clearer: Where did you place the<link>tags to call your external stylesheet for the HyperArts Static FBML Page?#23 by timware - January 28th, 2010 at 12:39
I put the <link> tag calling the external style sheet first, followed by the HTML markup & content.
#24 by matthewfreyer - January 28th, 2010 at 12:47
Thank you! I have done the same but unfortunately it is still not working. Thank you for your time.
#25 by Huw - February 9th, 2010 at 01:29
Hi,
From what I can see now - FBML is now fully functioning with css styles above the html markup. It seems to be working fine for me in IE7/8. Only since January.
Has facebook made any changes?
#26 by admin - February 26th, 2010 at 13:22
What about IE 6, Huw? That's the 800-lb gorilla.
#27 by Huw - February 26th, 2010 at 16:47
IE6 - Looks ok for me using IETester?
#28 by Gabriel - February 23rd, 2010 at 15:58
Hi,
I have done but i have a problem with layout in opera browser. Facebook have made a change in a principal template. Can you help me. Thank you.
#29 by admin - February 28th, 2010 at 18:10
Sorry, Gabriel. I just don't have the bandwidth to troubleshoot everyone's cross-browser display issues. I'd google it.
#30 by joanne - February 26th, 2010 at 13:16
Just a note, straight up HTML didn't work with my image mapping. It worked in an HTML test bed but not in static fbml. however i found a great tool that at least converted my image map into css: image-map.com. Worked like a charm!
#31 by Huw - February 26th, 2010 at 16:48
Hi,
What about Flash in static FBML? OK So it's easy enough to embed but, what if I have clikable regions in my flash that link to webpages? Not working for me.
May try this image map idea! Keep you posted.
#32 by Randy - March 16th, 2010 at 11:53
No matter what I do, even from the most basic example... Facebook won't recognize an external stylesheet.
I think the HyperArts example is still working because it was posted back when they allowed this CSS method... it doesn't work anymore.
That also means there's no way to get a hover class working on Facebook... so the button article that you link to is also of no use here.
This article is no longer valid, and has actually wasted a boatload of my time... the rules have changed, you should update this post.
#33 by admin - March 16th, 2010 at 12:25
Randy, I just posted some Static FBML content on another Fan Page the other day, and the call to the external stylesheet worked fine. How about you showing me the code you used to call the stylesheet? Remember to surround it with the <code></code> tags. It just may turn out that I haven't wasted a boatload of your time, but thanks for the thought
#34 by Crystal - March 24th, 2010 at 09:05
I have read a variety of articles and they all describe this process the same as you. However, when put into practice my static FBML pages do not call the style sheet referenced. I have had others confirm that I have the call link correct
<link href=”http://yoursite.com/styles/layout.css?v=10.0” rel=”stylesheet” type=”text/css” />and I have made sure that my style sheet is uploaded to the server...If I save the page out at an html page an upload that it works but once I carry the pieces into FB, leaving behind the body and html tags, it breaks! HELP!
I have a contect to launch mid next week!!
#35 by timware - March 25th, 2010 at 06:51
I'd need to see the actual <link> you're using, Crystal. Assuming that if you try to access the stylesheet URL directly and it displays in your browser, then I'm not sure what's going on. It's always worked for me. I do know Facebook has been having some issues the past several days, and my stylesheets were taking forever to load.
#36 by Ivan - April 7th, 2010 at 09:10
Hi, Tim...
Well, I'm also having the same problem in loading a simple external CSS file (just one single line in the external CSS, rendering the color of the tag red, in order to test the linkage).
Here's the code in the Static FBML app:
<link rel="stylesheet" ref="http://xxx.xxx.xxx/styles.css?v=4" type="text/css" media="screen" />
<fb:fbml version="1.1">
... etc.
</fb:fbml>
So, the tag is at the top.
Here's the CSS code in the file linked above:
a {color:#F00; text-decoration: none;}
That's it. The only line in the UTF-8 encoded .CSS file.
And this doesn't work either in IE or in Firefox. What could possibly go wrong with such a simple setup?!
P.S. No, the link to the external CSS file is not broken, and yes, my PC is plugged into the wall socket and is online.
Thanks,
Ivan
#37 by Ivan - April 7th, 2010 at 09:11
Sorry, forgot to wrap the
<a>tag into<code></code>tags.#38 by Rob - April 9th, 2010 at 09:10
I'm just trying to make a simple new tab, not even an app, and I'm getting rather frustrated.
I made the tab using notebook, saved as html and tweaked away until I got a nice simple layout.
The html:
<div id="wrapall">
<img src="fb_banner.jpg" class="banner" >
<div id="wrapper">
<div id="pic">
<img src="testpic.jpg" class="banner" >
</div>
<div id="blurb">
So what will this text end up looking like? So what will this text end up looking like?<br />
<a href="www.testlink.com"> Test Link </a>
</div>
</div>
</div>
The CSS:
#wrapall {
text-align: center;
min-width: 520px;
}
.banner {
text-align:center;
display:block;
}
#wrapper {
width:520px;
border:2px solid #d2e0f0;
}
#pic{
float:left;
width:316px;
}
#blurb {
float:right;
width:200px;
text-align:left;
font-family: Arial, Tahoma, Helvetica, sans-serif;
font-size:10pt;
}
a, a:link, a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a img {
border-width: 0;
}
So, I know the CSS link is working (and I'm using the version update number at the end after every new tweak - thanks for that great tip) because things such as the floats, the a href and the font are changing. What doesn't work is the border (it just ends up as a thick blue line at the top) and the whole thing being centred within the space (it all goes over to the left).
It looks fine when opened on my machine, what is Facebook doing to it?
I'd really appreciate any help you have the time to give.
#39 by timware - April 9th, 2010 at 09:41
First, you must make all calls to images the FULL URL, not just relative. Those images don't live on the Facebook servers. The way they're coded, they won't show up, definitely. Also, when you float an element, you have to use a clearing DIV after it or the containing DIV won't size vertically to accommodate its contents. Something like:
<p class="clear"></p>
CSS:
.clear { font-size: 1px; line-height: 1px; height: -1%; clear:both; }
#40 by Jaimie - April 13th, 2010 at 11:12
Hi Tim!
So, I'm trying to use the Static FBML to add a mini website on my fan page. The code below is what I've been testing before I go design everything and it doesn't work. Annnd it doesn't work! What am I doing wrong/missing? I've been reading other posts and trying the suggestions you've given them, but it still doesn't work. Any idea what I might be screwing up?
<link href=”http://www.intuitivdesigns.com/styles/fb.css” rel=”stylesheet” type=”text/css” />
<div id="bkgd">
</div>
<div id="logo">
</div>
#41 by timware - April 17th, 2010 at 16:42
Jaimie, Facebook had bugs this past week related to loading external stylesheets, for for canvas pages and application tabs like Static FBML, although they only reported the canvas page bug. External stylesheets seem to be working again with Static FBML, although the whole experienced spooked me and I've decided to just inline the CSS with the <style type="text/css"> ... </style> tags from now on. The code the Facebook generates now seems compatible with all major browsers & platforms, including Internet Explorer.
#42 by Clive Thomas - April 13th, 2010 at 15:55
Hey guys, don't know if you're still having a problem with the stylesheets, but here's a possible error. If you copy and pasted the code the double-quotes might have been changed to the round quotes. This just happened to me
All you need to do is make sure the quotes are the "straight " ones.
#43 by adam c - April 14th, 2010 at 10:12
is it possible to call on a background image on an FBML fan page? I have a splash image I want to set as a background image then position a vimeo over the top in the centre, using a . The vimeo is showing on the page (although it is ignoring my margin commands) but there is no background image!
#44 by timware - April 14th, 2010 at 10:49
This is done with CSS. Your containing DIV, which should be no wider than 520 pixels, can have a background image. If you're unfamiliar with using CSS or HTML, I suggest you start with the W3 Schools, which has a great many useful tutorials.
#45 by adam c - April 16th, 2010 at 04:49
Thanks Tim, I'm not too hot with CSS but good enough to know I wasn't doing it wrong
it was facebook pulling support of external stylesheets which was messing things up for me!
#46 by Chris - April 14th, 2010 at 13:25
Sorry!!! the FB code is
<link rel="stylesheet" type="text/css" media="screen" href="http://lclnaturalorganic.com/chrisfb/cb/style.css?v=1.1" /><div id="bg">
HHH
</div>
#47 by timware - April 14th, 2010 at 16:43
I have noticed today and yesterday that Facebook is being buggy with loading external stylesheets. It's actually reassuring to hear I'm not the only one experiencing this. I'm keeping an eye on it to see if it gets resolved, or if FB has once again pulled out the rug.
#48 by Monica - April 15th, 2010 at 11:33
Hello all.
I am a little confused as to why I am the only having trouble with the tag. According to wiki's Allowed FBML and HTML tags: http://wiki.developers.facebook.com/index.php/Allowed_FBML_and_HTML_Tags is not allowed in the html.
What am I missing here?
P.S. I am using this tool to test the page: http://developers.facebook.com/tools.php?fbml
Thank you, Tim!
#49 by Monica - April 15th, 2010 at 13:24
I meant
<link>tag*According to wiki
<link>is not allowed. Sorry I missed the bright red note to be sure to include<code></code>tags.I found a discussion on facebook where you made some posts, Tim. But I still don't see away to fix the problem. That tool I am using to preview the html gives me the error message: COMPILE ERROR: FBML Error (line 1): illegal tag "link" under "fb:profile"
#50 by timware - April 15th, 2010 at 18:37
Monica. You're not crazy. Facebook no longer supports calls to external stylesheets with the <link> tag. You have to inline the styles between: <style type="text/css"></style>. The <style> method was previously unsupported by Internet Explorer, but works! I've posted an article about this Facebook Static FBML change.
#51 by Monica - April 16th, 2010 at 08:37
Yay, it works! Thank you, Tim!
#52 by Chris - April 18th, 2010 at 18:39
Hi. I have a link in one of my page tabs that takes you to another but whenever i test it with ie8 the page doesn't load properly. If i click on the tab itself it loads completely. What can be the problem?
The only way i can make it completely is to open it in a blank page but i don't want to that. its there a way to open the tab in another page with ie but let the tab open in the same page with the other browsers?
Thanks in advance.!
#53 by Ranganath - April 22nd, 2010 at 00:12
Hi, I have png files in my page and as usual it's not working in IE6, so any fix for this in FBML.
#54 by timware - April 22nd, 2010 at 07:22
IE 6+ supports PNGs. But IE 6 doesn't support transparent PNGs.
#55 by Ranganath - April 23rd, 2010 at 00:31
Thanks tim.
#56 by colin85 - May 7th, 2010 at 09:08
Hi Tim,
Great to have someone shed light on this topic. I'm a HTML and CSS novice but my static FBML displays and functions correctly apart from in the IE browsers. I put my code posted below into a .css file, hosted it on our website and tried calling it using...
<link href=”http://thinkhousepr.com/fbimagery/stylesheets/halloffame.css” rel=”stylesheet” type=”text/css” />
This just shows up blank, do you have any advice or point out where I'm going wrong?
Thanks,
Colin
[ CODE DELETED ]
#57 by timware - May 7th, 2010 at 09:58
Colin, Your <link> to a stylesheet points to a file that has the .css extension but is NOT a stylesheet. It's got lots of HTML in it and other random stuff. Use the <style> tags for you styles.
Also, as a novice, you should avoid absolute positioning. It can be very tricky to use and I don't recommend amateurs use it. Two rules for absolute positioning you must be aware of:
1) The containing <DIV> for an absolute-positioned object must contain the style: "position:relative".
2) Make sure you set a height on the containing <DIV>, as well. Absolute-positioned elements are outside the document flow, and thus don't cause a containing element to expand to accommodate them.
#58 by Neil - May 9th, 2010 at 04:44
Just wanted to say thanks about explaining how to get Facebook to re-cache my css file. You just saved me hours of head scratching. Thanks!
#59 by colin85 - May 9th, 2010 at 14:06
Thanks Tim for the advice,
I really have to get a grasp of the basics of CSS before I get ahead of myself. I'll be back I'm sure once I figured it out for myself!
Colin
#60 by Tommy - July 10th, 2010 at 08:57
Ok, this might sound dumb! I am new to css and only know a little. I added a FBML to my facebook page then added the stylesheet link provided as an example at top of page then added the FBML stylesheet link provided as an example. Changed the line of code on the FBML stylesheet link to where it is on my server and nothing is showing up? any help with this would be great thanks!