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

Webmaster 19/08/2011

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 | Elementos de la página | 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="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffans.comunidadbloggers&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="https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fon.fb.me%2Fcomunidadbloggers&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.