FBML CSS – Include CSS Into Your FBML Code

Working with FBML CSS can be tricky at times, so I’m here to show you all the ways you can successfully add CSS into your FBML code. Be warned though, there are a few ways and each way has it’s ups and downs. The usual down part of each set of CSS code is that if you create some complex CSS structure you’ll have it ‘hack’ it to work with Internet Explorer (any version). So that’s kind of a drag.

But lets get started with. We’ll cover these topics:

• Inline CSS
• External files
• Using inpage <style type=”text/css”> tag
• Caution of using the inpage method.
• Resource list for CSS (independent of FBML and Facebook)

Note: This isn’t a “how to program in CSS” guide. This is how to incorporate it with your Static FBML code and the like. So come knowledge of CSS/HTML is required.

Inline CSS – style=”"

This is the most basic way of using CSS. To do this, all you do is include style=….. into your styling tag.

So if we want to get some bold red text we would use the following code:

<span style="font-weight: bold; color: red;">Quantum Fanpage's bold red text</span>

And the output would be:

Quantum Fanpage’s bold red text

You can add the style= command to practically any html tag. What style options you can use and add change from tag to tag. For example, the SPAN tag will not accept (meaning it won’t work with) positioning nor height. A DIV tag is significantly more versatile.

External CSS Files

Using external files is probably the best solution, of course though you’d have to have your own server to host the files on. If you need some hosting just for your CSS files contact me via my main website and I’ll hook you up for free.

To use external CSS files you will first have to create a CSS file and host it somewhere. For example lets use sample.css. I have placed it on http://www.quantumfanpages.com/sample.css

The file contains this:

#sample-id-QuantumFanpages {
font-weight: bold;
font-size: 10pt;
color: red;
border 2px dashed red;
background: #111111;
width: 200px;
}

In order to use it we have to call and include the CSS file BEFORE everything else in the FBML code. So we put the FBML code at the top of our FBML page:

<link href="http://www.quantumfanpages.com/sample.css" rel="stylesheet" type="text/css" />

And then all we have to do it properly call/use the style, lets say in this sample div tag:

<div id=””sample-id-QuantumFanpages”>Quantum Fanpages other sample!</div>

The result would be something like this (I’ve cheated here to show you the desired effect since I cannot ‘just’ include the CSS file in the middle of a post … well I could, but it’s not fun, nor easy.):

So for your Fanpages, you have the change where the CSS file is. The template code is:

<link href="http://www.YOUR-SITE.com/CSS_DIRECTORY/sample.css" rel="stylesheet" type="text/css" />

Inpage <style type=”text/css”>

This method is a hit or more, unless IE shapes up and it sure as heck won’t work for older versions of IE. IE 8 just might work, dunno since I never use IE. (more on this later)

If for some reason you are not able to use external files, or Facebook changes the API again … you can use the ‘inpage’ css style. This is the idea of taking the external CSS file and having it all in the actual html/fbml. So it’s all one file/page instead of separate.

This is achieved in this easy way, again using the contents of sample.css as an example:

<style type="text/css">
#sample-id-QuantumFanpages {
font-weight: bold;
font-size: 10pt;
color: red;
border 2px dashed red;
background: #111111;
width: 200px;
}
</style>

After words all you have to do it call the style in the usual way.

Make sure to add that AT THE TOP of the FBML before any HTML code.

Internet Explorer has display problems when using <style type=”text/css”>.

Some older versions of IE, especially not patched version of IE6/7 can possibly NOT include the style. Though it’s said that recent revisions in the Facebook Fanpage FBML API have changed that.

Sooo, I highly recommend you test this on your own Fanpage. IE6/7 may or may not work with the <style …. you’ll just have to see.

But it might, so go ahead and use it for now. Most people say it currently works.

CSS Resource list.

If you’re going to add CSS to your Static FBML page, you’ll have to know CSS. Regular ol’ CSS. There is no difference between FBML CSS and regular CSS.

So with that in mind, here is a quick list of some pretty good CSS training material:

• Official W3C CSS learning Page. Full of CSS learning and training and tutorial material.
• CSS Zen Garden. A great place for learning how to create ‘perfect’ CSS.
• W3Schools CSS Tutorials. The one stop shop (well, not actually shop. It’s all free here) for all CSS material. It’s the first place I go to, to get any information about CSS.

If you have any other tips or tricks, let me know below and I’ll add them here while giving you credit. What do you think of this material? Leave a comment below!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tagged with: <style type= • css • fbml • fbml CSS • Static FBML • style=

Filed under: FB 101 • FBML CSS • Static FBML

Like this post? Subscribe to my RSS feed and get loads more!