16 jun. 2013

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:





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.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

15comentarios:

  1. Buenas, yo ya lo he puesto pero me está costando mucho arrancar. En Google+, el +1 es mucho más dinámico, a mi al menos el "Me gusta" se me resiste de momento. https://www.facebook.com/Mujerdespuesdelos40

    ResponderEliminar
  2. Sí, es más "rápido" el +1. Una buena forma de impulsarlo es poner en G+ la URL de Facebook y animar a la gente para que haga "Me gusta" en la página de Facebook. Así mismo, enviar correos para que pulsen "Me gusta" a tus amistades puede ayudar. En cuanto pueda tienes mi "Me gusta".

    ResponderEliminar
  3. Enhorabuena, te hemos concedido el premio “Los Mejors Segudors”, lo malo es que como soy un niño tienes que jugar al escondite conmigo, aquí te dejo el enlace para que comencemos a jugar, besitos babosos.

    http://anticrisis2013.blogspot.com.es/2013/06/premios-los-mejors-seguidors-premios.html

    ResponderEliminar
  4. Hola, te cuento un problema que tengo con los Me gusta, y quizá puedas ayudarme:

    Hace un año puse los Me gusta de Fb en cada nota que publicaba en el blog. Siempre me funcionó bien, hasta que hace un par de semanas, en muchas notas el marcador de MG quedó en cero.

    Aclarando que no es el Mg "oficial" (no lo saqué de la página de fb, sino que seguí los consejos de un blog), pregunto: puedo recuperar los Me gusta? es necesario que cambie los MG por los "oficiales"? Cómo sacaría los anteriores para poner los nuevos?

    Agradezco tu respuesta. Saludos.

    ResponderEliminar
    Respuestas
    1. Me pillas en esa materia... desconozco qué se puede hacer para recuperar los me gusta, pero seguro que hay una web de soporte de Facebook a tal efecto.

      Parece que hay una "máquina del facebook" en esta URL que tiene una solución: https://www.facebook.com/help/community/question/?id=441829765892711&answer_id=459364727472548

      Suerte y disculpa que no llegue a tanta precisión... lo mío son los blogs. Un saludo!

      Eliminar
    2. Gracias, pero no me ha funcionado. Alguna página o blogs donde puedan ayudarme?

      Gracias otra vez!

      Eliminar
    3. Prueba con esto: https://www.google.es/search?safe=off&site=&source=hp&q=recuperar+me+gusta+en+facebook&oq=rec&gs_l=hp.3.0.35i39l2j0l8.349.1726.0.4765.5.4.1.0.0.0.243.622.1j2j1.4.0....0...1c.1.26.hp..1.4.384.ffWKG4mCstw

      A ver si hay suerte y encuentras un sitio donde dominen el tema de Facebook y sus "Me gusta" perdidos.

      Eliminar
  5. hola, mision imposible poner el me gusta en el blog, en la plantilla esta palabra body nunca aparecio, bien complicado este tema para mi... Habra otra manera mas facil??

    ResponderEliminar
    Respuestas
    1. Busca sólo por <body y no pongas nada más. Seguidor añades lo de Facebook.

      Cualquier duda me dices si no te sale.

      Un saludo y muchas gracias por participar.

      Eliminar
  6. Muchas gracias por la explicación. Yo tengo una "pagina" profesional de Facebook, que obligatoriamente tiene que ir asociada a una cuenta personal. Cuando realizo este procedimiento que explicáis, el botón me gusta queda asociado a la cuenta personal, no a la página profesional. Si intento hacer este procedimiento, estando logeado en la página profesional, facebook me hace cambiar a la cuenta personal. ¿alguna idea? Muchas gracias.

    ResponderEliminar
  7. ¡Hola!,
    yo lo tengo a una página personal de Facebook pero no a mi perfil personal de Facebook. Creo que tu página será una página empresarial. Considero que si debería dejarte, por si a caso pásame la dirección de tu página facebook y hago pruebas para ver qué se puede hacer.

    Un saludo y muchas gracias.

    ResponderEliminar
  8. Hola Miguel:

    Muchas gracias por el artículo, muy bueno como siempre. Yo antes tenía el recuadro en mi blog, pero haciendo cambios un día lo quité, ahora he intentado hacerlo siguiendo las instrucciones, y me sale esto

    Error al analizar XML, línea 541, columna 64: The reference to entity "version" must end with the ';' delimiter

    ¿Qué puedo hacer? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Ana, se soluciona poniendo "&" antes de donde pone "version". Es decirm antes del ";" hay que poner &amp. Quedaría algo así en la línea que te falla:

      es_ES/sdk.js#xfbml=1&version=v2.0";

      Nota el & antes de version=v2.0. Con esto te funcionará sin problema.

      Un saludo!!

      Eliminar
  9. Eres un crack Miguel, muchas gracias, solucionado.

    ResponderEliminar
    Respuestas
    1. Me alegra que te funcionara. Cualquier cosa aquí estoy. Un abrazo!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.