Muestra la Actividad en Facebook que los usuarios realizan en tu Blog - Atrae a otros a participar y compartir tu Blog por esta red social

Ya no basta con escribir contenidos, ahora es necesario saber difundirlos. En la titánica tarea del Blogger por dar a conocer sus contenidos, está su constante lucha por "existir": estar presente en los buscadores, estar presente en las redes sociales, en los foros... En Diarios de la nube hemos visto multitud de métodos "Social Media" con los que conseguir llegar a más usuarios por medio de las redes sociales.



En otras guías nos hemos centrado en conseguir comentarios en nuestro Blog mostrando en la página principal los últimos que otros usuarios habían realizado. Esto favorecía el impulso necesario para que aquellos usuarios que observan el Blog de visita se fijen en que otros comentan y esto les anime a hacerlo.

Con las redes sociales sucede igual, si bien en esta guía integramos Twitter en nuestro Blog de manera que los usuarios pudieran participar en nuestro perfil twiteando o retwiteando mensajes, con Facebook podemos conseguir un efecto parecido por medio de su llamado "Activity Feed".

La idea 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 propagar nuestro contenido a Facebook mostrándoles cómo otros usuarios interactúan con dicha red social a través de nuestra página.

El Activity Feed incorporará un componente de Facebook que muestra las últimas acciones realizadas en nuestro Blog con "eventos" relacionados con dicha aplicación social. La "caja" de Activity Feed dejará reflejado que un usuario ha pulsado "me gusta" en "tal entrada" o ha seleccionado "enviar" a sus amigos "tal información" de nuestro Blog. Esto hará que los visitantes se animen a realizar las mismas acciones, además les indicará que "hay botones" de "me gusta", "enviar" e interacción con Facebook que muchas veces pasa desapercibida para los usuarios.

Vamos a insertar un "Activity Feed" de Facebook en nuestro Blog y a facilitar un poco más nuestro acceso y promoción a través de esta inmensa red social.

Ejemplo de "Activity feed" de Facebook en vivo

Conceptos Iniciales, ¿Qué vamos a hacer?:

Vamos a proceder a incorporar un "widget" o componente de aplicación externa, concretamente de Facebook, mediante el cual nuestros usuarios podrán ver las últimas actividades realizadas en nuestro Blog relacionadas con dicha red social.

Si un usuario pulsa "me gusta" en una determinada entrada, el "Activity Feed" mostrará "a tal usuario "le gusta" y añadirá la entrada que ha sido de su agrado. Aparecerá con el formato de presentación de Facebook, con la imagen del usuario y, colocado en la página principal, en un punto estratégico, animará a otros a pulsar "enviar", "comentar" o hacer otros "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 dispongas en el Blog de botones de Facebook "me gusta" o "enviar" o la caja de comentar para que el "Activity Feed" se rellene adecuadamente. Te recomiendo, si aún no has incorporado alguno de estos botones de los mencionados botones de Facebook que al menos hagas una de estas guías para conseguirlo:

• 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.

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/activity/

Página para añadir Widget "Activity Feed" de Facebook en nuestro Blog.

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

• Introduce en "URL to comment" la dirección de tu Blog.

• En APP ID debes meter tu número identificativo de Aplicación Facebook. Para encontrarlo es tan sencillo como ponerte encima de la foto de tu perfil en tu página de facebook y copiar la URL que contiene (NO la imagen sino el perfil):

https://www.facebook.com/photo.php?fbid=xxxxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxx.xxxxxxxx.xxxxxxx&type=1&source=11

El número de 17 posiciones a la derecha de "fbid=" es el que debes poner en APP ID.

• En Action, si no pones nada, por defecto significará que saldrán por el activity Feed todas las acciones.

• Rellena el ancho ("Width") y alto ("Height"), con el tamaño en píxeles deseado. Luego lo podrás cambiar al meter el "Widget" en el Blog.

•  A continuación pulsa sobre el botón "Get code" para obtener el código fuente que debes poner en tu sitio web. Tendrás dos divisiones, una con el código que debes introducir en el <body> de tu blog y otra con el código que introducirás en el Gadget HTML/Javascript donde residirá finalmente el Widget de "Activity Feed" de Facebook.

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 los botones AddThis

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

<div class="fb-activity" data-site="http://diariosdelanube.blogspot.com" data-app-id="xxxxxxxxxxxxxxxxx" data-width="300" data-height="300" data-header="true" data-recommendations="true"></div>

Añade el código fuente del AddThis

• 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.