This morning I wrote a short tutorial about how to create a fan button from within your Connect-enabled site. According to Facebook however, the code that we posted was technically against their terms and they asked us to remove the post. CSS hacks, while possible, are something that Facebook wants to avoid and having a page which explains how to do a simple hack could set a bad precedent.

As such I’ve gone ahead and removed the post even though any competent developer will know how to isolate the button. Instead they would prefer that you use the fan box wizard to create your fan box icon. So since the CSS modifications we posted this morning are against the terms, what ways can you modify the box that are within Facebook’s terms?

Before explaining, make sure you understand Facebook’s terms about modifying the box using CSS. They state that you cannot obscure or remove:

• Your Page title and icon
• The Become a Fan button
• The order of the elements (button, stream, fans)

Had I read that before, I probably would have known that the post from this morning was against the terms. Anyways, you can change two primary things about the box: the stream and the list of fans. There are two parameters that are passed via the <fb:fan> tag: stream and connections. You can then modify the styles using a basic stylesheet and I’d assume you could use a wrapper div to target styles specifically at the box.

I’ll post an updated articles with some examples but for now I’ve gone ahead and taken down the post from this morning about how to isolate the “Become a Fan” button.