Facebook Static FBML: Setting Up Your External CSS Stylesheet & Image Hosting with Google Sites

The recent problems with Internet Explorer 8 not rendering CSS styles when inlined on Static FBML tabs using the <style>…</style> tags has underscored the importance of using an external stylesheet — a separate text file with the extension “.css” that contains all your CSS style rules — to apply CSS to your tabs.

Those fan page owners who aren’t comfortable creating and uploading files to a Web server have been particularly hit by this IE 8 problem, and unfortunately IE 8 is currently a very popular browser.

Google Sites for Hosting your Images and your CSS Stylesheet

I decided to find the easiest and cheapest solution possible for external hosting of CSS files and images — and that solution is Google Sites, a Web service Google offers that allows the creation of websites, including the creation of directories and the uploading of HTML and CSS files, images and other file types.

Although Google Sites was originally intended for creating websites, I’ll show you how to use it as a free and easy service for hosting your stylesheets, images and other file types.

First, Create your External Stylesheet

I’m not going to go into the specifics of creating CSS styles. The W3 Schools is a good place to start, if you need the basics.

Your external CSS stylesheet should:

• Be created in a plain-text editor such as Windows Notepad or Mac TextEdit. There is a great free text editor for Macs called TextWrangler, by the makers of BBEdit which is one of the most popular text editors for those working on Macs.
• Contain ONLY your CSS styles — DO NOT put the styles between <style> … </style> tags! Your HTML and FBML will go in the “FBML” box (see below);
• Have a file name with NO spaces and have the suffix “.css” — example: mystylesheet.css. NOTE: When referencing your stylesheet file, be aware that directory and file names are CASE SENSITIVE.

Reference Your External CSS Stylesheet from the FBML box

When putting your HTML/FBML content into the Static FBML box:

you want to insert, before the HTML, the reference to the external stylesheet, indicating its URL in the proper format:


<link rel="stylesheet" type="text/css" href="FULL URL TO YOUR STYLE SHEET/mystylesheet.css?v=10.0" />


The “?v=10.0″ is for Facebook only. Facebook creates a copy of your stylesheet on its servers and that’s what it uses for your tab. In order to force Facebook to refresh its cached version of your stylesheet with the latest version, you need to increment the “?v=10.0″ each time you make a change to your stylesheet, by changing, for example ?v=10.0 to ?v=10.1 … 10.9, 11.0, etc. and then re-saving the Static FBML.

OK, you have your stylesheet — Now you need to host it somewhere!

If you don’t have a Webmaster who can upload your CSS stylesheet to a Web server and provide you with the URL to the file, then you’ll need to find a service that will host your external CSS file.

After researching this, it became apparent that Google Sites was the perfect option for external file hosting. The service is free — you just need to set up a Google account or add “Sites” to your existing account.

Setting Up Google Sites and Adding your Files

Log in to your Google account.

Click “Settings” in the top-right corner of your browser. You will see the Google services you have in your account. After the list of active services you’ll see:

If you don’t see “Sites” under “Try something new,” click the “More” link and, on the next screen you should see in the list:

Click on “Sites” and you’ll then be redirected to the landing page for your new Google Sites account:

Click “Create new site” and, on the next screen, fill in the “Name your site” field with a short descriptive name (NO SPACES). Below that you’ll see the URL for your new site. Write this down as this will be the URL you use for your stylesheet and any images, or any other file types, you upload.

Fill in the CAPTCHA characters and click “Create site”:

With “Home” highlighted in the left column, click “Create page” in the top right:

You’re going to want to create a directory for your files, so select the “File Cabinet” icon and enter a name for the directory (“facebook” is a good choice) and, again, NO spaces in that name (Google won’t let you create spaces anyway):

Then click the “Create Page” button (I recommend selecting “Put page at the top level”).

Next, click the “Add file” button:

Use the “Browse” button to locate on your computer the CSS stylesheet file you created, double-click the CSS file to upload it, and, if you want, add a “File description” which is shown in your list of files for easy identification. DON’T enter anything in “Text to display”:

Then click “Upload”.

You will then see your CSS file listed:

Copy your external CSS stylesheet URL to your Static FBML box

The URL to your stylesheet is what is in your browser’s address bar (at the top):

In the example, the URL is: http://sites.google.com/site/hyperartsfb/facebook

NOTE: DO NOT USE “https://” if that is the URL Google Sites creates. When you reference the Google-Sites-hosted stylesheet from your FBML box with the <link /> tag, CHANGE “https://” to “http://”. Otherwise, it won’t work.

Your URL will (unless Google changes something in the future) the same up the “/site/” but then will be your site’s name and the directory you created.

Just paste your stylesheet URL into your Static FBML box:

NOTE: Directory and file names are CASE SENSITIVE!

Hosting your images on Google Sites

Facebook requires that you host your images used in your Static FBML tabs on a Web server. In the past, we have recommended Photobucket’s image-hosting service but, for the purposes of hosting images and other files for your Facebook Fan Page, I think Google Sites is the better option. Photobucket has a limit on how many times your hosted images get “called” from their servers, where I don’t believe Google Sites has this limitation.

And if you’re already hosting your external stylesheet on Google Sites, it makes sense to host the images there, as well.