Agregar el FanBox de Facebook en el blog (sin bordes y un extra)

El FanBox o LikeBox de Facebook es esa cajita que muestra los avatares de las personas a las que les gusta determinada p?gina de Facebook.

Agregar el Fanbox en Blogger es bastante sencillo y no requiere quebrarse la cabeza con c?digos.

Primero entra a Facebook Developers .

Ah? agrega la URL de tu p?gina de Facebook, selecciona el ancho del gadget, color del tema, si deseas mostrar los avatares, la actividad reciente y la cabecera del gadget.

Ya que lo tengas listo da click en Get Code.

Aparecer? un c?digo para copiar; copia el c?digo que est? debajo de iframe.
Luego entra en Dise?o | A?adir gadget | HTML/Javascript y ah? pega el c?digo que copiaste.
Con eso ya tienes el Fanbox en tu blog.




Algunas veces la p?gina de Facebook anda medio loca y en el c?digo nos pondr? una altura de 62px con lo cual se ver? s?lo un rect?ngulo. Para arreglarlo s?lo cambia el alto (height) del c?digo en las dos veces que aparece:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fciudadblogger&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;" allowTransparency="true"></iframe>

Con una altura de 289px ser? m?s que suficiente, pero si deseas mostrar m?s avatares entonces agrega una altura mayor.

Notar?s que el Fanbox tiene integrado unos bordes grises que no se ven nada est�ticos y adem?s debajo aparece el icono de Facebook con el texto Plug-in socialde Facebook.
Lo que haremos ahora ser? quitar esos bordes, el texto debajo, y aprovechando podemos modificar el color de fondo.
Para aplicar estos cambios agrega a tu c?digo lo que est? en color azul:

<div class='likeboxwrap'>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fciudadblogger&amp;width=292&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=true&amp;height=289" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:289px;" allowtransparency="true"></iframe>
</div>

<style type='text/css'>
div.likeboxwrap {
width:290px; /* Quitar 2px al ancho del gadget */
height:264px; /* Quitar 25px al alto del gadget */
background-color:#8A084B; /* Color de fondo del gadget */
overflow:hidden;
}
div.likeboxwrap iframe {margin:-1px}
</style>

Y el resultado ser? este:

Aqu? hay que tomar algunas cosas en consideraci?n:

Para poder aplicarle un color de fondo es necesario que tengas el tema light en el gadget y NO el dark.

Dentro del c?digo extra que hemos agregado hay unos estilos del ancho y alto del gadget; al ancho (width) del Fanbox le restaremos 2px para eliminar por completo el borde; y al alto (height) le restaremos 25px. Eso se cambia en donde se ha se?alado en color verde.

En algunos casos cuando el Fanbox sea m?s grande o cuando hayan elegido no mostrar la cabecera del FanBox entonces podr?an restarse otros valores del acho y alto, ya ser? cuesti?n de que cada uno modifique ese ancho y alto hasta que obtenga el mejor resultado.