Cambia el look de tu fanbox de Facebook

2 comentaron


Muchos y muchas de vosotros/as seguramente tendreis en vuestro blog el fanbox o caja de seguidores de Facebook. Este widget esta bien, pero resulta un poco 'soso', ¿no os parece? Le podemos dar un toque mas 'cool' y personalizarlo a nuestro gusto utilizando un poco de CSS.

El fanbox en cuestion es asi 'de fabrica' y el codigo basico es este:



<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279&amp;
show_faces=true&amp;header=false&amp;
stream=false&amp;width=600&amp;height=260&amp;
colorscheme=light"></iframe>








Si le añadimos un borde y una imagen de fondo, la cosa va cambiando:



<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279&
amp;
show_faces=true&amp;
header=false&amp;stream=false&amp;
width=400&amp;height=260&
amp;colorscheme=light" style="background-image: url(http://es.softpicks.net/screenshots/Gradient-Screensaver.jpg);
border: 4px solid #000000; height: 260px; overflow: hidden; width: 400px;"
></iframe>







Ahora le redondeamos un poco los bordes:



<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279&amp;
show_faces=true&amp;header=false&amp;
stream=false&amp;width=400&amp;height=260&amp;
=light" style="-moz-border-radius: 20px; -webkit-border-radius: 20px;
border-radius: 20px; background-image: url(http://es.softpicks.net/screenshots/Gradient-Screensaver.jpg
border: 4px solid #000000; height: 260px; overflow: hidden; width: 400px;"></iframe>







Y por ultimo le podemos dar un poco sombreado, por ejemplo:



<iframe scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/REDEANDO/208808342516279&
amp;show_faces=true&amp;
header=false&amp;stream=false&amp;width=400&amp;
=260&amp;colorscheme=light" style="-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
box-shadow: 0px 0px 20px rgba(0,0,0,.8); -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8); -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
background-image: url(http://es.softpicks.net/screenshots/Gradient-Screensaver.jpg);
border: 4px solid #000000;  height: 260px; overflow: hidden; width: 400px;"></iframe>








Yo os he dado una idea, vosotros podeis ponerle el fondo que querais y personalizarlo a vuestro gusto. Todo es cuestion de 'jugar' con el CSS.