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

7 de junio de 2014
20 comentarios
Cómo incluir 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.

Botón seguir de Twitter
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.
Botón Twittear de Twitter con contador
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.

Botones sociales de blogger

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.
Blogger Twittear con Twitter

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


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


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


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


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-viaNombre de usuario con el que asocia el Tweet
data-textEl texto por defecto del Tweet
data-relatedCuentas relacionadas
data-countPosición de la caja con el contador
data-langEl lenguaje del botón
data-counturlURL utilizada para contabilizar el número de veces que se comparte
data-hasgtagsHasgtags asociados al tweet, separados por comas
data-sizeTamaño del botón (medium/large)
data-dntSugerencias 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 Heathcreative commons licensed ( BY )

Que lo compartas es el mejor regalo que me puedes hacer

Gracias :-)

20 comentarios :

  1. Respuestas
    1. Hola Alfred,

      ¿Qué es lo que te falla? ¿En que punto?

      Saludos

      Eliminar
  2. http://www.espartatripserviceturismo.com.ve/

    ResponderEliminar
  3. ¿Cada vez que hagas una entrada nueva deberás hacer esto?

    ResponderEliminar
    Respuestas
    1. Hola Miguel,

      No, una vez hecho ya lo tienes para siempre

      Eliminar
  4. Y para colocarlo en la versión para móviles?? Gracias!!! :)

    ResponderEliminar
    Respuestas
    1. Hola Anónimo,

      Se hace de la misma forma, solo debes colocar el código en la zona donde quieres que se muestre. Si tu plantilla es responsive no tendría que hacer nada, pero si tienes una versión móvil debes buscar los bloques "mobile".

      Eliminar
  5. Saludos Fran, No me funciona! he hecho todo paso a paso, y al guardar la plantilla e ir a visualizar cada entrada no sale el boton, ni FB ni Twitter? :'(
    GX por tener tus entradas actualizadas.

    ResponderEliminar
  6. Aclaro, al entrar como usuario anonimo, si funciona el boton de Twittear.

    Gx. no se si funciona el de fb?

    ResponderEliminar
    Respuestas
    1. Hola,

      Al pie de las entradas si están apareciendo los botones de redes sociales, yo veo el de Google+, Twitter y Facebook, al menos al blog que está asociado a tu perfil.

      Un saludo

      Eliminar
  7. No me funciona :c
    este es mi blog ohfestinalente.blogspot.com
    hice todo lo que se menciona, no se si es por la plantilla que instalé aunque no creo :c

    ResponderEliminar
    Respuestas
    1. Hola Festina,

      En tu blog no aparece el bloque de código que explico en el punto 3, revisa la posición en donde lo estás colocando y asegúrate de que se está guardando la plantilla tras los cambios.

      Ya me cuentas ;)

      Eliminar
  8. tengo un blog con una plantilla de un tercero y no me aparece la linea "post-header-line" donde podria colocar entonces el codigo

    ResponderEliminar
    Respuestas
    1. Hola Andrea,

      Pásame la dirección de tu blog y lo miramos

      Eliminar
  9. Buenas Fran, yo tampoco encuentro el post-footer-line post-footer-line-1! Cuando lo miro desde el blog haciendo control u sí, pero desde plantilla no :S

    ResponderEliminar
    Respuestas
    1. Hola Marc,

      Si te aparece en el código fuente (CTRL+U), tienes que poder verlo también desde la plantilla, algún paso está fallando, por ello te propongo hacerlo paso a paso:

      Accedes a "Plantilla > Editar HTML", una vez te aparezca el código de la plantilla pon el foco (haz click) sobre el código fuente, pulsas CTRL + F y te debe aparecer el buscador de Blogger, no el del navegador. Ahora introduces "post-footer-line-1" y te debería aparecer.

      Ya me cuentas ;)

      Eliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. Hola buena tarde, ya logré que me apareciera el botón de twitter pero me queda justo debajo del título. Quisiera dejarlo como el tuyo que está en la misma barra de la fecha alineado a la derecha. Como hago?

    elrematadero.blogspot.com

    GRACIAS!!!

    ResponderEliminar
  12. Hola buena tarde, ya logré que me apareciera el botón de twitter pero me queda justo debajo del título. Quisiera dejarlo como el tuyo que está en la misma barra de la fecha alineado a la derecha. Como hago?

    elrematadero.blogspot.com

    GRACIAS!!!

    ResponderEliminar
  13. Muy buenas tardes Fran.
    Te encontré y has conseguido una follower más.

    El caso es que estoy intentando poner el botoncito de twitter. He seguido tus pasos, pero cuando he ido a visualizar en mis artículos no veo más que TWITTEAR y no veo ni siquiera el botón o forma alguna de compartir. Es posible que me falte algo y no sé muy bien por donde cogerlo.( https://pareceimposiblehastaquelohaces.blogspot.com.es/)
    Si pudieras echarme un cable te lo agradecería y por supuesto te compartiré ya que de verdad es muy útil tu blog.
    Un saludo!

    ResponderEliminar