Cómo Poner el Like Box de Facebook en tu Blog

26 de noviembre de 2013
74 comentarios
Facebook Like Box

El Like Box de Facebook, es la famosa caja con fotografías que vemos en muchos blogs, también conocida como Fan Box o Fan Page. Mediante el uso de ésta, los usuarios pueden hacerse seguidores (fans) de tu página de Facebook desde tu blog.

Quizás éste es uno de los plugins que más debes tener en cuenta, ya que si un usuario se hace fan de tu página, recibirá las actualizaciones en su cuenta de Facebook. Es un modo de suscribirse y estar al día, para los usuarios activos de Facebook.

Éste es el aspecto que suele tener un Like Box estándar:

Ejemplo de Facebook Like Box

A continuación, verás lo sencillo que es crearte el tuyo, personalizarlo e incluirlo en Blogger. ¡¡Vamos allá!!

Paso 1: Creáte una página de Facebook

Una página de Facebook no es una cuenta de Facebook, una página no tiene amigos, tiene fans. 

Si ya tienes una página de Facebook ¿que haces en este paso?... ve al paso 2. Si, por el contrario, no tienes página de Facebook, te voy a dar las indicaciones rápidas para que te la puedas crear:
  1. Si no tienes una cuenta de Facebook, creátela
  2. Entra en tu cuenta de Facebook y en el menú superior, haz click sobre la rueda dentada y selecciona la opción "Crear página"
  3. Sigue los pasos hasta completar el registro de la página, son muy sencillos, no te preocupes si ahora no seleccionas bien algunos parámetros, ya que luego los podrás modificar
  4. ¡¡Fellicidades!!... ya tienes una página en Facebook.

Paso 2: Configura tu Like Box

Facebook, al igual que la mayoría de redes sociales, dispone de una serie de herramientas e información para desarrolladores y, también como casi todas, sólo ofrece esta información en inglés. En todo caso, siguiendo estos pasos verás que sencillo es incluir tu Like Box, aunque no sepas ni papa de inglés.

Accedemos a la página oficial de Facebook para desarrolladores, esto es lo que veremos:
Facebook - Like Box - Herramientas

Si seguimos la numeración de la imagen, tenemos:
  1. Facebook Page URL.- Esta es la URL de tu página en Facebook, accede a tu cuenta de Facebook y copia la dirección web aquí
  2. Width.- El ancho, en píxeles, que tendrá la caja, intenta que se ajuste al lugar donde la colocarás
  3. Height.- El alto, en píxeles, de la caja. Cuanto más grande hagas la caja, más fotos contendrá
  4. Color Scheme.- Plantilla de la caja, dispones de dos: light (clara) y dark (oscura)
  5. Show Friend's Faces.- Marca esta opción si deseas que se vean las fotos de tus fans
  6. Show Header.- Si marcas esta opción, se mostrará la cabecera de la caja "Búscanos en Facebook"
  7. Show Posts.- Si la habilitas, se mostrarán las últimas publicaciones de tu página de Facebook
  8. Show Border.- Indica si quieres bordes en la caja
Juega con estos parámetros y configúralo a tu gusto, una vez hayas terminado pulsa sobre el botón "Get Code", obtendrás una pantalla emergente como esta:

Código de tu Like Box
Por defecto te aparece el código HTML5, que es el que necesitamos. Como puedes ver, hay 2 secciones de código, el de la parte superior es el código Javascript del SDK de Facebook y el inferior es el código de nuestro plugin Like Box.

Paso 3: Añade el Like Box a Blogger

Añadir el código Javascript

Si ya tenías algún gadget de Facebook en tu blog no te hará falta volver a copiar el Javascript del SDK que te explico en este paso, éste Javascript solo necesita estar una vez en tu Blog.
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&amp;version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  1. Editamos el HTML.- Blogger > Plantilla > Editar HTML
  2. Buscamos <body>.- CTRL+F y escribimos "body"
  3. Pegamos el código Javascript de Facebook.- Copiamos el código  que te he puesto arriba (Javascript) y lo pegamos justo debajo de la línea "body" que has buscado antes.
  4. Guardamos la plantilla
Importante:
No copies directamente el Javascript que te genera Facebook, puesto que no te funcionará  en Blogger. Si lo copias te devolverá un error como éste::

The reference to entity "version" must end with the ';' delimiter.

