Configure your FB Likebox using CSS

Update on 31st of January 2013

This method is no longer supported. (Although the CSS names and values are still valid) Please refer to this latest method to link to the external CSS file instead:

http://webtrick101.blogspot.com/2013/01/facebook-external-css-no-longer.html



Requirement: You need to have a facebook fan page and are able to get its profile_id as explained earlier.


Use this:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<fb:fan profile_id="NNNNNNNNNNNNNN" width="292" height="580" connections="10" header="true" stream="true" css="http://url..../filename.css?1"></fb:fan>





You can adjust the width, height, connections, header, stream, any way you want it but do make sure your css file is located somewhere in the net and can be accessible online. DO NOT point the css to a local file. It won't work. The ?1 is just a variable to tell the browser not to get from the cache. You may need to change it to ?2 or ?3 .... each time you want your browser to reload the css file or it won't be read as it will be taken from the cache of your browser. Any number will do as long as it's not been used before. If you don't want the browser to reload the css content, just leave out the ?1 URL GET/POST data string.




Here's an example of the css to configure your facebook like box or fan box or whatever box to be called in the future.

.full_widget {
  filter:alpha(opacity=90);
  opacity: 0.9;
  -moz-opacity:0.9;
}
.fan_box .profileimage, .fan_box .name_block{
  display: none;
}
.fan_box .connect_action{
  padding: 0;
}
span.total{
  color: #FF6600;
  font-weight: bold;
}

Basically .full_widget is the entire fan box body. I set it to 90% transparent as I wanted it to show 10% of the background.

.profileimage is your avatar. If you don't want it to show up, set it to none like above.

You can refer to an example css settings here. Note: I do not own these css codes.


Update on 31st of January 2013

This method is no longer supported. Please refer to this latest method instead:

http://webtrick101.blogspot.com/2013/01/facebook-external-css-no-longer.html