TECNato – TIC's Perú

Personaliza tu Like Box o Fanbox de Facebook

viernes, 16 de julio del 2010 38 comentarios

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; }

Escrito por para TECNato

38 comentarios

  • wilson
    16 de julio del 2010

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

  • Marc
    14 de septiembre del 2010

    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.

  • Alain Alejo
    21 de septiembre del 2010

    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

  • Ver fotos
    22 de diciembre del 2010

    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.

  • Alain Alejo
    23 de diciembre del 2010

    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

  • Crea tu Fan Page en Facebook « TECNato – Comunidad Tecnológica del Perú
    28 de diciembre del 2010

    […] crear tu Like Box (caja de fans) que luego puedes colocar en tu Sitio Web o […]

  • Sara
    11 de enero del 2011

    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?

  • Alain Alejo
    18 de enero del 2011

    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; }

  • Young Guns
    24 de enero del 2011

    Hola Alain,

    Mi pregunta es si existe alguna opción parecida con el Comment Box

    Mi problema es que mi web es en tonos grises oscuros por lo que la caja del comment resalta demasiado y sin embargo luego los comentarios no se leen con claridad

    Queda así

    http://www.younggunsmusic.net/american/fightingthevillain/biography.html

  • Atreyu
    9 de febrero del 2011

    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»>

  • Alain Alejo
    10 de febrero del 2011

    Buen aporte Atreyu, gracias y saludos.

  • nacho
    13 de febrero del 2011

    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

  • Pablo
    24 de febrero del 2011

    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!!

  • Alain
    24 de febrero del 2011

    Hola, aqui les dejo un tutorial paso a paso: http://goo.gl/Z3D5J

  • Alain
    25 de febrero del 2011

    Pablo, si te refieres a tener la URL del tipo http://facebook.com/titulo-del-sitio, primero debes tener como mínimo 25 fans y luego tienes que configurar el título en el mismo facebook.

  • Abisai Ruiz
    29 de marzo del 2011

    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?

  • Alain
    29 de marzo del 2011

    Hola Abisai, para las esquinas redondeadas puedes usar CSS3 o bien usar imágenes, aqui tengo un post http://tecnato.com/estilos-genericos-para-css/ donde se explica como hacer ello, Saludos.

  • Aurora
    9 de junio del 2011

    Pero como le cambio el idioma, en vez de «like» a «Me Gusta».

    Gracias

  • Alain
    9 de junio del 2011

    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)

  • JAVIER
    28 de junio del 2011

    hola, me gustaría poder cambiar el idioma del LIKE a ME GUSTA… DONDE LO PUEDO CAMBIAR? GRACIAS

  • Alain
    28 de junio del 2011

    Hola javier, busca “en_US” en la etiqueta SCRIPT y cambialo por “es_LA”, salu2.

  • JAVIER
    1 de julio del 2011

    podrias ser un poco mas concreto… porque la etiqueta script esa no la veo … gracias

  • JAVIER
    5 de julio del 2011

    sigo esperando una respuesta…

  • Alain
    5 de julio del 2011

    En todo caso solo busca «en_US» en el codigo que te genera el facebook y cámbialo por «es_LA»

  • JAVIER
    5 de julio del 2011

    aoooora… gracias

  • La imagen de tu empresa en Facebook | guisandounaweb
    31 de agosto del 2011

    […] crear tu Like Box (caja de fans) que luego puedes colocar en tu Sitio Web o […]

  • rodrigo
    9 de septiembre del 2011

    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??

  • Alain
    19 de octubre del 2011

    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, …)

  • maio
    20 de octubre del 2011

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

  • Vostok
    22 de noviembre del 2011

    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

  • Alain
    24 de noviembre del 2011

    Hola Vostok, que tal si nos muestras la página donde lo estas aplicando, lamentablemente no salió tu código.

  • waler
    1 de marzo del 2012

    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

  • Alain
    1 de marzo del 2012

    Hola Waler, ponle el fondo negro al contenedor del iframe, osea al td. Saludos

  • fede
    19 de abril del 2012

    No me funciona :S

  • Pat
    7 de febrero del 2013

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

  • Alain
    7 de febrero del 2013

    Hola, ya no se aplica, el post es antiguo, Slds.

  • Pat
    8 de febrero del 2013

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

  • Rafa
    13 de mayo del 2013

    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 tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).

Hazte miembro

TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
CMS:
WordPress