Introduce una barra lateral deslizante para que tus usuarios puedan compartir tus contenidos por las redes sociales

El usuario de Blogs hoy día se ha vuelto más exigente y más activo con los artículos que realmente le interesan. Los consumidores habituales de blogs y páginas web por Internet han pasado de hacer el "+1" de Google o el "Me gusta" de Facebook a compartir directamente por dichas redes sociales aquel contenido que les ha parecido realmente interesante.



Hemos pasado de unos usuarios que eran "meros" espectadores a auténticos críticos y difusores de nuestra propia información. Es por ello que se demanda en cualquier forma de publicación por Internet actual unos iconos con los que nuestros visitantes puedan difundir el contenido si este ha sido de su agrado.

El usuario es parte activa del Blog y como tal hay que proporcionarle las herramientas que le permitan difundir aquello que le ha gustado. Los típicos "+1" de Google o los "Me gusta" de Facebook se acumulan al lado de las publicaciones, cuado lo realmente importante es su difusión.

Se trata de un componente vertical con botones para compartir por las principales redes sociales que se desliza lateralmente, acompañando al lector según se mueve  por la página de una manera discreta, sin agobiarle ni impedirle la visión del texto que le estamos mostrando, independientemente del tamaño o resolución de su pantalla.

Te propongo un tipo de "botonera" para que tus usuarios se hagan "apóstoles" de tus contenidos y puedan expandir por sus redes sociales aquello que les ha llamado la atención, sin penalizar el rendimiento de la página principal de tu Blog.

¿Qué vamos a hacer?:

Vamos a centrarnos en colocar los botones para redes sociales en un componente vertical deslizante que acompañe al usuario en su lectura para poder compartir tus contenidos. Pensemos que muchas veces perdemos oportunidades de llegar a más personas simplemente porque la usabilidad de nuestro Blog no ofrece facilidades al consumidor para que éste pueda compartir lo que está viendo.

¿Qué hay de especial en esta barra vertical de iconos para redes sociales?:

• La vamos a preparar para que independientemente de la resolución de pantalla de tus usuarios, la barra siempre se dibuje en un lateral sin molestar o impedir su visión.
• Vamos a prepararla para que no penalice el rendimiento de tu página principal, donde el usuario ya puede utilizar los botones que por defecto trae Blogger o tu página web a tal efecto.

Conceptos previos para los más noveles, ¿Qué son los botones sociales?:

Los botones para redes sociales son como su propio nombre indica "botones web" que al ser "pulsados" por los usuarios, les conectan directamente o con nuestro perfil en una determinada red social ("follow buttons") o le permiten difundir nuestro contenido entre sus amigos y seguidores de su propia red social ("share buttons").
Veamos las diferentes modalidades para aplicarlas en nuestro Blog.

• Los botones de las redes sociales exigen la utilización de unos "scripts" que permiten introducir en nuestro Blog los "mecanismos necesarios", a través de código fuente para:

- Que los usuarios puedan puntuar nuestros contenidos o sumarse a ellos.
- Que los usuarios puedan suscribirse a nuestros contenidos, hacerse seguidores nuestros.
- Que los usuarios puedan "difundir" por su red social preferida nuestra entradas para que puedan leerlas otros usuarios.

• Estas posibilidades son revolucionarias, pues permiten a nuestros clientes interactuar, propagar, difundir nuestras creaciones más allá del círculo social en el que nosotros nos movamos para pasar a incluirlo dentro de otros que nos son ajenos.

• Por supuesto, la adición de estos añadidos obliga o, más bien, hace imprescindible estar dado de alta en todas las redes sociales cuyos botones decidamos poner en nuestro Blog.

Un breve repaso de sobre la colocación, ¿Dónde puedo colocar los botones para redes sociales en nuestro Blog?:

Hay dos zonas en las entradas de nuestro Blog especialmente sensibles para que nuestros usuarios localicen con facilidad los "botones sociales" y los puedan utilizar incluso instintivamente:

Ejemplo de Addthis sobre Share Buttons

• La parte superior de una entrada, FOLLOW BUTTONS: en la cabecera a izquierda o derecha, antes o después del título. Aquí lo más recomendable es utilizar botones de tipo "Follow button": los que permitirán a los usuarios asociarse nuestro perfil de red social y estar antentos a nuestras actualizaciones por medio de seguimiento. Debido a que no requieren cargar scripts, son idóneos para las primeras líneas de una entrada pues son mucho más vistosos que los "Share buttons", y no ralentizan el proceso de carga de toda la página. Si quieres aprender a colocar los "Follow Buttons" puedes ejecutar este tutorial. Dispones de otra guía con ADDTHIS para colocar los "Follow buttons" ejecutando este tutorial.

Ejemplo de Addthis sobre Follow Buttons

• La parte lateral o inferior de una entrada, SHARE BUTTONS: en el pié de página o el lateral. Cuando el usuario ha finalizado a terminar de leer la entrada, disponer de los "Share Buttons" o botones para compartir es ideal por dos motivos:  por Velocidad: los "Share Buttons" llevan scripts integrados que calculan el número de veces que se ha compartido algo o enviado algo, la carga de estos es lenta porque el navegador debe conectarse a los servidores que tienen las bases de datos donde reside la información de nuestra "puntuación" o de nuestros "contadores" de envíos. Por Idoneidad: es el lugar idóneo pues el usuario ha podido leer la entrada completa y puede decidir compartirla en su red social al terminar. Si quieres aprender a poner los "Share Buttons" puedes ejecutar este tutorial. Dispones de otra guía con ADDTHIS para colocar los "Share buttons" ejecutando este tutorial.
• Los "Share Buttons" que vamos a poner en este tutorial que estamos abordando son de tipo lateral. Su ventaja sobre los demás es que "acompañan" a la lectura del usuario sin molestarle o agobiarle pero manteniendo la posibilidad de que comparta cuando desee.

Dando de alta el servicio:

1) AddThis es una web que como servicio al cliente proporciona los botones para redes sociales sin tener que tener ninguna clase de conocimientos avanzados en informática. Simplemente te conectas, seleccionas los que necesites y los pones en tu Blog. En primer lugar nos conectamos a http://www.addthis.com/.

La nueva pantalla de bienvenida de Addthis

2) Si no estás dado de alta en la herramienta, en la parte superior derecha pulsa "Create Account" para darte de alta en el servicio.

Página de alta de AddThis

• En este punto es tan sencillo como darte de alta utilizando tu cuenta de Facebook, de Twitter , de Google u OpenID. 
• Por otro lado, podrás hacerlo manualmente tú mismo sin vincular tus cuentas introduciendo en "email address" tu dirección de correo e introduciendo una clave de acceso en "Password" y su verificación en "Retype password".
• Llegados a este punto, como siempre te digo cuando contrates un servicio en internet LEE los términos del servicio ("Terms of Service") y la política de privacidad ("Privacy Policy").

Configuración de la barra deslizante lateral en la página principal del Blog:

Una vez ya autenticados y con usuario en Addthis, esta es la manera más rápida y fácil de meter "Share-buttons" en Blogger en forma de barra lateral:

3)  Accede a la configuración de "Share-Buttons", en el menú superior de Add This verás que hay una opción llamada "Share Buttons". selecciónala.

4)  Addthis ha añadido una nueva forma de configurar tus botones para redes sociales muy rápida. Se llama "Addthis Layers". Se trata de añadir unas "capas" que contendrán por un lado los "share-buttons" y por el otro los "follow-buttons".  Es un "Todo en uno" donde no es necesario pararse a configurar nada más que lo necesario para que los botones conecten con nuestros perfiles para redes sociales.

Añadir barra flotante deslizante lateral

• 1) Activa los "Share buttons" poniendo su indicador a "ON". No precisan configuración especial. El resto de opciones de Addthis las he puesto a Off para no distraernos del objetivo principal, añadir botones sociales a nuestro Blog de la manera más sencilla posible. Puedes seleccionar si la deseas a izquierda o derecha.

• 2) Pulsa el botón "Generate Code" y te aparecerá una página de donde copiar el código (puedes seleccionarlo y pulsar CONTROL + C para copiar o pulsar "Grab It".

Página para añadir el código fuente de AddThis y ponerte los Share Buttons para tu Blog

5) Ahora ve a Blogger. Para insertarlo en tu Blog, dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.

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 los botones para redes sociales de AddThis 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 AddThis:

Añade el código fuente del AddThis

• EJEMPLO DEL CÓDIGO DE ADDTHIS PARA LA BARRA LATERAL EN DIARIOS DE LA NUBE:
• <div class='addthis_toolbox addthis_floating_style addthis_counter_style' style='top:263px;left:50%;margin-left:-625px;background-color:#b2e0ff;'><a class='addthis_button_facebook_like' fb:like:layout='box_count'/><a class='addthis_button_tweet' tw:count='vertical'/><a class='addthis_button_google_plusone' g:plusone:size='tall'/><a class='addthis_counter'/></div><script type='text/javascript'>var addthis_config={data_track_addressbar:!0};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xx-XXXXXXXXXXXXXXXX' type='text/javascript'/>
• Detalle del código:
• NOTA: Observarás que el código te lo pongo "comprimido" (sin retornos de carro). Esto es para adaptarnos a la normativa de rendimiento que indica que los scripts deben encontrarse comprimidos para una ejecución más rápida. Te recomiendo utilizar Pagespeed siempre que implementes cambios en tu Blog que incorporen nuevos scripts al mismo.
• <div class='addthis_toolbox addthis_floating_style addthis_counter_style' Añade al Blog la clase que permite dibujar la barra lateral flotante con la botonera para compartir en redes sociales de ADDTHIS.
• style='top:263px;left:50%;margin-left:-625px;background-color:#b2e0ff;'>Indica que se colocará a 263 píxeles del margen superior del blog, siempre a un 50% con un margen izquierdo de -625 píxeles. De esta manera aunque el usuario disponga de una resolución de pantalla muy baja, la barra nunca ocupará su campo de visión y le permitirá leer "sin agobiar". El color de fondo es el utilizado en Diarios de la nube, puedes utilizar el que ADDTHIS te pone por defecto. En este punto te recomiendo que vayas realizando los cambios en píxeles a izquierda y derecha según veas que la barra se va colocando en tu Blog, pues estos valores es muy posible que sean distintos en tu págia que en la mía. Esto es poner un valor y probar hasta encontrar el deseado.
• El resto de código incorpora los botones sociales que hayas configurado en ADDTHIS.

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

Configuración de la barra deslizante lateral en el detalle de una entrada, mejora el rendimiento:

Si quieres configurar individualmente los "Share buttons" para conseguir el mejor rendimiento sigue estos pasos:

0) Realiza una copia de seguridad de Blog antes de realizar cambios en la plantilla. Ejecuta esta guía si no sabes hacerlo.

1)  Accede a la configuración de "Share-Buttons", en el menú superior de Add This verás que hay una opción llamada "Share Buttons". selecciónala.

2)  Addthis ha añadido una nueva forma de configurar tus botones para redes sociales muy rápida. Se llama "Addthis Layers". Se trata de añadir unas "capas" que contendrán por un lado los "share-buttons" y por el otro los "follow-buttons".  Es un "Todo en uno" donde no es necesario pararse a configurar nada más que lo necesario para que los botones conecten con nuestros perfiles para redes sociales.

Añadir barra lateral deslizante

• 1) Activa los "Share buttons" poniendo su indicador a "ON". No precisan configuración especial. El resto de opciones de Addthis las he puesto a Off para no distraernos del objetivo principal, añadir botones sociales a nuestro Blog de la manera más sencilla posible. Puedes seleccionar si la deseas a izquierda o derecha.

• 2) Pulsa el botón "Generate Code" y te aparecerá una página de donde copiar el código (puedes seleccionarlo y pulsar CONTROL + C para copiar o pulsar "Grab It".

Página para añadir el código fuente de AddThis y ponerte los Share Buttons para tu Blog

3) Los Share Buttons son scripts que pueden afectar al rendimiento de tu Blog pues requieren conectarse y realizar consultas a los servidores que van guardando los contadores de quién ha hecho "clic" en ellos.

Si quieres que no afecten al rendimiento de tu página principal, haz que sólo se dibujen cuando el usuarios ha hecho "clic" en "Más información" o en el título de tu entrada para acceder a su detalle. Para conseguir este efecto sigue estos pasos:

4) En tu plantilla, accede al botón "Editar HTML" para tocar su código fuente.

5) Dentro del editor de código fuente de la plantilla pulsa "CONTROL + F" y busca el texto "share-buttons":

Encontrarás las siguientes líneas de código donde se encuentra los "Share-buttons":

   <b:include data='post' name='postQuickEdit'/>      </span> <div class='post-share-buttons goog-inline-block'>        <b:if cond='data:post.sharePostUrl'>          <b:include data='post' name='shareButtons'/>        </b:if>      </div> 

6) Añade justo debajo el código de AddThis pero con el <b:if cond='data:blog.pageType == &quot;item&quot;'> y el cierre tras el fin del código Addthis con </b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='addthis_toolbox addthis_floating_style addthis_counter_style' style='top:263px;left:50%;margin-left:-625px;background-color:#b2e0ff;'><a class='addthis_button_facebook_like' fb:like:layout='box_count'/><a class='addthis_button_tweet' tw:count='vertical'/><a class='addthis_button_google_plusone' g:plusone:size='tall'/><a class='addthis_counter'/></div><script type='text/javascript'>var addthis_config={data_track_addressbar:!0};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xx-XXXXXXXXXXXXXXXX' type='text/javascript'/>
</b:if>

De esta manera con la condición <b:if cond='data:blog.pageType == &quot;item&quot;'> harás que el código que le sigue, el de Addthis, sólo tenga efecto en el detalle de las entradas y no en la página principal. Así no restarás velocidad de dibujado a la primera página de tu Blog, la página principal. Recuerda que los valores en píxeles mostrados (los marcados en "rojo fuerte") son los utilizados en Diarios de la nube y que deberás probar con distintos valores en tu Blog hasta que la barra quede donde te interesa.

Barra lateral deslizante con responsive design (para los más técnicos)

En Diarios de la nube la barra lateral no aparece en móviles para que no resulte "engorrosa" para la navegación del usuario.

El código utilizado a tal efecto lo pongo bajo el botón de mostrar código dado que es un fuente extenso.

Este código está construido con media queries que detectan la resolución del dispositivo donde se va a mostrar la barra para identificar si es necesario mostrarla y en qué posiciones. Evidentemente todos los valores están con respecto a mi web, si deseas utilizarlo en la tuya deberás ir cambiando los valores de ancho y alto a tal efecto.

<b:if cond='data:mobile == &quot;false&quot;'>
<style>

/*************************************
ADDTHIS
*************************************/

.addthis_floating_style.addthis_counter_style {
position: fixed;
left: 50px;
width: 76px;
padding: 10px 5px;
display: block;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
@media only screen and (max-width: 1152px) {

    .addthis_floating_style.addthis_counter_style{display:none;}}

@media only screen and (min-width: 1200px){

    .addthis_floating_style.addthis_counter_style{position: fixed;
left: 0px;
width: 76px;
padding: 10px 5px;
display: block;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;}}

@media only screen and (min-width: 1600px){

    .addthis_floating_style.addthis_counter_style{position: fixed;
left: 160px;
width: 76px;
padding: 10px 5px;
display: block;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;}}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--Addthis start-->
<div class='addthis_toolbox addthis_floating_style addthis_counter_style'><a align='center' class='addthis_button_facebook_like' fb:like:layout='box_count'/><a align='center' class='addthis_button_tweet' tw:count='vertical'/><a align='center' class='addthis_button_google_plusone' g:plusone:size='tall'/><a align='center' class='addthis_button_linkedin_counter' li:counter='top'/></div><script type='text/javascript'>var addthis_config={data_track_addressbar:true};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51aa743c5eb7939d' type='text/javascript'/>
</b:if>

Por Miguel García Sánchez-Colomer.