30 mar 2011

Botón "Twittear" de Twitter en cada entrada del blog




El botón de "Twittear" permite a quien lo pulsa, hacer llegar a sus seguidores un enlace a la entrada del blog o web donde esta situado el botón, comunicando el descubrimiento. El voto queda registrado ya que el botón dispone de un contador, por lo que el editor conocerá cuantas veces ha sido pulsado indicando el grado de popularidad.


NOTA IMPORTANTE:
Mi nombre es Jesús González y soy el autor de iniciaBlog. Si estás buscando una herramienta que te ayude a difundir las publicaciones de tu blog, debes saber que junto con mi equipo he desarrollado BlogsterApp - Te invitamos a conocer este nuevo servicio. Pruébalo ahora con tu blog de manera gratuita.
Un abrazo, Jesús Gonzalez, autor de iniciaBlog y BlogsterApp.



Si usas una de las plantillas que vienen por defecto en Blogger es posible que al pie de tus entradas aparezca la barra botones para compartir
Desactivar la barra de botones para compartir de Blogger
Recuerda que el objetivo que persigue este tutorial es ir sustituyendo estos botones (poco visuales) por los botones oficiales tanto el botón "Me Gusta" de Facebook como el botón de Twitter (este tutorial) y con el botón de Google+, tal y como puedes ver en este blog. Mi recomendación por lo tanto es ocultarla.

Ocultar la barra estándar de botones para compartir de Blogger
  • Entra en la Pestaña Diseño
  • Haz clic en "Editar" en la sección "Entradas del Blog"
  • Desmarca la casilla "Mostrar botones para compartir"
Colocar el botón de "Twittear" en cada entrada del blog
  • Paso 1. Acceder al editor HTML y haz copia de seguridad antes de realizar cambios
    • Ve a la "Pestaña Plantilla" y ve al pie de esta página. 
    • Haz una copia de seguridad de la plantilla pulsando el enlace "Realizar copia de seguridad"
    • Haz clic en el enlace "Editar código HTML de la plantilla"
  • Paso 2. Busca el siguiente código dentro de tu plantilla:
    • Usa el buscador del navegador pulsando Ctrl F o Ctrl B y busca este texto:
      • Para colocar el botón al Pie de la entrada: post-footer-line post-footer-line-1
      • Para colocar el botón en la Cabecera de la entrada:post-header-line
      • El código del botón  irá justo debajo de la línea que acabas de encontrar
  • Paso 3. Copia el código del botón de Twitter

    <a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='tuusuario' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share' expr:data-text='data:post.title'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
  • Paso 4 Copia el fragmento y pégalo justo debajo de la linea encontrada en el Paso 2.
  • Paso 5 Cambia en el código que acabas de pegar donde pone tuusuario por tu usuario de Twitter
  • Paso 5. Guarda la plantilla y visualiza el Blog
Para más información sobre este botón y sus diferentes variantes consulta la página oficial de Twitter.

Nota: Como dijimos al comienzo nuestro objetivo es sustituir la barra estándar de botones para compartir de Blogger por unos botones más visuales, es por ello que te recomiendo colocar también el botón de "Me Gusta de Facebook" y el botón de "Google+".

Aquí debajo ya puedes ver funcionado el botón de "Twittear". Si te ha gustado esta entrada haz clic sobre el botón para recomendarla a tus amigos. Gracias.

Si te ha gustado esta publicación y no quieres perderte ninguna otra, sígueme a través de Facebook, Twitter, suscripción por email, Google Friend , RSS ahora también en Google +.
Actualizado el 9 de Junio de 2013