El código que te he puesto arriba ya tiene resuelto ese problema, solo he tenido que modificar el fragmento que te he resaltado.

Añadir el código del plugin Like Box

<div class="fb-like-box" data-href="http://www.facebook.com/BloggerAyudaCom" data-width="350" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
  1. En Blogger, elegimos la opción Diseño y desde aquí elegimos la opción Añadir un gadget, en la sección de la plantilla donde queramos colocarlo
  2. Seleccionamos el gadget HTML/Javascript
  3. En contenido copia el código del plugin, que generastes en el "Paso 2" (el de la parte inferior)
  4. Guarda el gadget
  5. Mueve el gadget que acabas de añadir en la posición que desees
  6. Visualiza el blog
¡¡ Listo !!  Ya tienes tu Like Box de Facebook funcionando en tu Blog.

Opciones avanzadas

Facebook - Like

El código Javascript que genera ahora Facebook es asíncrono, lo cual nos viene bastante bien para limar puntitos en el Page Speed y, por tanto, en el posicionamiento de nuestro blog. Siempre que puedas, utiliza este tipo de carga. Ojo, porque si ya has utilizado algún otro plugin de Facebook, no necesitarás incluir nuevamente el Javascript generado.

Para modificar nuestro Like Box, nos centraremos en la etiqueta DIV, recuerda:
<div class="fb-like-box" data-href="http://www.facebook.com/BloggerAyudaCom" ...></div>
Mediante atributos "data" del elemento DIV, podremos pasarle  parámetros al plugin de Facebook. La herramienta de construcción del Like Box es muy completa, de hecho solo hay un parámetro que no incluye: data-force-wall.

Estos son todos los parámetros disponibles:

DataDescripción
data-colorschemeCombinación de colores: light (claro)  o dark (oscuro)
data-force-wallPara páginas de ubicaciones
data-headerEspecifica si se muestra el título de cabecera de la caja: true/false
data-heightAltura del plugin en píxeles. Ej: 300
data-href      Dirección URL de la página Facebook que se desea enlazar
data-show-border     Especifica si se muestra o no el borde: true/false
data-show-facesIndica si se desean mostrar las caras de tus fans: true/false
data-streamSi se desean mostrar las últimas publicaciones de la página: true/false
data-widthEl ancho del plugin en píxeles. Ej:350

Vamos a servirnos de un ejemplo real, voy a crear un Like Box de Blogger Ayuda, utilizará colores claros, no mostrará la cabecera, permitirá ver las fotos de los fans, tendrá 600px de ancho y 350px de alto. Este sería el código:
<div class="fb-like-box"
  data-colorscheme="light"
  data-header="false"
  data-height="350"
  data-href="https://www.facebook.com/bloggerayudacom"
  data-show-border="true"
  data-show-faces="true"
  data-stream="false"
  data-width="600"></div>
Y este es el resultado:



Como sabes, este blog lo comencé hace poco y necesita algo de compañía... ¿te apuntas a ser de los primeros fans de Blogger Ayuda? ¿Me ayudas a rellenar esta caja tan pequeña que he puesto encima? :-)

¡¡ Gracias !!

Actualizado el  01.11.2014 para tener en cuenta los últimos cambios de Facebook

Que lo compartas es el mejor regalo que me puedes hacer

Gracias :-)

