El "Me gusta" más útil que puede ponerse a un Blog con página en Facebook

"Me gusta", con dos palabras tan sugerentes Facebook consiguió crear una nueva forma de evaluar el interés por cualquier cosa que se compartiera por su red social. Desde marcas, hastas personas, animales o cosas... todo es susceptible de recibir esta calificación en el mundo de las redes sociales.

Los usuarios de Blogger desean dejar su Blog bien alto en Facebook. El "Like Box" es posiblemente el "añadido social" más interesante para conseguir en parte este objetivo.


Su colocación en un lugar visible de la página principal favorece que el usuario que visita nuestros contenidos  los califique con el famoso "Me gusta". Además, al aparecer las caras de otros usuarios que han realizado la misma acción, se consigue además el efecto de "animar a hacerlo" tan útil para esta clase de componentes sociales.

Si tienes una página en Facebook dedicada a tu Blog, tu marca o tu web, este "componente social" es imprescindible para tí.

La idea de nuevo, es la misma que perseguíamos al animar a los usuarios a comentar en el Blog o a Twitear en Twitter; esta vez nos proponemos animarles a calificar nuestro contenido en Facebook con un "Me gusta" viendo  cómo otros usuarios han hecho lo mismo.

Ejemplo de "Like Box" de Facebook en vivo

Conceptos Iniciales, ¿Qué vamos a hacer?:

Vamos a proceder a incorporar un "widget" o componente de aplicación externa de Facebook, mediante el cual nuestros usuarios podrán hacer "Me gusta" sobre nuestro sitio web, así como ver otros usuarios que igualmente lo han hecho. Debemos tener creado un perfil Facebook con "Me gusta" para nuestro sitio web o Blog. Los "Me gusta" que se hagan desde Facebook se visionarán en el Blog por medio del componente, igualmente desde el Blog se verán aquellos realizados desde el perfil del Blog en Facebook.

Aparecerá con el formato de presentación de Facebook, colocado en la página principal, en un punto estratégico, animará a otros a pulsar "me gusta".

Recomendaciones:

Es importante hacer la reseña de rendimiento, la incorporación de "scripts" de aplicaciones externas a nuestro Blog pueden implicar un sobrecoste para el rendimiento del mismo. Es necesario que cada vez que incorporemos esta clase de elementos en él, midamos el rendimiento del sitio con Page Speed para evaluar si estamos perdiendo velocidad de ejecución y más que suponer una ventaja, suponga un inconveniente.

Es imprescindible que te crees una cuenta en Facebook para tu Blog, de manera que el "Me gusta" que hagan directamente por Facebook se refleje en el componente o los "Me gusta" que hagan desde tu Blog se reflejen en tu perfil.

Otros botones y componentes "Social Media" de Facebook que pueden servirte en tu Blog:

• Guía para meter el "comentar" de Facebook en tu Blog y que los usuarios lo puedan publicar en el muro.
• Añadir botones para redes sociales para usuarios noveles.
• Colocación de botones para redes sociales en puntos estratégicos del Blog I
• Colocación de botones para redes sociales en puntos estratégicos del Blog II.
• Guía para añadir un componente "Activity Feed" de Facebook en tu Blog

Paso a paso:

1) Nos conectamos a la URL de Facebook Developers, a la página para el "widget" de "Activity Feed": https://developers.facebook.com/docs/reference/plugins/like-box/

Configurando el "Like-Box"

• Introduce los datos en la sección de configuración del widget de la página de Facebook:

• Introduce en "Facebook Page URL" la dirección en Facebook de tu Blog.

• En Width establece el ancho que deseas para el componente, pon un valor teniendo en mente la colocación que le vas a dar. Luego en el propio código, cuando lo pegues en tu Blog, podrás cambiarlo sin problemas.

• Rellena "Color Scheme" para indicar el tipo de combinación de colores que más "pegue" con tu sitio web o blog. "Light" para sitios claros y "Dark" para oscuros.

• "Stream" por si deseas mostrar toda la cadena de "Me gusta" más recientes.

• "Show Header" sirve para mostrar el nombre con el icono del sitio en Facebook. Es imprescindible para que el usuario sepa sobre qué hace "Me gusta".

• Por último pulsa "Get Code" para obtener el código fuente que después añadiremos en Facebook.

Pantalla para copiar el código que introducirá el "Like Box" en nuestro Blog.

2) Ahora sólo queda insertar el código extraído de Facebook en tu Blog. Dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.

• En primer lugar realiza una copia de seguridad de tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.

• En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "<body" (no pongas la etiqueta de cierre de body) y justo debajo inserta el código que extraiste de Facebook correspondiente al apartado del "<body>".

Pantalla de edición de la plantilla HTML. pulsa CONTROL + F y busca la etiqueta "<body"

<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/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

NOTA: Debido a la última actualización que Facebook ha introducido en sus scripts, si te da errores en la plantilla al tratar de salvar el código anterior, utiliza este que a continuación te muestro.

<div id='fb-root'/><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 = &quot;//connect.facebook.net/es_ES/sdk.js#xfbml=1&amp;version=v2.0&quot;;  fjs.parentNode.insertBefore(js, fjs);}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Si este código ya lo tenías añadido con anterioridad por tener alguna funcionalidad de Facebook incorporada ya al Blog, no es necesario que vuelvas a meterlo y puedes pasar al siguiente punto.

• En Blogger accede a la edición del HTML de la plantilla pues Blogger

Opción de diseño en Blogger.

•  En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el "Widget" de comentarios de Facebook y selecciona el Gadget "HTML/Javascript".

Pulsa sobre "Añadir Gadget" en la zona donde deseas insertar el Like-Box

• Añade el código fuente que recuperaste de Facebook:

<div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-stream="true" data-show-border="true" data-header="true"></div>

Añade el código fuente del Like-Box

• Pulsa "Guardar Disposición" y ¡ya lo tienes!

¡Eso es todo!, ahora podrás conseguir que otros usuarios se animen a interactuar con tu Blog y Facebook al ver las acciones de otros.