75 comentarios:

  1. Muchas gracias, me estás sirviendo de gran ayuda. Todo muy claro y bien explicado, así las cosas parecen menos complicadas. Saludos

    ResponderEliminar
  2. Gracias natalia por tu comentario. Me alegra saber que lo puedes aplicar sin problemas

    ResponderEliminar
  3. sos un genioooo! muchas gracias por tu ayuda! pude poner los dos botones! te voy a seguir jorobando igual, con otras cosillas. jjjee

    ResponderEliminar
  4. Hola me funciona perfecto y tambien el boton de facebook.... aunque no se como acerle para centrarlos ya que quedan a la izquierda y en mi blog acostumbro tener las entardas centradas--- y eso de que quede a la izquierda se ve algo feo.

    ResponderEliminar
  5. Gracias por este último comentario, pero necesitaría verlo, indica cual es tu blog.

    Normalmente si pones el botón dentro de un div y luego pones estilo centrado debería funcionar, pero lo mejor es que me digas tu blog para verlo y hacer alguna prueba antes.

    ResponderEliminar
  6. Hola
    seguí tus pasos y se puso el botón. pero todas las entradas tienen la misma cantidad de twittear al verla como blog general, pero al meterme a cada entrada, me aparece el número real de twittear, que puede estar pasando???

    saludos

    ResponderEliminar
  7. JarierK,

    Ese error esta documentado al final de la entrada...se te ofrece otro código, lo has probado con este otro código...coméntame...y envíame un enlace hasta tu blog para verlo.

    Gracias por tu comentario.

    ResponderEliminar
  8. Hola
    el código para arreglar el error de número igual en todas entradas en que parte va???

    saludos
    http://www.artechic.cl

    ResponderEliminar
  9. Hola Javier...

    Como tu ya lo tienes busca twitter-share-button
    y reemplaza todo el fragmento donde está metido desde la ""

    ResponderEliminar
  10. Muchas gracias por el tutorial. Ya tengo el botón de "twittear" en mi blog.

    ResponderEliminar
  11. Gracias Niños en mochila por participar con tu comentario.
    Un abrazo y seguimos en contacto.

    ResponderEliminar
  12. Hola, me explicas por favor como busco los codigos en el navegador? eso no lo entiendo. es la parte más dificil, de resto tu blog es excelente. gracias.

    ResponderEliminar
  13. Hola Luis, llevas razón, en otros tutos si que aparecen detallado cómo acceder al buscador del navegador. Revisa nuevamente el punto 9 donde te explico la combinación de teclas.

    Gracias por tu sugerencia, ahora está mucho mejor.

    Saludos y mucha suerte!

    ResponderEliminar
  14. Que raro Tony....si quiere dime un enlace hasta tu blog para verlo y probarlo....Coméntame.

    ResponderEliminar
  15. Hola! Excelente blog, me ha servido bastante... Mi duda es que, bueno se muy poco de blogs y códigos! Entonces quiero poner el botoncito éste, pero no encuentro el código en la plantilla, expandí plantillas de artilugios y todo pero aún así no lo encuentro! Espero que me puedan ayudar, muchas gracias :D

    Mi blog es este http://esh0funi.blogspot.com

    Saludos!

    ResponderEliminar
  16. Hola Nicole,

    He visto tu blog y veo que tiene el botón de Facebook debajo del título del post, ¿por que no pones tambien el de twitter en la misma zona?...busca esta cadena dentro de tu código. post-header-line y pega el código del botón de twitter justo debajo.

    Coméntame vale

    Está muy muy chulo tu blog, felicidades

    ResponderEliminar
  17. En mi blog detecta donde está colocado el código. Los últimos posts que aparecen en la página principal muestran el número de twitts de la principal. No de cada artículo.

    ResponderEliminar
  18. Hola Arturo,

    He revisado tu blog y he twittedo la primera de las entradas, veras que esta tiene ahora 3 tweets y el resto creo que dos con lo cual no es correcto lo que me comentas, pero si es cierto que tarda un tiempo hasta que el contador se incrementa. Además fíjate que cuando pulsas el botón el enlace que te propone es el de la entrada no el del blog...por lo tanto yo lo veo todo correcto.

    Coméntame.

    ResponderEliminar
  19. Gracias por al respuesta. La verdad es que después de dejar el comentario probé a usar el código que propones en caso de que diera error.

    ResponderEliminar
  20. Aviso de actualización:

    Esta entrada ha sido actualizada para ofrecer una mejor comprensión en la parte que afecta a la edición de la plantilla para situar el botón de Twittear. Además queda vinculado este tutorial también con los tutoriales para el botón de Me gusta de Facebook y Google+ tal y como aparecen en iniciaBlog.

    Espero que la actualización de esta entrada sea de tu agrado. Gracias

    ResponderEliminar
  21. Gracias Rube83,

    He visto tu blog y el botón. Enhorabuena y gracias por comentar.
    Seguimos en contacto, Jesús.

    ResponderEliminar
  22. Hola, estoy intentando poner el botón de twitter pero el paso 2 no lo entiendo, eso de que tengo que buscar el siguiente codigo dentro de mi plantilla y lo de El código del botón irá justo debajo de la línea que acabas de encontrar. Ojalá pudieras resolver mi duda, gracias

    ResponderEliminar
    Respuestas
    1. post-footer-line post-footer-line-1
      (copia el codigo y pegalo despues de la linea de arriba - Eso es para que aparezca al final de tus entradas)


      post-header-line
      (copia el codigo y pegalo despues de la linea de arriba - Debajo del titulo de tu entrada)

      Eliminar
    2. Gracias Jonathan, quedamos a la espera de tu comentario Maldita Dulzura!

      Un abrazo y gracias
      Jesús González

      Eliminar
  23. Ola men, prove con el script de twitter y no lo cuenta, bueno creo que en muchas web's he probado y no lo cuenta, en worpress pasa lo mismo. creo que twitter esta actualizando ?

    ResponderEliminar
    Respuestas
    1. Jonathan,

      Es una duda muy razonable pero comentarte que el contador no es automático, lleva un tiempo entre que haces clic y hasta que este aumenta el contador, pero te puedo asegurar que si que cuenta.

      Muchas gracias por tu comentario

      Mucha suerte!
      Jesús González

      Eliminar
  24. Hola que gran aporte muchas gracias, pero una pregunta acerca de twitter, digamos que cuando se le da clic solo saca el link y el usuario, pero no saca el TITULO de dicha entrada.

    ResponderEliminar
    Respuestas
    1. Llevas razón usuario anónimo, acabo de actualizar el fragmento de código y ahora debe tomar el título del post. En mi caso no se daba porque el botón lo tengo cuando entras a ver el post.

      Muchas gracias por tu apreciación ahora solo queda que me confirmes con el nuevo código tienes solucionado.

      Gracias y mucha suerte!
      Jesús González

      Eliminar
  25. gracias men me sirvio....mi blog es nuevo miralo trucosycomandos.blogspot.com

    ResponderEliminar
  26. Hola Jesús
    no sé qué ha podido pasar, pero llevo dos días que el contador del botón twitter no funciona. Twittea, eso sí, pero no contabiliza... Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Jordi,

      Comentarte que el contador de twitter necesita algún tiempo hasta que este muestra el nº actualizado, posiblemente esté todo correcto. De todas formas si quieres pásame la URL hasta uno de tus post con el fin de echarle un vistazo.

      gracias por tu comentario,
      Un abrazo!, Jesús González

      Eliminar
  27. Hola Jesús

    Sé que tarda un tiempo en contabilizar. De golpe se pusieron todos a cero. Los tweets que en algunos posts llegaban a 14 están ahora a cero... :(
    No es que no funcione, twitear twitea, pero contabiliza mal o no lo hace...
    Gracias por responder y por tu ayuda
    Te dejo un enlace:
    http://lilvia.blogspot.com.es/2012/03/de-bolano-los-personajes-fatales.html

    ResponderEliminar
    Respuestas
    1. Gracias por tu aviso sobre el botón de Twitter.
      Lo que está pasando es que tu blog ya no es .blogspot.com sino .blogspot.com.es con lo que lo acumulado en Twitter no se refleja. Mira este enlace para más información

      http://www.oloblogger.com/2012/03/redireccion-de-dominios-por-paises.html

      Este cambio ocurrió este fin de semana, ahora mismo todo está un poco patas arriba con esto, con el page rank y otros temas.

      Saludos, Jesús González

      Eliminar
    2. Gracias de nuevo!
      pues menuda chapuza, no?
      no sé qué hacer ahora... si dejarlo como está sin los tweets acumulados o pegar el script que redirecciona el blog... ¿Qué me recomiendas?

      Saludos. Jordi Via

      Eliminar
    3. Hola Jordi,

      La verdad es que es un cambio que traerá consecuencias y estoy siendo optimista. Yo en tu lugar dejaría pasar unos días hasta que la cosa se normalice un poco. Vamos a entender el cambio como algo natural y cualquier redirect sería contraproducente.

      Saludos,
      Jesús González.

      Eliminar
    4. Vaya... pues entonces te haré caso, aunque me duele perder los contabilizados... :(
      Siempre puedo entrar con ncr, no?
      Un abrazo y muchas gracias por tus consejos

      Eliminar
    5. Ten encuentra que el botón de Twitter si lo pulsas ahora comenzará a contabilizar nuevamente con la nueva dirección.

      Lo del script en el Head en realidad lo que hace es una especie de reridirigo y en ese punto si que ves los contadores actualizados con el acumulado anterior....pero...tratandose de un "error" global yo dejaría pasar unos días para ver si Google se hace eco de este problema.

      Es mi recomendación

      Un abrazo!
      Jesús González.

      Eliminar
  28. Muchas gracias, acabo de añadir el botón a mis entradas. Muy útil tus instrucciones.

    Quedó súper mi blog con el botón para compartir en Twitter:

    http://formared.blogspot.com/

    Saludos desde Ecuador

    ResponderEliminar
  29. Yo también iba a escribir exactamente lo que ha puesto Jordi, pero además, añado algo más.
    Resulta que el botón yo lo puse debajo del título, por lo que en la página general siempre aparecía. Antes de que hicieran ese cambio, contabilizaba bien cada entrada sin tener que entrar en la entrada completa para ver cuántos tenía (en la general aparecían los tweets concretos de cada entrada) y ahora en la general aparecen los tweets desde la página, no de cada entrada (eso sí, cuándo entras si que aparecen bien, es como si fuera con la URL o algo).
    No entiendo mucho de este tipo de codigos, solo lo justo para poner ese botón y el de "Me Gusta" e insertar vídeos.
    Agradecería mucho una respuesta, aunque sea solo para decirme que no tiene solución o lo que fuera. Muchas gracias por adelantado.

    ResponderEliminar
    Respuestas
    1. Hola Manuel.
      Gracias por tu comentario y efectivamente he visto tu blog y todos muestran el mismo contador. Revisando un poco veo que uno de los parámetros del botón concretamente el de data-url no está bien...

      por favor vuelve a copiar desde este post y pegar en la plantilla HTML el fragmento de código, personaliza lo que yo pongo en color rojo y debe solucionarse todos los inconvenientes que comentas.

      Me mantengo a la espera de tus noticias!

      Muchas gracias por comentar y por la exposición tan clara de tus incidencias.

      Mucha suerte!
      Jesús González

      Eliminar
    2. Hola Manuel!

      Ya he visto el problema, yo tenia mal el código...en realidad es data:post.canonicalUrl y yo tenia data:post.canonicalurl (todo minúsculas).

      Bien cambia tu fragmento de código o bien vuelve a copiarlo.

      Eliminar
    3. Muchísimas gracias!!!! Todo arreglado!!

      Eliminar
    4. Ok Perfecto!
      Gracias por confirmarlo. Seguimos conversando.
      Jesús González

      Eliminar
  30. Listo, ya lo he cambiado, gracias Jesús por todo!!!

    http://formared.blogspot.com/

    ResponderEliminar
  31. Excelente, muchas gracias.

    ResponderEliminar
  32. Si que eres un genio!!!! De verdad que todo súper fácil y todo súper bien!!! mil mil gracias!!!!!
    xx s
    www.my-philosophie.com

    ResponderEliminar
    Respuestas
    1. jeje...gracias Sofía..para mi si que es un verdadero placer que te hayas pasado por aquí y que dejaras tu comentario.

      Seguimos conversando!

      Bienvenida y enhorabuena tu blog está muy muy bien!

      Jesús González.

      Eliminar
  33. He colocado el botón de twitter justo debajo del titulo de la entrada, pero se me queda muy pegado al titulo. ¿Es posible aumentar este espacio un poco para que no se quede tan pegado? ¿Cómo se hace? Gracias.

    ResponderEliminar
  34. Muchas gracias, amigo. Acabo de seguir tu consejo y me ha quedado chachipiruli

    ResponderEliminar
    Respuestas
    1. Gracias Julián por pasarte por aquí...un fuerte abrazo y mucha suerte con tu blog


      Jesús González

      Eliminar
  35. TE mandaste!!! gracias por tu ayuda!!

    ResponderEliminar
    Respuestas
    1. Gracuas Lyne Rolin por tu visita...te sigo por Google+

      Un fuerte abrazo!
      Jesús González

      Eliminar
  36. Hola, Muchas gracias por tu ayuda!! me fue de utilidad!!

    ResponderEliminar
  37. Saludos,excelente pagina amigos, me habéis ayudado y os agradezco..

    ResponderEliminar
    Respuestas
    1. Gracias a ti por la visita y por dejar este comentario!
      Mucha suerte
      Jesús González

      Eliminar
  38. Muchísimas gracias!
    Un tutorial simple y muy bien redactado jejeje.

    Un saludo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti por dejar tu comentario. No sabes cuanto me alegra que te gustar.

      Un fuerte abrazo,
      Jesús González

      Eliminar
  39. Muchas gracias por el tutorial!, realmente, sencillo y fácil de aplicar, me ha funcionado totalmente!

    Solo una consulta, al momento de ver las entradas, el boton de Twitter se me demora en cargar (aparecer)... eso es normal??, se estará acomodando??. El de Facebook y Google+ aparecen enseguida, pero el de Twitter no.
    Al momento que se carga eso sí funciona completamente.

    Saludos

    http://www.themetal-spirit.com/

    ResponderEliminar
    Respuestas
    1. Hola Maxius,
      La verdad es que acabo de ver tu comentario hoy...mi madré qué locura.

      Te he enviado un Tweet para ver si ya está resuelto o no?

      Disculpa el retraso.

      Jesús González

      Eliminar
  40. Gracias!!!

    Botón Facebook ✔
    Botón G+ ✔
    Botón Twitter ✔
    Facebook Like Box ✔

    En mi Blog
    http://simplexcel.blogspot.com

    Con sus respectivos "+1" "Follow" y "Me gusta" A Iniciablog

    ResponderEliminar
  41. Cuando inserto el código html y hago vista previa, perfecto, pero cuando guardo plantilla y voy a ver blog no hay manera no se ven los botones y el codigo que había insertado ha desaparecido, ¿por qué? lo he intentado un montón de veces y no hay forma..

    ResponderEliminar
    Respuestas
    1. Hola Isabel,

      Para ayudarte necesito me indiques la dirección de tu blog.

      Te espero,

      Gracias por comentar,
      Jesús

      Eliminar
  42. La linea de post-footer-line no me aparece en la plantilla, ¿cómo puede ser esto?

    ResponderEliminar
    Respuestas
    1. Recuerda que debes activar la plantilla de artilugios. Eso es después de darle al botón Editar HTML en la pestaña Plantilla.

      Vuelve a comentar a ver si lo resolvemos,

      Gracias Noes
      Jesus González

      Eliminar
  43. A mí no me ha funcionado, me da el siguiente mensaje de error:

    No hemos podido guardar la plantilla.

    Tu plantilla no se ha podido analizar debido a que su formato no es correcto. Asegúrate de que todos los elementos XML estén cerrados correctamente. Mensaje de error de XML:
    Content is not allowed in prolog.

    ¿Alguna sugerencia?

    ResponderEliminar
    Respuestas
    1. Por favor trata de volver a repetirlo por si falta algo al copiar. Lo he vuelto a revisar y es correcto.

      Te espero Mar,

      Jesús González

      Eliminar
  44. excelente aporte gracias, me sirvió muchisimo

    ResponderEliminar
  45. No puedo añadir más botonos a mi blog... en lugar de "expandir plantillas de artilugio", me aparece "restablecer plantillas de artilugio a valores predeterminados"...

    ResponderEliminar

Te agradezco la participación en iniciaBlog a través tu comentario. Recuerda que te responderé con otro comentario justo debajo del tuyo. Gracias y mucha suerte! ;-)

¿Cómo poner el botón de...:?

Premio Bitácoras

Aviso Legal

Licencia Creative Commons
iniciaBlog - Te ayuda con Blogger a mejorar tu blog
iniciaBlog se encuentra bajo una Licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
Basada en una obra en www.iniciablog.com.

Creado por Jesús Manuel González Fuentes

Política de Privacidad de iniciaBlog | Política de Cookies
2023 © Jesús Manuel González Fuentes es el autor de iniciaBlog.com
Tema creado por Way2themes y adaptado por inciciablog