Personaliza tu Like Box o Fanbox de Facebook

Luego de que creciera la popularidad de Facebook, ya hace bastante tiempo, se ha puesto de moda incluir en los sitios web y/o blogs un widget o plugin denominado Like Box o Fanbox.

Este plugin es proporcionado por el mismo Facebook y puede ser embebido mediante código HTML en cualquier página web.

Para ello debemos tener o crear una página de fans en Facebook y al momento de editarla, buscar la opción “Promocionar con un Me gusta”.

Antes de generar el código se nos da a escoger algunos atributos (el ancho, el número de fans, mostrar lo que se publica y mostrar el logo de facebook). Esto nos da como resultado dos tipos de código.

Tipo: iframe

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=138937514309&connections=10&stream=0&locale=es_ES" allowtransparency="true" style="border:none; overflow:hidden; width:300px; height:245px;"></iframe>

Tipo: javascript

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA"></script>
<script type="text/javascript">FB.init("169ca0b3b2d5dbc7b3bb01812e88b2bb");</script>
<fb:fan profile_id="138937514309" stream="0" connections="10" logobar="0" width="300"></fb:fan>

Podemos elegir cualquiera, lo importante es que existe la posibilidad de asociar una hoja de estilos (CSS) al plugin, he ahí el “truco”, simplemente agregando la URL de la CSS en el código generado (ver ejemplo).

Tipo: iframe

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=138937514309&connections=10&stream=0&locale=es_ES&css=http://www.tecnato.com/css/fanbox.css" allowtransparency="true" style="border:none; overflow:hidden; width:300px; height:245px;"></iframe>

Tipo: javascript

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA"></script>
<script type="text/javascript">FB.init("169ca0b3b2d5dbc7b3bb01812e88b2bb");</script>
<fb:fan profile_id="138937514309" stream="0" connections="10" logobar="0" width="300" css="http://www.tecnato.com/css/fanbox.css"></fb:fan>

Lamentablemente nuestras reglas del estilo deben tener la propiedad !important para que causen efecto; además el archivo CSS es almacenado en la memoria cache de Facebook por un tiempo indeterminado, esto quiere decir que si queremos hacer cambios estos no se reflejarán; al menos existe una forma para hacer varias actualizaciones a la CSS, la cual es cambiándole de nombre para cada nueva versión. mejor es agregar una variable, por ejemplo: estilo.css?1, donde «1» representa la versión.

CSS de ejemplo

