14 jun. 2013

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:





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.

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. Hola!! He visto que has cambiado el diseño del blog, me gusta mucho
    más!!!

    Saluditos,

    ResponderEliminar
  2. Ahora toca hacerlo en mi Blog. Gracias por tus explicaciones didácticas y amenas.
    Ah! También me gusta tu nuevo diseños

    ResponderEliminar
  3. buenisimo
    http://nuestromundo2050.blogspot.com/2013/06/como-conseguir-menos-dependencia-de.html

    ResponderEliminar
  4. Hola! está muy buena la explicación!... ¿pero puede ser que facebook cambió estos pasos? Ahora pide otros datos y no logro armarla. Piden estos datos:

    Get your Activity Feed Code
    App ID
    Domain
    Actions to Show
    Width
    Height
    Maximum Age
    Color Scheme
    light

    No logro que funcione esta nueva :(

    ResponderEliminar
    Respuestas
    1. Hola Cynthia, dime la url de tu página y miro qué puedes tener incorrecto a ver si podemos arreglarlo... paciencia que al final sale.

      Un saludo!.

      Eliminar
  5. Hola que tal, mi nombre es Juan y me encuentro con el mismo problema que Cynthia. Al cargar los datos y solicitar el Get Code, necesitaria el codigo de la forma del IFRAME y es aqui cuando me dice "A valid url is required when using the iframe implementation"
    La pagina en cuestion donde necesito inscrutar el codigo es
    http://www.entrerios.gov.ar/icab
    Desde ya mil gracias

    ResponderEliminar
    Respuestas
    1. Hola!,
      he visitado tu página pero no encuentro el código del paso 2), el que lleva lo de fb-root. Debes poner en primer lugar ese script. Cuando lo pongas avísame y veo si lo tienes correcto. No pasa nada porque esté un tiempo ahí puesto, te lo digo porque no podré mirarlo al momento, pero déjalo puesto para que cuando pueda lo compruebe y pasamos al siguiente paso.

      Un saludo!,

      Eliminar
  6. A mi no me muestra los titulos de los posts, solo el nombre, se puede arreglar?

    saludos

    ResponderEliminar
    Respuestas
    1. Hola Pepe, comprueba primero el Feed de tu Blog con esto: http://www.diariosdelanube.com/2013/10/la-utilizacion-del-feed-en-blogger-un.html

      Después comprobamos que en la página tengas bien las etiquetas de título de la entrada y subtítulos posteriores.

      Un saludo!

      Eliminar

    2. Hola. Pues revisé los feed y no encontré problemas, quizás se trate de las etiquetas meta de Facebook. Yo los tengo así:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <meta content='Ximinia' property='og:title'/>
      <meta content='Este es blog no es un blog.' property='og:description'/>
      <meta expr:content='data:blog.url' property='og:url'/>
      <meta content='Ximinia' property='og:site_name'/>
      <meta content='blog' property='og:type'/>
      <meta content='http://4.bp.blogspot.com/-ObpNbhikZww/UVUCCAMYmSI/AAAAAAAAMGQ/7fHjgDy4Qf0/s1600/logo-ximinia-fb.png' property='og:image'/>
      </b:if>

      Me he dado cuenta que está condicionado para el home, aunque no sé qué etiquetas poner para las entradas individuales.

      Gracias por tu ayuda.

      Eliminar
    3. Si el b:if cond que tienes puesto es para ue sólo se muestre en la página principal o dentro del detalle de las entradas. De todas formas, el código que estás utilizando es distinto al que yo pongo en el tutorial.

      Para que te salga en las individuales, usa el mismo "if cond" que pongo b:if cond='data:blog.pageType == "item"' Recuerda poner "<" y ">" para que funcione, que en los comentarios no puedo meter esos indicadores.

      Un saludo y cualquier cosa me dices.

      Eliminar
  7. sabes como se utiliza este recurso
    https://developers.facebook.com/docs/keyword_insights

    me interesa sobretodo poder sacar la info que hay alrededor de una HASH TAG de Facebook y poderla publicar en mi web, me imagine que con el recurso anteriormente mencionado se puede hacer. ¿que me puedes sugerir?

    ResponderEliminar
    Respuestas
    1. Parece que sirve para analizar palabras clave en Facebook. Yo utilizo otros sistemas para el análisis de palabras clave. No obstante lo miro y te cuento a ver qué se puede hacer con ello.

      Un saludo!!!.

      Eliminar
  8. Respuestas
    1. Me alegro mucho Paul, gracias por dar tu feedback. Muchas gracias.

      Eliminar

 

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