Cómo poner el botón compartir de Twitter en Blogger

Hay dos botones de Twitter que no pueden faltar en tu blog, por un lado el botón seguir (follow) y por otro el botón para twittear una entrada (Tweet Button).  Muchas veces se suelen confundir, veamos que diferencia hay entre ambos y luego te mostraré lo fácil que es incluir el botón de twittear en Blogger.

El botón seguir de Twitter suele aparecer en un lateral o en alguna zona genérica del blog. Mediante este botón los usuarios pueden seguir tu cuenta de Twitter y además puedes mostrar un contador con el número total de seguidores. Si no tienes este botón en tu blog o no tienes una cuenta de Twitter, consulta este tutorial donde te explico, paso a paso, cómo incluirlo.

Ejemplo de botón seguir, con el contador de número de seguidores

Qué es el botón Twittear de Twitter

El botón Twittear es el que se utiliza para compartir las entradas del Blog. Se suele colocar al final del artículo, junto con otros botones sociales. Es la mejor forma de facilitar a tus lectores el que puedan compartir en esta red social.

Un ejemplo del botón Twittear con contador en vertical

Blogger ofrece una botonera propia, donde incluye la mayoría de botones sociales. Twitter también está en esa lista de botones, pero como puedes observar en la imagen, pasa bastante desapercibido. Otro de los puntos negativos de este conjunto de botones es la falta de opciones para configurarlo.

La mejor opción es poner nuestros propios botones para todas las redes sociales que deseemos incluir, de esta forma podrás personalizarlo y configurarlo con el estilo de tu blog.

Para desactivar los botones sociales que aparecen por defecto en Blogger, debes acceder a "Blogger > Diseño" y editar el gadget "Entradas del Blog", en la ventana emergente que te aparece busca la opción "Mostrar botones para compartir" y desmárcala.

Cómo poner el botón Twittear

1. Haz una copia de seguridad de tu plantilla
   Blogger > Plantilla > Crear/Restablecer copia de seguridad
2. Accede al código HTML de tu plantilla
   Blogger > Plantilla > Editar HTML
3. Copia este código
   

   <a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='BloggerAyudaCom' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Twittear</a>

4. Pega el código en la zona donde quieras que aparezca el botón
1. Si quieres colocar el botón al final de las entradas
   Busca todas las apariciones de "post-footer-line post-footer-line-1" (mediante CTRL + F) y copia el código del punto 3 justo debajo de esa línea
2. Si vas a colocar el botón al principio de las entradas
   Busca todas las apariciones de "post-header-line" (CTRL + F) y copia el código del punto 3 justo debajo
5. Sustituye BloggerAyudaCom por el nombre de tu cuenta de Twitter
6. Guarda la plantilla y visualiza el resultado

El código de ejemplo da por hecho que ya tenías el botón seguir  o algún otro gadget de Twitter. Si no te funciona, debes añadir este código justo debajo del código creado en el proceso anterior:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Elige el botón que más te guste

Si quieres cambiar el aspecto del botón, solo tienes que sustituir el código que habías copiado en el paso 3 por cualquiera de los que los botones que se muestran a continuación.

Botón sin contador

<a class='twitter-share-button' data-count='none' data-lang='es' data-via='BloggerAyudaCom' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Twittear</a>

Resultado

Twittear

Botón con contador a la derecha

<a class='twitter-share-button' data-lang='es' data-via='BloggerAyudaCom' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Twittear</a>

Resultado

Twittear

Botón con contador superior

<a class='twitter-share-button' data-count='vertical' data-lang='es' data-via='BloggerAyudaCom' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Twittear</a>

Resultado

Twittear

Botón grande con contador 

<a class='twitter-share-button' data-size='large' data-lang='es' data-via='BloggerAyudaCom' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Twittear</a>

Resultado

Twittear

Opciones avanzadas

Twitter dispone de una herramienta online para desarrolladores, desde donde puedes generar visualmente el botón Twittear. Solo tienes que utilizar el código que te genera la herramienta e incluirlo en tu plantilla siguiendo los mismos pasos que vimos antes.

Aunque la herramienta anterior es bastante completa, no dispone de todas las opciones posibles. Si quieres controlar el botón de compartir al máximo tienes que hacerlo desde el código, utilizando atributos data de la etiqueta <a>.

El código del botón tiene la estructura <a class='twitter-share-button' href='http://twitter.com/share' data-parametro1='valor1' data-parametro2='valor2' ...>Twittear</a>.

Hay dos parámetros que estamos usando de forma dinámica, mediante las variables de plantilla de Blogger:

• expr:data-text='data:post.title'
  Mediante este comando Blogger incluirá el texto del título de nuestra entrada como texto por defecto del Tweet: data-text='título de la entrada actual'
   
• expr:data-url='data:post.canonicalUrl'
  Le solicitamos a Blogger que devuelva la URL de la entrada actual, por lo que el parámetro data queda de la forma: data-url='url de la entrada actual

Tanto el texto del tweet como la url que deseamos compartir son datos básicos y por eso lo incluimos en todos los ejemplos.

Estos son los parámetros que tienes disponibles:

Data	Descripción
data-url	URL de la página a compartir
data-via	Nombre de usuario con el que asocia el Tweet
data-text	El texto por defecto del Tweet
data-related	Cuentas relacionadas
data-count	Posición de la caja con el contador
data-lang	El lenguaje del botón
data-counturl	URL utilizada para contabilizar el número de veces que se comparte
data-hasgtags	Hasgtags asociados al tweet, separados por comas
data-size	Tamaño del botón (medium/large)
data-dnt	Sugerencias personalizadas (true/false)

Supongamos que quieres un botón grande, donde se muestre el contador con el número de veces que se ha compartido y, además quieres asociar el tweet al usuario @usuario. Este sería el código:

<a class='twitter-share-button'href='http://twitter.com/share' data-size='large' data-count='horizontal'  data-via='usuario' ...>Twittear</a>

Si quieres ampliar información técnica sobre el botón compartir puedes visitar la página oficial de Twitter de soporte para desarrolladores.

Conclusión

Ya no tienes excusa para incluir el botón compartir de Twitter en las entradas de tu blog. Como has visto es muy sencillo y lo mejor es que estarás usando el gadget oficial.

El objetivo de de esta serie de artículos es aprender a incluir los botones de compartir de todas las redes sociales y conocer todas las posibilidades que nos ofrece. Una vez repasemos todas las redes sociales, crearemos un nuevo conjunto de botones que sustituirá al que viene en Blogger por defecto.

¿Ya has incluido el botón de compartir en tus entradas? ¿lo vas a hacer?

Fotografía de portada de Garrett Heath, creative commons licensed ( BY )

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)