Facebook fan-box stopped respecting the “css” attribute?

Looks like this doesn’t work anymore. Maybe Facebook stopped respecting the “css” attribute? Does this still work for anyone?

Solution

Facebook has deprecated the Fan Box (introduced in 2009) in favor of the new Like Box. While the features of each are similar, they use different JavaScript APIs.

You can still customize the appearance of the Fan Box with your own external CSS, but it's unclear how long Facebook will continue to support this ability.

Here's some sample FBML code that shows how the Fan Box accepts external CSS:

<div id="fb-root"></div>
<fb:fan
    profile_id="104818966496"
    backgroundshow_faces="true"
    stream="false"
    header="false"
    connections="8"
    css="http://example.com/css/stylesheet.css?1310162522">
</fb:fan>

<script>
    // Initialize Facebook JavaScript SDK
    // http://developers.facebook.com/docs/reference/javascript/FB.init
    window.fbAsyncInit = function() {
      FB.init({
        appId: '136570223089806',
        xfbml: true
      });
    };

    // Asynchronously Load Facebook Fan Box Social Plugin
    (function () {
      var e = document.createElement('script');
      e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
      e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

Some things to keep in mind:

Your custom CSS will be filtered through Facebook's content rendering servers and needs to be public facing. (Meaning, you'll have to upload/edit your CSS file to a web server to test how it looks when making changes).
It's recommended to append (and update) a query string to your CSS during development, since Facebook will heavily cache your CSS. After making a change, update your query string variable to instruct Facebook to fetch a new copy of your stylesheet.

Facebook will prefix all your HTML/CSS/JS elements with a "namespace" created using your application id. By doing this, Facebook ensures that your CSS can't manipulate standard Facebook elements and layouts.

Be aware, not all CSS properties and selectors are allowed, and Facebook will remove many CSS3 rules from your CSS.

Most frustrating of all though, is that Facebook seems to remove allow some vendor prefixes while disallowing others. For example, Facebook removes Webkit vendor prefixes (-webkit-border-radius) but allows Mozilla prefixes (-moz-border-radius). Annoying!

This means that rounded corners, drop-shadows and other vendor specific CSS may not appear in all browsers for your custom Facebook Fan Box. So, try as you might, you just may not be able to get your Facebook Fan Box to look the same in all browsers.