.fan_box .full_widget .connect_top{background-color:#ced4dd !important;color:#000 !important;}
.fan_box .full_widget .connect_top a{color:#125687 !important;}
body.fan_widget &gt; div div *, body.fan_widget .fan_box .connections{border:none 0 !important;}
#fan_widget_container{padding-left:5px;width:274px;overflow:hidden;}
.fan_box .full_widget {
background:none repeat scroll 0 0 white;
border:solid #1C416C !important;
border-width:0 2px 2px 2px !important;
display:block;
overflow:hidden;
width:auto;
}
.fan_box .connections { border-top:1px solid #A6B2C8 !important; }
.fan_box .connections_grid .grid_item{width:42px!important;}
.fan_box .connections_grid .grid_item img{width:42px!important;}
.fan_box .name_block { display:none !important; }

Autor: Alain

Especialista en desarrollo de aplicaciones web

38 opiniones en “Personaliza tu Like Box o Fanbox de Facebook”

  1. Exelente tip recontra !important; sobre todo si queremos que vaya acorde al estilo de nuestro sitio.

  2. Saludos amigo,
    Me encantó encontrar esta utilidad que he usado en la web de un cliente.
    Pero ahora me gustaria añadirle la opción de que me detecte otro idioma. Para que en vez de que salga «Me gusta» salga m’agrada (que es en catalàn) asi lo quiere el cliente y no me interesa por ahora sobreescribir todo wordpress, prefiero tenerlo en español.
    Alguna idea?
    saludos,
    felicidades por la web, eres un crack.
    marc.

  3. Hola Marc, estuve indagando sobre tu pregunta y el idioma de la caja no puede ser cambiado para los que iniciaron sesión en facebook, porque estos verán la caja en el idioma de su cuenta.

    En caso que no tengan cuenta o no inicien sesión, para cambiar el idioma tienes que modificar el código que hay en la linea 1 del tipo javascript donde dice «es_LA» por «ca_ES», y en el siguiente foro esta con la nueva forma: http://forum.developers.facebook.net/viewtopic.php?id=58704

    Saludos

  4. Hola, ¿Donde se crea la página de fans en facebook? y como puedo hacer para que me salga el logo de mi web? pues he insertado el código de facebook pero me sale un signo de interrogación.

  5. Es como cambiar la foto de perfil, solo ingresas a tu fan page en facebook y luego pasas el mouse donde esta el logo (sigo node interrogacion), ahi te aparece un enlace para cambiar de imagen… Saludos

  6. Mi problema es que el texto de la caja tiene un color que se da de tortas con el fondo de la página, y me dicen los programadores que no se puede cambiar. Hay alguna forma de hacerlo?

  7. Hola Sara, si la hay, tienes que utilizar el código de este artículo y solo le cambias el id y el css; en tu css para cambiar el color de texto usa .fan_box .full_widget .connect_top a { color:[tu color] !important; }

  8. Yo necesitaba cambiar el color de fondo al box (después de mucho cabezaso) sólo coloque la cualidad background al código, funcionó !!!

    …width:200px; height:310px; background-color:#ffffff;» allowTransparency=»true»>

  9. hola, es posible ajustar el like-box, en su altura para que se vea el botón de me gusta y las face de los k le gustan la web.Si yo lo hago mas pequeño, pierdo esa información y me gustaría que saliera. Un saludo

  10. Inserté el código tal cual está y me resultó todo bien, el problema con el que me encontré ahora es que no me muestra el título del sitio en facebook ¿ Qué parámetros habría que modificar en el JS para que me liste el nombre de la página en facebook? Desde ya muchas gracias!!

  11. Buenas tardes, estuve checando tu explicación y la verdad esta muy completa y entendible, ahora me surge una duda, necesito ponerle esquinas redondeadas al box y una imagen de background a la cabecera del mismo, creo tener una idea de como hacer lo de la cabecera pero las esquinas redondeadas es mas complicado, tienes algun tip?

  12. Hola Aurora, pues eso depende del usuario de facebook, a los que son de EEUU ,por ejemplo, les aparece «like» y a los de Peru «Me gusta».

    A los que aun no son usuarios de facebook les debe aparecer por defecto en español según el código que puse (es_LA)

  13. Hola mi problema es el siguiente, segui tus pasos (segun entendi) en mi servidor cree un archivo que se llama fanbox.css, y mi iframe esta asi:

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMilah%2F138223326271177&width=400&colorscheme=light&show_faces=true&border_color&stream=true&header=false&height=250&css=/fanbox.css» scrolling=»no» frameborder=»0″ style=»border:none; overflow:hidden; width:400px; height:250px;» allowTransparency=»true»>

    No sepreocupen por el php ya vi que si sea la direccion de mi archivo.
    Mi intencion es cambar el tamaño del page_stream. Cuando en el debug doy donde quiero modificar, aparece lo siguiente:

    .fan_box .page_stream {
    height: 300px;
    overflow-x: hidden;
    }

    por lo cual en mi fanbox.css tiene lo siguiente:

    .fan_box .page_stream{
    height:139px !important;
    }
    .fan_box .full_widget .connect_top a { color:#090 !important; }

    Pero no veo ningun cambio, ¿Que estoy haciendo mal?¿Como puedo saber que si se esta cargando mi css? alguien podria ayudarme de favor??

  14. Hola rodrigo, agregale «?1» a «/fanbox.css», de tal manera que quede así «/fanbox.css?1», e incrementa el «1» las veces que hagas cambios a tu css (?2, ?3, …)

  15. el post esta muy bueno. Gracias. Lo impresionante es que ver lo de siempre: «En casa del herrero cuchillo de palo»

  16. Hola chicos, yo estoy intentandolo y no lo consigo. Os dejo los códigos:

    iFrame:

    CSS:

    .connect_widget .page_stream img {max-width: 0 !important;}

    Gracias

  17. tengo en mi web like box yo le agrego fondo color negro like box pero sienpre me sale trasparente me dicen que puede ser la plantilla que puedo hacer por favor ayuda

  18. Hola, gracias por tus aportaciones, sigue aplicando esta funcionalidad de cambiar estilos?, use tus recomendaciones pero no hace nada de nada.. es normal?

  19. Mil gracias por tu respuesta, aun mas por tus comentarios,
    sabes si actualmente existe una forma de hacer estos cambios a los estilos?

  20. Hola a todos,

    yo tambien estoy muy interesado en saber si a día de hoy es posible cambiar el estilo del like-box de facebook.

    muchas gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *