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 = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</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.
Hola!! He visto que has cambiado el diseño del blog, me gusta mucho
ResponderEliminarmás!!!
Saluditos,
Ahora toca hacerlo en mi Blog. Gracias por tus explicaciones didácticas y amenas.
ResponderEliminarAh! También me gusta tu nuevo diseños
buenisimo
ResponderEliminarhttp://nuestromundo2050.blogspot.com/2013/06/como-conseguir-menos-dependencia-de.html
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:
ResponderEliminarGet your Activity Feed Code
App ID
Domain
Actions to Show
Width
Height
Maximum Age
Color Scheme
light
No logro que funcione esta nueva :(
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.
EliminarUn saludo!.
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"
ResponderEliminarLa pagina en cuestion donde necesito inscrutar el codigo es
http://www.entrerios.gov.ar/icab
Desde ya mil gracias
Hola!,
Eliminarhe 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!,
A mi no me muestra los titulos de los posts, solo el nombre, se puede arreglar?
ResponderEliminarsaludos
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
EliminarDespués comprobamos que en la página tengas bien las etiquetas de título de la entrada y subtítulos posteriores.
Un saludo!
EliminarHola. 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.
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.
EliminarPara 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.
sabes como se utiliza este recurso
ResponderEliminarhttps://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?
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.
EliminarUn saludo!!!.
Gracias lo pude integrar a mi Blog
ResponderEliminarMe alegro mucho Paul, gracias por dar tu feedback. Muchas gracias.
Eliminar