Contact Us
  • 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:
    Google Sites Add

    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:

    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.


    1. Great tutorial, but what about using Google Docs to accomplish the same thing? You can use Google Docs as a file repository and upload a css or image file to it and get a valid link.

      • What would be the advantage of Google Docs over Google Sites? I can’t imagine why it would be any better, but I’m certainly open to being convinced 🙂

    2. Even though I have my own hosting account, and wouldn’t actually use Google Sites, I was intrigued by the idea. I also liked how well you explained the process. Very easy to understand. Thanks.

    3. Once again you have provided wisdom from the mountain top.Seriously… I love how thorough you are when explaining stuff… many “gurus” omit small but important details. You don’t.

      I’ve been a webmaster for insurance agents for seven years, so I usually think I know everything. But again… I learned something coming here- the forced version refresh command at the end of the css string… that can be a huge time saver. Normally I have just been renaming the external stylesheet to get fb to accept my changes… this is cleaner and simpler. Thanks Tim!

    4. I can’t seem to be able to upload my CSS file. I’ve tried 5 times… Also, I made sure I’m uploading to the right directory and all.

      • It’s hard for me to troubleshoot this. You’re using Google Sites, and you browsed to the .css file and double-clicked it and it didn’t upload?

        • Btw Tim, would you by any chance know how to make the following code FBJS compliant:

          function pokazi(koga) {
          document.getElementById('slika1').style.display = "none";
          document.getElementById('slika2').style.display = "none";
          document.getElementById('slika3').style.display = "none";
          document.getElementById(koga).style.display = "block";

          It works just fine when I preview it with Dreamweaver in Firefox (along with some HTML and CSS – these work fine in FBML – it’s this JavaScript bit that doesn’t function, making my tab navigation useless). Any help would be most welcome (please take into account that this code wasn’t created by me and don’t know much about coding – I’m asking if there’s a quick way to make it work in Static FBML using FBJS?

      • It’s working now. The problem was I was doing it in Firefox 4 Beta 2. I now switched back to Firefox 3.6 and it uploads just fine.

    5. Ismael Lima says:

      Thanks Tim for the great information

      I have a question:

      Do you know if this metod works for the files for an application on facebook?

      Thanks in advance.

      • Good question! I haven’t tested that yet. I don’t see why it wouldn’t but testing will bear it out. I’ll do some checking and you should too. Please post here what you find out. Thanks!

    6. Great tutorial! I’m just starting to use the Static FBML app, and I’m trying to post images through google sites. When my FBML is in a box on the facebook page, the image shows up fine, but when it is a tab, I’m only getting a blue question mark instead of the image. Any advice for making the image show up in the my static fbml tab? Thanks!

      • Emily, Did you test the image URLs directly in your browser to make sure they’re correct? If you can’t figure this out, post here and put the <img src=”” /> code you’re using and make sure to wrap the code in the <code> …. </code> tags!

        • Thanks Tim! I did check the url in my browser and it’s working fine. It also works when the FBML is in a box, just not when it’s a tab! The code I’m using is: <img src="" />

          • Your URL to the images SHOULD NOT be secure “http://” … It should be “http://”. You should check your Google Sites account to see why the image has a secure URL.

    7. Thanks! I couldn’t figure out how to make google sites not secure, so I ended up using photobucket which is working well

    8. When I follow this tutorial (making sure my sites in my file cabinet are shared with everyone)I can’t seem to get rid of the https at the beginning of my address, therefore my style sheets are not working.

      i can’t find any help thru google, any suggestions?

      I am only putting my .css files with my style rules in the file cabinet, the .css contains no html.

      • I knew as soon as I posted this, I would get the answer… I went in and manually removed the “s” from the http and it worked fine…. hope this solves all my problems!

        Thank You Tim for all of your posts and your wealth of information, it is EXTREMELY helpful! 🙂

    9. I have been trying to get this to work correctly for days. I cant get the external style sheet to work. Here is what I have in the external style sheet. Thank you for your help.

      .awesome, .awesome:visited {
      background: #222 url( repeat-x;
      display: inline-block;
      padding: 5px 10px 6px;
      color: #fff;
      text-decoration: none;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
      border-bottom: 1px solid rgba(0,0,0,0.25);
      position: relative;
      cursor: pointer;


      • I don’t see anything wrong in the CSS, so it might be how you’re calling the external CSS or a caching issue?

        • My google sites URL has the s in it. I manually took it out but could the fact that it has the s in the first place be a problem?

          • Are you hosting your CSS on Google Sites? Yes, that “https” might be an issue. I’m actually reconsidering Google Sites. It’s weird because while testing it for my blog post, it wasn’t putting everything on https, but it sure is now. I suspect that Google doesn’t want it used as I propose in this post.

            Let me know what you find out, Adam.

          • OK, thanks for your help

    10. Thankyou very much for this. You’ve just saved me from many hours of pain, with your version tip for clearing the facebook cache.

    11. Hi Tim,

      I just have a quick question; Does calling a javascript on FBML possible? if yes how to do it? Does this code will work?
      <script type="text/javascript" src="http://....script.js"></script>

      I’ve been trying to call a javascript to make a sub tabs in my FBML.

    12. No, I don’t believe that’s allowed. Here’s the Facebook Developer Wiki on FBJS.

    13. Hi Tim,

      I’m back again and hope to get some help..Here is my code from I just wondering if you can find what’s wrong or if this is possible, I can’t really make it work. Or what are the codes that are not specifically allowed with these codes?

      The codes just gives me a 4 tabber tabs but when I click on the next tab it doesn’t do anything. 🙁

      <script src=""></script>

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

      <ul id="countrytabs" class="shadetabs">
      <li><a href="#" rel="country1" class="selected">Welcome</a></li>
      <li><a href="#" rel="country2">Tab 2Box</a></li>
      <li><a href="#" rel="country3">Tab 3</a></li>
      <li><a href="#" rel="country4">Tab 4</a></li>

      <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

      <div id="country1" class="tabcontent">

      This is where I start putting things out! Hope this tab will work..Xoxo..


      <div id="country2" class="tabcontent">
      Tab content 2 here<br />Tab content 2 here<br />

      <div id="country3" class="tabcontent">
      Tab content 3 here<br />Tab content 3 here<br />

      <div id="country4" class="tabcontent">
      Tab content 4 here<br />Tab content 4 here<br />


      var countries=new ddtabcontent("countrytabs")
      countries.setselectedClassTarget("link") //"link" or "linkparent"

      Thanks Tim!

      • There is a lot of configuring needed in the .js file. Have you done all that? One thing I recommend is changing the calls to external files from “https” to “http”, as well.

        There’s too much for me to troubleshoot in your JavaScript. Is the script you got from Dynamic Drive made for Facebook pages or websites?

        Using tabs to show/hide different content is usually done more with the “clicktoshow” and “clicktohide” FBJS. You should read this Facebook article on Dynamic FBML / Visibility.

        If you’re a novice at JavaScript, you should find someone to get it configured properly for you.

    14. Leo Trieu says:

      Hi Tim, it would be great if you can figure out my problem. I have uploaded my images to Google sites and link them to my FB Tab. It works fine except the size of the images used suddenly are larger than the original ones on my Google site. The original one is 520×100 but when it loaded on FB Tab, it was increased to 760×120 !!!

      Hope to hear any advice from you soon

      • It’s a known and current bug on Facebook. Facebook Bugzilla Report.

        Facebook is stretching the images to 760 pixels! But it’s random. I tested with a new Static FBML tab and bg image called from CSS and it worked fine. Existing pages are fine, but new pages seem to be randomly hit with this bug.

        I viewed source on a Fan Page having this issue (Dawn’s page, above) and there’s nothing in the code forcing the image to 760 pixels, so I suspect that Facebook is doing this when they make a copy for their servers.

    15. Leo Trieu says:

      Hi Tim, thank you for your quick response. I have uploaded my images to the photobucket but it doesn’t seem work. I think probably the issue would belong to the Facebook.

      By the way, I have another problem with the function “Default Landing Tab for Everyone Else” in my Edit Page. It was disappeared 2 days ago and I did not know why. I am not quite sure but it apparently happened after I change the vanity URL to my Facebook Page. Any clue, TIm ???

    16. Hi Everyone,

      I may be missing something here…

      My CSS reference is…

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

      You can view the code from the URL, i removed the tags. I have HTML for the flash sections of the page which may cause problems but should at least the background image show?

      • Your CSS URL is correct. But the ONLY content of that .css file should be style rules, no DIV tags, no <p> tags, JUST CSS. It appears you dumped the entire content of your FBML tab into the CSS file.

        BTW, this code markup is pretty bad. Did you purchase this somewhere or do it yourself? If you purchased it, you should get your money back. If you coded it yourself, I suggest you study up on the basics of CSS and HTML. I’d start at W3 Schools.

        • I found the code from a facebook page (can;t remember the name!) and adapted it for my own use. It had it down as CSS but it looked similar to the page I previously made which was really just lots of HTML code between tags.
          I’ll see if I can insert the elements into a properly laid out stylesheet and see if that could work.

    17. Your site has helped me immensely. Thank you!
      Was wondering if you had any tips for adding Google Analytics to a Static FBML tab? Google provides a JavaScript to add to your web page, but when I add to to the FBML box, it causes my custom FBML tab to break and not display at all.

      Thank you for any advice you might have!

      The following is the Google script:

      <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-11702738-2']);

      (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);


    18. hello,

      so the static fbml page i’ve been working with is not rendering the styles in any version of IE. i’ve been using and it was working fine. i then researched and found that some were having the same issue but when they used that it worked for them. I tried this and now no browser (even firefox) is rendering the styles.

      Can you help? thanks! and great article! keep up the good work!

    19. darttz: Get rid of <style> … </style> tags in your external CSS NOW! And all will be well. The ONLY content in an external stylesheet is the styles, NO <style> tags!

    20. yup, i’m on a mac too. i’m using parallels and then going to to test in the different versions of IE. IE is the one i’m worried about, FF and Chrome always play nice. When you have more time i’d really appreciate it if you could help. I know there are a lot of users out there right now having the same issue.

      At one time i was having the same issue. i submitted a bug and it was fixed a couple days later. but now it’s back to the same thing but instead of just not working on IE8 it’s on all versions of IE. it seriously kills me! lol!

      Again i appreciate you looking at it Tim. You’re a good guy.


    21. Great article Tim!

      But, I wondering to know how could you add custom class=”selected” in your so then the nav-bar has different style when its clicked?

      And also is landing page only works for user who hasn’t be our fans?

      *sorry for my english 😀

    22. allright then, I really appreciate for your helps! thanks and keep moving on!

    23. Thanks for the great tutorials.
      I am trying to upload picture to static fmbl tab but I’m only getting a blank white box instead of the image. Any advice for making the image show up in the my static fbml tab?

      #container { width: 520px; }
      #containerLeft { width: 316px; }
      #containerRight { float: right; border-left:1px solid #D8DFEA; width: 184px; }
      .imageContainer { margin: 0 auto 0 auto; text-align: center; }
      .box { border-top:1px solid #94A3C4; position:relative; }
      .box .box_header {background:none repeat scroll 0 0 #ECEFF5; border-top:0 none; display:block; padding:5px 8px; position:relative;}
      .box .box_content {padding:10px 8px;}

    24. I’ve tried to work this one out but can’t possibly find out why it’s not working.

      I have a ‘s style set to “visibility: hidden;”, I have an anchor with onclick=”document.getElementById(‘fb_swf_table’).style.visibility = ‘visible’;”.

      My console shows that ‘fb_swf_table’ doesn’t exist, so I looked through the source to see what Facebook may have changed it to and amended the onclick action to “document.getElementById(‘app109797009082497_fb_swf_table’).style.visibility = ‘visible’;” but it still cannot be found.

      I’m using FBML on a Page’s tab if that makes any difference.

      Any ideas?

      Thanks !

      • You should be using FBJS, not JavaScript. Read about FBJS (Facebook JavaScript) here. There are subtle syntax differences. You want to use:

        document.getElementById(‘fb_swf_table’).setStyle(‘visibility’, ‘visible’);


        document.getElementById(‘fb_swf_table’).setStyle({visibility: ‘visible’})

        Both work.

        I’m pretty sure you don’t need to use the ID name that Facebook converts it to, but if the above doesn’t work, try that.

    25. Amanda Cornish says:

      If you guys are having an issue with the https in Google pages links, I use to fost my css files – it’s free!

    26. Hi,

      I am a newbie and I have followed the steps that you mention above.
      However, it seems not to work on facebook static fbml.

      I am not sure where the error lies but i suspect is the css codes

      The codes can be found here:

      My facebook page with link to the tab*:

      *This is not my actual facebook page, i just created this page to test the codes

      Thanks a million!

      • Xuan, Your “CSS” file is a mess, and it’s apparent you’re not at all familiar with coding. It’s hard to know where to start.

        Let me just say that the egcss4.css you have should ONLY have what is between:

        background-color: #FFFFFF;
        background-image: url(“”);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right bottom;


        font-weight: normal;

        I don’t know where you got the other code, but if you do the above, at least your CSS file will be correct.


    27. hi Ive been figuring this out and have created external style sheets on Google site like u said.

      the link would be:

      however i followed the instructions but my IE browser still wont show due to the css styling.

      my blogspot html code would be like this:

      <!–[if IE]>–>

      [ DELETED ]

    28. sorry the code would be like this*:

      [ CODE DELETED ]

      • Ryan, I didn’t need to show all your code. Your basic mistake indicates you need to read a very basic article on using Static FBML!

        You should ONLY include the content between the <body> … </body> tags should be in your FBML box — NO doctype, <html>, <head>.

    29. Kudo’s to you for this article!
      Couldn’t understand why my client’s mini site wasn’t displaying properly in IE. I had a feeling it was because of the CSS, so now it’s fixed thanks to your tutorial! Great idea to host it on Google!


    30. hi again. ive changed the thing.
      but still m not able to make my blog show in IE.

      my link to the external style sheet is correct and the contents in the .css file hosted on google sites is as follows.

      [ CODE DELETED ]

      i don’t see what im doing wrong.
      thanks again. really appreciate it

    31. come to think of it. is this a page for some facebook customization thing?
      im trying to get my blog on blogspot to work, while using css styles to show on IE.
      doers the steps learnt here apply to me?

    32. Tim,

      I am only doing the research to completely revamp my FB Page. Last year I started an agency, but was then became a partner with a start-up. I’m returning to my agency with a whole new focus and energy. I wanted to ‘turn it up to 11’ as it were, and I firmly believe your information has given me the tools to effectively demonstrate my abilities! Thank you so much and I will keep you posted.


    33. Robbie Kennerney says:

      bare with me here. I made a background for my FBML page in photoshop, it was 520 x 660, and I hosted it externally through a CSS. It proved to be too small of a background for the text I was entering so I went back and made a new background, only this time it was 520 x 1080px. When I do this however, the width becomes narrower than 520 on the page, even though this is the PNG’s correct width. I can’t figure out a way around this … any ideas? I re-hosted it correctly so is it that I need to save it differently on photoshop, or is it an fbml problem?

    34. hi Tim,
      wondering if you decided or found and alternative to google sites since its https happy these days?

      wondering why it wouldn’t work on docs but then all my css on docs lately has been wonky so scratch that. o_0 … i’ve been looking too and am having a hard time finding a good freebie that would work. hmmm, TLP= taps finger on head and Thinks Like Pooh. “think think think”

      • I believe folks have had success using Google Sites, even with the https. You might try removing the “s” in the URL in your <link /> tag so it’s just http://.

    35. Me again- thought- TLP- why doesn’t Facebook just let us HOST our images on Facebook and give us the code options? Would it not be Mutually Beneficial. The goal is to keep us On Facebook and since so many of us are ON Facebook networking and doing Biz via pages, wouldn’t that be a good move for them? Who do we need to call about this one =)

      • Actually, you can host your images on Facebook. Each photo you upload has its own unique URL. But it’s easier to maintain your images yourself if you host them elsewhere, I think.

    36. Kelly Bundy says:


      I learned more from this than 7 hours with my IT guy!!

    37. You are just great! Your tutorials are so helpful.

    38. You have bailed me out again! I am a novice at this. I was using my pogoplug to “host/share” my external css and images. It worked great except when at work… the Army blocks the mypogoplug site so is wasn’t working if viewing from work!

      Thanks again!

    39. Hi, I am not a web-designer, and am a newbie to this, and everything sounds foreign to me. You recommended W3 schools which is equally foreign. All I want to accomplish is to display my landing page in Internet Explorer, as it works in Safari etc. The code was generated from – so I did not write this code. If possible, please explain in the most simple terms what I can do to make this work. I tried including the link you mentioned above etc, but it still doesn’t work and i’m more confused than ever.
      Please help if you can. My frustration has peaked!

      • Hi Anne, We don’t have the bandwidth to troubleshoot everyone’s code. You can hire us, or someone else, to help you out. Call HyperArts and ask for Jason.


    1. […] Static FBML FAQ / Tutorial « To Build a Facebook Page, You Need a Profile Facebook Static FBML: Setting Up Your External CSS Stylesheet Hosting with Google Sites […]

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

    3. […] Your stylesheet file needs to be hosted on a Web server. If you don't have a Web hosting service or FTP knowledge, I recommend setting up a Google Sites account and creating your stylesheet there. Here is my tutorial on using Google Sites to host your external stylesheet. […]