PLEASE NOTE: Having answered the same questions about embedding YouTube videos and Flash in Static FBML custom tabs and using FBML many many times, I’m closing comments on this article and have posted a comprehensive Static FBML Troubleshooting Guide which addresses all the issues that cause users problems when implementing FBML on their custom tabs. Please refer to this article for help, as I’ve closed comments on this post.
The troubleshooting article, combined with this tutorial and the many user comments, should address your issues and get you sorted out. Cheers!
If you want your CSS styles on your Facebook Custom Tab to work with Internet Explorer / IE 6, IE 7 or IE 8, you MUST use an EXTERNAL stylesheet.
This article explains how to work around this Internet Explorer limitation when creating your Facebook Custom Static FBML Tabs.
The Internet Explorer browser does NOT read CSS styles inlined using this method:
YOUR CSS STYLE RULES
To play nice with Internet Explorer, you MUST use an external stylesheet and call it using this method:
<link ref="stylesheet" type="text/css" href="URL-TO-STYLESHEET" />
External Stylesheets, Internet Explorer & Static FBML
When editing your FBML box…
Implement your CSS styles like this:
NOT like this:
You CAN inline styles directly into the HTML code, and this is supported across all browsers. Example:
<div style="color:#000; border: 1px solid #f00; text-align:center;"> DIV CONTENT </div>
But this can become very cumbersome because you can’t use classes and IDs and have to add the style to every element you want to style.
External Stylesheet Solutions for the Technically Challenged
Unfortunately, requiring an external stylesheet really adds a level of difficulty for those users who now have to deal with uploading a separate file to a Web server.
If you are not an experienced coder and really don’t know anything about creating an external stylesheet, here are some tips:
- Your stylesheet file should:
- Have the extension “.css” and have NO spaces in the name;
- Have ONLY style rules; NOT the <style> … </style> tags!
- Be a PLAIN-TEXT file, NOT created in MS Word or a Rich Text editor.
- 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.
Tip for Refreshing Your Cached Facebook Stylesheet
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" />
Increment the “v=” number to refresh Facebook’s cached version of your stylesheet (10.0, 10.1 …. 10.9, 11.1, 11.2 …. etc.), and then save your FBML box.
If at all possible, you should choose the option to use an external stylesheet. You have much greater flexibility in applying — and making changes to — your CSS using a stand-alone stylesheet.