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

25 de noviembre de 2013
15 comentarios
Twitter - Follow me
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.

Twitter - Follow @twitter

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>
Twitter - Follow @twitter estándar 

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>
Twitter - Follow @twitter con contador

 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>
Twitter - Follow @twitter grande

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

Twitter - Avanzado
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 :-)

Que lo compartas es el mejor regalo que me puedes hacer

Gracias :-)

15 comentarios :

  1. me re sirvio muy bien explicado gracias.
    azu

    ResponderEliminar
    Respuestas
    1. Hola azu!

      Me alegro de que te haya sido de utilidad.

      Muchas gracias a ti por comentar :-)

      Eliminar
  2. Hola!

    Estoy intentando poner el botón en mi blog, lo he hecho todo al pie de la letra pero nada! Estoy usando una plantilla predeterminada de blogger, sabes si eso tiene algo que ver?

    Me gustaría hacer mi propia plantilla (o encontrar alguna buena ya hecha pero las que encuentro tienen creditos) alguna sugerencia de qué puedo estar haciendo mal?

    Saludos!
    Miriam

    ResponderEliminar
    Respuestas
    1. Hola Mimi,

      En este tiempo que ha pasado ¿lograste resolver el problema? Si no es así coméntamelo y lo vemos!

      Eliminar
  3. Mil millones de gracias, el único post que he encontrado de esto que me ha sigo útil. Ahora mi blog ya esta mas profesional jeje.

    ResponderEliminar
  4. ya intente mil veces y no puedo :( me pasa lo de Mimi mim

    ResponderEliminar
    Respuestas
    1. Hola Roberto,

      Pásame la dirección de tu blog, para ver si podemos descubrir lo que te está ocurriendo.

      Un saludo.

      Eliminar
  5. Igual que Roberto, Fran, al hacerlo y guardar plantilla, me informa que se han aplicado los cambios y que puedo visualizar el blog, pero no se ve el boton? uff que dificil!

    ResponderEliminar
    Respuestas
    1. Hola,

      ¿Cuál es la URL de tu blog? Si es la que está asociada a tu cuenta de Google+ si está apareciendo el botón de twitter.

      Ya me cuentas ;)

      Eliminar
  6. Hola amigo... gracias por los datos... De verdad que a veces hacen falta uno que otro tips cuanto un se tranca... Me ayudo... ya otras cositas te estaré consultando...
    Veo que no has publicado recientemente, o estas en otros proyectos....
    saludos

    ResponderEliminar
    Respuestas
    1. Hola Javier,

      Genial que te haya sido de utilidad. La verdad que he estado liado y no he podido publicar nuevas entradas, lo que si intento es responder siempre a todas las dudas de los lectores.

      A este blog le tengo mucho cariño y espero poder dedicarle en breve algunas publicaciones ;-)

      Eliminar
  7. Muchas gracias por tu aportación, me ha servido para ponerlo en mi nuevo blog!! echa un vistazo ver que te parece y dime que te parece! http://franelinformatico.blogspot.com.es/
    gracias de antemano

    ResponderEliminar