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.
![[Inside Social Apps 2012]](http://www.allfacebook.com/wordpress/wp-content/themes/allfacebook2/images/ISA2012_336x100_F_RegisterNow.gif)
![[AllFacebook Stats: Facebook Analytics for Your Business]](http://www.allfacebook.com/wordpress/wp-content/themes/allfacebook2/images/stpro_allfacebookstats.gif)
![[How can Facebook change your business?]](http://www.allfacebook.com/wordpress/wp-content/themes/allfacebook2/images/FMB_A_MAY2011_336x100_F.gif)
Wooow, thanks for this post, I will correct my websites, its good that those changes were not deployed yet
Comment by Israel Boucchechter — July 14, 2009 @ 10:33 am
Read the post in RSS which still featured the old one as it was downloaded. Implemented the CSS and then thought to leave a thank you comment and annoyed to see the post change
Thanks anyways
Comment by Hamad — July 14, 2009 @ 2:48 pm
So can we just have the Title, icon and become a fan button? Instead of showing all the fan images and post? Because we don't want to add the whole thing on the homepage. The whole thing will be on subpages, but wondering how it is for homepage?
Comment by Syed Balkhi — September 16, 2009 @ 8:32 am
I'm having problems with the become a fan button, it reads error on my page
Comment by vinska klet — January 6, 2010 @ 11:28 pm
I read the guidelines regards what I'm not allowed to change, but what if my Fans Page icon really has nothing to do with my layout, and I would like to replace it with a 'Facebook' Icon instead? Facebook will get mad at me?
Comment by Dror Bloom — January 7, 2010 @ 8:23 am
LOL! Hmmm. I have seen the Facebook BUTTON on many sites! The box is to large and anoying to have it on the subsites.
The front page is ok but it is a pain in the ass at sub pages… I think Facebook can make the button a choise. So you can either have the box or only the button. That would been much better!
Comment by Fredrik — January 19, 2010 @ 11:56 am
Can somebody send me the original post, against the terms or not? Would love to see how it was done. Thanks!
Comment by Michael Ketchum — January 19, 2010 @ 1:09 pm
yea could we see the original post please
Comment by sima49 — March 1, 2010 @ 12:16 pm
how to add become a fan button in our facebook apps ?
Comment by Fahad Ahmed — April 8, 2010 @ 5:13 am
how to add a become a fan button on facebook
Comment by Sam Patten — July 11, 2010 @ 1:13 pm
xd
Comment by coter_15 — February 27, 2011 @ 1:13 am
When i add facebook comment box in my blog, it shows empty space below the facebook commnet box. Someone can help me about to resolve this issue with facebook comment box?
Comment by Vamban Blog — March 17, 2011 @ 6:40 am
Nice post
Comment by vacation deals — July 30, 2011 @ 6:14 am