Some time ago I responded to a post regarding how to edit the style sheet (css) for an embedded Facebook Fan Box. The original post with my original comment appears Here.

In short, it is possible to control the style sheet (css) for embedded Facebook Fan Boxes. I have an example with changed icon sizes, a transparent background, and a couple of margin/spacing tweaks on the Facebook Fan Box appearing on www.artofdancemadison.com.

Facebook provides the following documentation…

You specify the location of your css (fully qualified URL to a stylesheet stored on your website, not facebook) in the <fb:fan> tag. Facebook caches your stylesheet. As you develop your modified style sheet, you must append a version number to it (described in the links, above) so Facebook knows to reload your stylesheet (and your changes).

Of course, this means you must be able to upload a style sheet to a publicly-available web server.

If your fan badge also includes the “stream” (story area), the stream area will be a minimum of 300px tall (if I remember correctly). This is true even if you specify a smaller size for the entire badge in the <fb:fan> tag. However, your style sheet can can specify the height…

[edit 06 Jan 2012] Some time recently, Facebook starting putting an inline style on div.page_stream that hard-codes a height. You are able to override inline styles as follows…

.page_stream { height: NNNpx; }
.page_stream[style] { height: NNNpx !important; } /*overrides inline style*/

… or in a single declaration…
.page_stream,
.page_stream[style] { height: NNNpx !important; }

Page Visits: 15260 visits since 10 September 2011
Last Visited: 24 October 2020 at 2:10am