74 comentarios :

  1. oye, te hago una pregunta: cómo has hecho para que te quede tan bonito la parte de la fecha de la entrada, pues no consigo que quede debajo del título, solo arriba. te agradeceria si me enseñas a hacerlo.

    ResponderEliminar
    Respuestas
    1. Hola Anónimo!. La posición de la fecha dependerá del tipo de plantilla que estés utilizando, pero como bien dices se muestra por defecto en la parte superior del título.

      Se haría muy extenso explicar aquí el paso a paso de cómo hacerlo, pero en modo resumido, es editar la plantilla en formato HTML, localizar el código que muestra la fecha y situarlo en la nueva zona, evidentemente si no te manejas mucho en el código HTML podría ser un poco complicado.

      Como creo que puede interesar el tema, voy a preparar una entrada para explicarlo paso a paso.

      Un saludo

      Eliminar
    2. Gracias por la paciencia. En realidad digamos que lo manejo bastante bien al HTML, pero el problema es que hay varias líneas con el mismo código de la fecha, autor, etiqueta, etc. y por lo general al intentar mover las líneas me aparece algún error con el cierre del código que muestra la fecha. He conseguido colocar el autor y la categoría debajo del título, cosa que no consigo con la fecha aún.

      Además, para lograr esto primero habría que añadir el script con el que se muestran las fechas en todas las entradas, sean del mismo día o no, por cuestión de estética.

      Espero haberme hecho entender, un saludo.. muy bueno el blog, estoy a la espera de nuevo contenido.

      Saludo.

      Eliminar
  2. hola ami solo se me ve si estoy conectado a facebook, si estoy desconetado ya no se ve , tenes alguna idea de como sulucionar esto?

    ResponderEliminar
  3. es mas facil seleccionando a la hora de obtener el código el tipo iframe. despues pegariamos el codigo en un gadget html y ya estaría.

    ResponderEliminar
  4. oye una duda, he seguido esta serie de pasos una y otra vez y siempre me aparece esto:
    Se ha producido un error al analizar el XML, línea 999, columna 1: Element type "body" must be followed by either attribute specifications, ">" or "/>".
    que hago? :(

    ResponderEliminar
    Respuestas
    1. Hola Kename, revisando lo que me comentas creo que se lo que te ocurre. Hay un momento donde comento buscar la línea con "body", quizás me he explicado mal, es esta:

      Buscamos <body>.- CTRL+F y escribimos "<body"

      No tienes que tocar body, solo buscarlo, por el mensaje que te está dando tiene pinta de que has modificado la etiqueta "body". Coméntame si lo resuelves así, para modificar yo esa línea por si se confunde más gente.

      Gracias por comentar ;)

      Eliminar
  5. Hola Fran,

    Cuando pego el codigo justo debjao de body me sale el siguiente error: The reference to entity "version" must end with the ';' delimiter. lo he corregido pero me sigue saliendo el mismo error, sabes de que se trata?

    ResponderEliminar
    Respuestas
    1. Hola Pro Music!

      Por lo que comentas parece que tienes una línea como esta:

      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";

      Para corregir el error sustitúyela por esta otra:
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.0"

      El error se produce porque el código que te generó la herramienta de Facebook no es compatible con el documento XML de blogger, para evitar errores puedes "parsear" el código de Facebook con alguna herramienta como ésta y copiar el código generado.

      Eliminar
    2. Gracias!, estaba vuelta loca tratando de arreglar este error que no me permitía añadir este like box. Zenkiu, me solucionaste el problema

      Eliminar
  6. Muy clara la explicación, y de mucha utilidad. Gracias!!!

    ResponderEliminar
  7. Hola, cuando estoy conectado no se muestra solo se ve un cuadro blanco y si salgo de facebook si se ve el like box bien.
    como soluciono esto? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Ruudv23!

      Normalmente esto ocurre cuando en Facebook estás conectado a una página en vez de a tu perfil personal. Prueba a cambiar a tu perfil personal y mirar la caja cuando estés conectado, ahora debería verse.

      En todo caso es un comportamiento de Facebook con el que Blogger no puede hacer nada.

      Un saludo!

      Eliminar
  8. otra vez sigo los pasos y no me funciona porque? no me pone error en el codigo, todo esta puesto en su sitio...

    ResponderEliminar
    Respuestas
    1. bueno realmente sí me pone un error pero parece del proprio script de facebook: pone eso:
      Erreur d'analyse XML, ligne 674, colonne 64 : The reference to entity "version" must end with the ';' delimiter..

      Eliminar
    2. Hola Alfred,

      Te ocurre lo mismo que le pasó a nuestro amigo PRO MUSIC, para solucionarlo sigue los mismos pasos que le comenté a el, un par de comentarios más arriba.

      Ya me cuentas si así se te soluciona :-)

      Eliminar
  9. Hola buenas yo también tenia ese error y al final encontré el antiguo código de facebook antes de la actualización y sin problema ninguno.

    http://www.diariosdelanube.com/2013/06/mete-en-tus-entradas-de-blogger-los.html
    Aquí encontré la solución




    Saludos

    ResponderEliminar
  10. Gracias!!! esta preciso tu articulo, lo quiero implemtentar en mi web www.sgcli.com, ojala me resulte jeje,,
    saludos!

    ResponderEliminar
  11. Hola. No me sale nada. He seguido todos tus pasos correctamente. A ver si le puedes echar un vistazo y ver el error. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola David,

      ¿Te falla desde que entras en la herramienta de desarrollador de Facebook o al incluirlo en el blog?

      PD: Disculpa por no haberte respondido antes, no había visto este comentario

      Eliminar
  12. Respuestas
    1. Hola María,

      ¿En que parte no te sale nada? ¿Te sale algo al entrar en la pagina de desarrolladores de Facebook y poner la URL?

      Eliminar
  13. Muchas gracias por ese articulo, me ha servido bastante!!!

    ResponderEliminar
  14. La nueva interface de facebook no me muestra el iframe. como lo soluciono?

    ResponderEliminar
    Respuestas
    1. Hola Anónimo,

      Pues siguiendo esta guía... ¿tú la has seguido? ¿en que punto te falla?

      Ya me cuentas ;)

      Eliminar
  15. Muchas gracias! Tu post me ayudó a colocar mi like box! :-)

    ResponderEliminar
    Respuestas
    1. Gracias a ti por confirmarme que sigue funcionando :)

      Eliminar
  16. Impecable explicación , funciona perfecto , acabo de instalarlo y de incluir tu pagina en mis favoritas!

    ResponderEliminar
    Respuestas
    1. Hola M. Laura, gracias por ser uno de tus favoritos ;-P

      Eliminar
  17. Me sirvió un montón, por fin y tengo un like box en mi website, había sido un tanto complicado, porque no aparecía cuando solo ponía el código Java! Gracias Fran, sabes como aplicar un ícono feedly reader al blog? he intentado y ha sido imposible.

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Juan,

      Me alegro que te haya sido de utilidad ;). Sobre el icono feedly en el blog, la verdad que no lo he intentado, habrá que probar.

      Gracias a ti ;)

      Eliminar
  18. Lo tengo aplicado y perfecto, pero me sale en portugués... Como lo puedo cambiar, ya toque el es_ES del sdk, pero sigue igual. En el html tengo definido español, pero nada de nada.

    ResponderEliminar
    Respuestas
    1. Hola Daniel,

      He entrado en tu blog y en tu página de Facebook y lo veo en español, quizás es un problema que tienes con tu configuración en local.

      Un saludo y gracias por comentar ;)

      Eliminar
  19. Me ha ayudado mucho ¡Muchas gracias!

    ResponderEliminar
  20. Hola bueno vengo a pedir ayuda como en alguna otra ocasión ;D supongo que no sabrás la nueva actualización que ponen en los blog lo estoy buscando como loca para ponerlo en el mio y no lo encuentro por ningún sitio y me acorde de ayuda blogger. Bien resumiendo : quiero que la gente entre en mi blog y encuentre esa pantalla molesta que te obliga a dar a me gusta a lo que estas viendo pone un recuadro muy chulo en el que dice : YA OS SIGO, NO ME INTERESA y cuando le das aparece lo nuevo que quieres ver osea la url a la que entraste. Si consigues saber como hacerlo y creas una entrada compártela en mi muro please muchas gracias y feliz día

    ResponderEliminar
    Respuestas
    1. Hola Jessica,

      No tengo una entrada sobre lo que buscas, pero tomo buena nota. Gracias por pasarte ;)

      Eliminar
  21. Hola Fran, tu post me sirvió mucho, gracias! Tengo una pregunta... los likes que dan a los post en el blog no siempre aparecen. Tengo que estar conectada y desde el celular nunca se ven. ¿Sabes si hay algún modo de resolverlo? Gracias!!!

    ResponderEliminar
    Respuestas
    1. Hola,

      Los "Me gusta" deberían verse siempre salvo que estés conectada con una cuenta de página de Facebook. Pásame la dirección de tu blog y le puedo echar un vistazo.

      Gracias a ti por comentar ;)

      Eliminar
  22. Excelente post!! , el único que explica decentemente a los que usamos blogger como superar el error que aparece al copiar y pegar el código... Muchas gracias!!!

    ResponderEliminar
  23. Gracias por este excelente tutorial.

    Por lo general era un proceso sencillo, sin embargo tuve la complicación con el código HTML que me daba error con la "version". Busqué mucho en internet y acá fue el único espacio con una solución que sí funcionó.

    Un abrazo y gracias!!!

    ResponderEliminar
  24. Gracias otro sitio lo tenia pero no lo explica bien muchisimas gracias ya lo puse a funcionar en mi sitio saludos me encanta tu pagina la sigo en todos lados ya que mis sitio web trabaja con blogger

    ResponderEliminar
  25. Gracias!!! Estaba volviéndome loca con el primer código!! jaja. Te ganaste una subscriptora!!! =)

    ResponderEliminar
    Respuestas
    1. Jaja, bien! una más! ya son...1...

      Gracias a ti por comentar ;)

      Eliminar
  26. Muchas Gracias de verdad que me sirvio!!!! Muchas Gracias!! Estaba desesperada que no podia encontrar como poner esa caja de fb!!!

    ResponderEliminar
  27. Muchas Graciassss siempre me generaba error coloque el codigo que facilitastes y funciono....

    ResponderEliminar
    Respuestas
    1. Gracias JCOnline, es importante saber que sigue funcionando el código.

      Eliminar
  28. Hola,muy buena la pagina!! sin embargo no pude meter el likebox, segui los pasos, hasta ahora no sale.Gracias
    Hay algun paso que no estoy haciendo bien.saludos

    ResponderEliminar
  29. Hola de nuevo, parece que facebook cambio el plugin parea agergar el likebox, de igual modo segui los paso, agrego codigho 1 a la plantilla con mi url de pagina,luego el codigo 2 al gadget,pero cunad veo el blog me aparece solo el titulo y una leyenda en rojo que dice : Error: Url no valida para facebook y no me deja ver la cajita de me gusta.gracias

    ResponderEliminar
    Respuestas
    1. Hola Hector, bienvenido

      Pásame la dirección de tu blog con la caja de Facebook incluida, para ver que te puede estar ocurriendo.

      Ya me cuentas ;)

      Eliminar
    2. Hola Hector,

      Aunque es cierto que el plugin de likebox ha cambiado, el código del artículo debería funcionar. He mirado en el código de tu blog y no veo:
      <div id="fb-root"></div>

      Revisa que esté incluido en tu plantilla.

      Eliminar
  30. Hola, estoy diseñando una página web y no logro que se vea el logo de face o el me gusta por mas que copio el script. soy novata, gracias

    ResponderEliminar
    Respuestas
    1. Hola marita,

      Pásame la dirección de tu blog y le echamos un ojo ;)

      Eliminar
  31. Un post muy útil! Ya podrían solucionar ese error! Mil gracias!!!!!

    ResponderEliminar
  32. Tengo una duda, cuando copio el codigo Javascript (sea el tuyo o el que me da la pagina de facebook) al verlo en vista previa no falla el sitio, pero tampoco aparece el box, ¿que puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola, es normal que el código javascript falle en la vista previa en estos casos.

      Un saludo.

      Eliminar
  33. Hola
    He seguido todos los pasos,al principio me salia error pero cambiando al código que pones ya perfecto.
    Despues he ido a diseño y pongo el siguente codigo que me da facebook y bien, pero pasa una cosa, no me sale la cajita con las caras ni nada, vamos que sale banco.....
    mi blog es
    http://cocinandoconevelin.blogspot.com.es/
    No se a que es debido ya que he probado de todo.
    Puedes ayudarme?
    Gracias

    ResponderEliminar
  34. Muchas gracias, me sirvió perfectamente:
    http://paidvenezuela.blogspot.com/
    20 puntos hermano.

    ResponderEliminar
  35. muchísimas gracias! coloqué el primer código pensando que facebook ya había solucionado, porque vi que este post tiene tiempo. Mi sorpresa fue que sigue generando el mismo error, así que seguí tu consejo. Esta es mi página www.alpargataviajera.com.ve

    ResponderEliminar
  36. No se puede!!!!!!!!!! Me pueden ayudar porfavor.

    ResponderEliminar
  37. Hola buenass. Necesito ayuda, por favor. He añadido el texto en HTML, en la plantilla, y no me ha dado ningún error. Pero intento añadir algún widget y no me deja, no hace ninguna acción. Luego he vuelto a la plantilla a borrar el javascript que había pegado y nada, sigue sin aparecerme la plantilla de widgets, no sé que es lo que he tocada de la configuración. Puede alguien ayudarme a restablecer la plantilla como la tenía antes, para que me funcione? Gracias.

    ResponderEliminar
  38. Gracias hermano, muy útil el aporte. Excelente !

    ResponderEliminar