Cómo poner el botón Seguir de Twitter en tu Blog

Si tienes un blog, debes conocer la importancia de tener presencia en la redes sociales. Como bien sabes, Twitter es una de las grandes, es una red social que se distingue de la competencia por su forma de acercar la información a sus suscriptores.

En este artículo veremos como añadir el botón de seguir de Twitter. Hay que tener en cuenta que, al igual que la mayoría de redes sociales, Twitter ofrece un conjunto de "gadgets" para que podamos incluirlos en nuestro blog.

El que veremos en esta ocasión es el de seguimiento de nuestra cuenta, el que Twitter denomina Follow Button. Mediante este botón, los usuarios podrán seguirte de forma sencilla desde tu blog.

Paso 1: Creáte una cuenta de Twitter

Si ya tienes abierta una cuenta en Twitter, recuerda que tendrás un nombre de usuario del tipo @usuario, memorízalo y ve al paso 2. 

Si no tienes cuenta en Twitter, accede a www.twitter.com y selecciona la opción "Regístrate en Twitter", el proceso de registro es muy intuitivo y en unos minutos tendrás tu nueva cuenta de Twitter creada.

Paso 2: Elige el botón que más te guste

Twitter ofrece la posibilidad de personalizar el botón follow, mediante parámetros data que podemos añadir directamente en el código. Si no quieres complicaciones, elige el más que te guste de los que te muestro a continuación:

Botón seguir de Twitter estándar

<a href="https://twitter.com/bloggerayudacom" class="twitter-follow-button" data-show-count="false" data-lang="es">Seguir a @bloggerayudacom</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 

Botón seguir  de Twitter con contador

<a href="https://twitter.com/bloggerayudacom" class="twitter-follow-button" data-show-count="true" data-lang="es">Seguir a @bloggerayudacom</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

 Botón seguir de Twitter grande

<a href="https://twitter.com/bloggerayudacom" class="twitter-follow-button" data-show-count="false" data-lang="es" data-size="large">Seguir a @bloggerayudacom</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Paso 3: Coloca el botón seguir en tu blog

1. En Blogger, elegimos la opción Diseño y desde aquí elegimos la opción Añadir un gadget, en la sección de la plantilla donde queramos colocarlo
2. Seleccionamos el gadget "HTML/Javascript"
3. En contenido copia el código que hayas elegido del "Paso 1" y luego sustituye el nombre de la cuenta de Twitter por la tuya (lo que está en negrita en el código de ejemplo)
4. Guarda el gadget
5. Mueve el gadget que acabas de añadir en la posición que desees
6. Visualiza el blog

Opciones avanzadas

Si has seguido los pasos anteriores, ya tienes el botón seguir de Twitter funcionando, pero... quizás no estés contento con el resultado final, o quieres cambiarle el aspecto, ... si eres de los que les gusta profundizar, sigue leyendo...

Twitter dispone de dos formas de incluir el botón de seguir en las páginas, una es la que expongo aquí (javascript) y otra es en modo iframe. Si tuvieses problemas con el código javascript, que hace uso de HTML5, deberás usar el modo iframe.

Si te fijas en el código a incluir en nuestro blog, lo podemos dividir en 2 pasos, por un lado la etiqueta <a> y por otro la etiqueta <script>. 

El código de la etiqueta <script> será siempre el mismo, por tanto si ya hacías uso de algún gadget de Twitter, no te hará falta incluirlo. El código interesante es el de la etiquta <a>, el cual podemos personalizar mediante parámetros data de HTML5, veamos las posibilidades:

Data	Descripción
data-show-count	Muestra el número de seguidores: true/false
data-lang	Codigo de idioma en el que se localiza, ej: es
data-width	Ancho, ej: 300px
data-align	Alineación: left/right
data-show-screen-name	Indica si se muestra nombre en pantalla: true/false
data-size	Tamaño del botón: medium/large
data-dnt	Sugerencias personalizadas: true/false

Supongamos que queremos un botón grande, en el que se muestre el número de seguidores, que aparezca en español y, además, que se ajuste en un espacio de 500 píxeles, alineándolo a la derecha... quedaría algo así:

<a href="https://twitter.com/BloggerAyudaCom" class="twitter-follow-button"
  data-show-count="true"  data-lang="es"   data-width="500px"  data-align="right"  data-size="large">Seguir a @BloggeraAyudaCom</a>         

Si quieres personalizar aún más la presentación, podríamos derivar la clase "twitter-follow-buttom", para aplicar los estilos CSS que desees.

Si quieres complementar lo visto aquí, puedes  visitar la página para desarrolladores de Twitter,  donde verás la documentación oficial en inglés.

Pues ha dado mucho que hablar un pequeño botón, en próximos artículos veremos cómo sacar el máximo provecho a nuestro blog con otros gadgets interesantes de Twitter. ¿Tienes el botón follow en tu blog? ¿Lo piensas incluir?

Ahora te pongo mi botón de Twitter, pero con una condición, si te ha gustado este pequeño tutorial... sígueme :-)

  Sigue a @BloggerAyudaCom

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)