Cómo agregar los botones de compartir de Twitter, Facebook, Linkedin, WhatsApp, Pinterest, Google + y Tuenti en Blogger

Aunque no suelo escribir entradas centradas en tutoriales, me he animado a escribir ésta ya que tiene un componente importante de redes sociales y sobre todo la dificultad que he encontrado para localizar este material en la red (por no decir que no encontré nada), que creo puede ayudar a muchos usuarios de la plataforma Blogger.

En esta entrada explicaré como incluir en Blogger los nuevos botones de compartir de las principales redes sociales: Twitter, Facebook, Linkedin, Whatsapp, Pinterest, Google + y Tuenti. El resultado es el que veis más abajo y se puede conseguir con un simple Copy+Paste. Con esta pequeña acción conseguiremos darle una mayor difusión a los contenidos de nuestro blog.

Para comenzar vamos a la pestaña "Plantilla > Edición de HTML" y marcamos la opción "Expandir la plantilla de artilugios".

Botones compartir en Blogger

A continuación debemos seleccionar el lugar en el que queremos ubicar los botones, en mi caso están justo antes de la etiqueta:
<data:post.body/>

Por último pegamos el código de la red social que queramos incluir y guardamos. Previamente tendremos que haber subido a Blogger las imágenes de los botones de las diferentes redes sociales, para ello te recomiendo buscar en iconfinder.com, donde encontrarás un amplio catálogo de iconos de todo tipo. Recuerda sustituir el texto URL IMAGEN de los códigos para la URL verdadera de la imagen que vayas a utilizar.

TWITTER
<a expr:href='&quot;http://twitter.com/home/?status=&quot; + data:post.title + &quot; &quot; + data:post.url + &quot; vía @USUARIODETWITTER&quot;' expr:title='&quot;Compartir en Twitter - &quot; + data:post.title' target='_blank'><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

FACEBOOK
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' expr:title='&quot;Compartir en Facebook - &quot; + data:post.title' target='_blank'><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

LINKEDIN
<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;mini=true&quot;' expr:title='&quot;Compartir en Linkedin - &quot; + data:post.title' target='_blank'><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

WHATSAPP
<a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; - &quot; + data:post.url' expr:title='&quot;Compartir en Whatsapp - &quot; + data:post.title'><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

PINTEREST
<a expr:href='&quot;http://pinterest.com/pin/find/?url=&quot; + data:post.url' expr:title='&quot;Compartir en Pinterest - &quot; + data:post.title' target='_blank' ><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

GOOGLE +
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:title='&quot;Compartir en Google + - &quot; + data:post.title' target='_blank' ><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

TUENTI
<a expr:href='&quot;http://www.tuenti.com/share?url=&quot; + data:post.url' expr:title='&quot;Compartir en Tuenti - &quot; + data:post.title' target='_blank' ><img alt='Compartir' src='URL IMAGEN' style='border:0; padding:0'/></a>

Has leído la entrada Cómo agregar los botones de compartir de Tuenti, Linkedin, Twitter, Facebook, Pinterest y Google + en blogger escrita por Javier Cerezo con una valoración de 5 estrellas. Agradezco tus comentarios.

57 comentarios:

  1. Muy buen post Javier creo que lo aplicaré.

    Sau2

    ResponderEliminar
  2. Gracias Javier

    De todos modos (se que no es lo mismo, pero por si acaso lo desconocías), recordarte que en blogger in draft ya puedes insertar sin hacer nada un widget para compartir en twitter, facebook o google buzz entre otros

    salu2 y gracias por el tutorial

    ResponderEliminar
  3. Gracias Javier por currarte tanto el post, creo que los pondré :D

    ResponderEliminar
  4. Señor Werty, Laualm: Muchas gracias, espero que os sea de utilidad.

    Pedro: Lo conocía, simplemente quería añadir estos botones que son los oficiales y en el caso de Facebook y Twitter muestran el número de veces que se ha compartido.

    Saludos ;D

    ResponderEliminar
  5. Gracias por los códigos, me han sido de mucha ayuda. Buscaba uno sobre tuenti porque tengo mucho tráfico de España.

    Saludos desde México y gracias por el truco.

    ResponderEliminar
  6. Buenas! He instalado este código en mi flog (http://ttm22.blogspot.com/) y me da problemas. Me gustaría separar un poco más los botones. Además, en el de tuenti no sé cómo poner la etiqueta '_blank' para que se abra en un nueva página.
    A ver si puedes ayudarme. Saludos!!

    ResponderEliminar
  7. Hola Tommy,

    para separar los botones, tendrás que colocar entre cada boton la etiqueta:

    <span style="margin-right:20px"></span>

    En el caso de Tuenti puedes copiar de nuevo el código de este post ya que he incluido esa función.

    Un saludo

    ResponderEliminar
  8. Muchas gracias por los códigos!! Me ha quedado como quería!
    Sólo una última pijadita: cuando pongo el cursor encima del botón de compartir de Tuenti, me aparece un mensaje de este estilo: Compartir[NOMBRE DE LA ENTRADA]en Tuenti. Es decir, me sale el mensaje sin espacios. He visto en que en tu blog sólo aparece el nombre de la entrada.
    Sería personalizar la parte del código [Compartir" + data:post.title + "en Tuenti"], pero no sé cómo.
    Saludos!

    ResponderEliminar
  9. Hola Tommy, un nuevo descuido, jeje Ya lo he solucionado y puedes coger el código de la entrada. Únicamente había que agregar un espacio después de "Compartir " y otro antes de " en Tuenti". Al final lo he puedo todo junto al principio.

    Gracias por el aviso ;D

    ResponderEliminar
  10. Hola, he agregado el boton en mi página de blogger, pero no me sale el dibujo de tuenti,pero el funcionamiento es bueno; qué debo hacer???? muchas gracias.

    ResponderEliminar
  11. Hola Rafa,

    En el código que facilito no se incluye la imagen de Tuenti. Para ello debes elegirla primero en la página que facilito justo debajo del código y a continuación agregar el link de la imagen.

    Un saludo ;-)

    ResponderEliminar
  12. Muchas gracias Javier. La verdad que era fácil lo del espacio xDDD. Yo me fui a lo difícil y lo intenté hacer con la etiqueta "&nbsp", pero nada.
    Saludos!

    ResponderEliminar
  13. Hola Javier!!!sí sí, lo he hecho así, pero a pesar de ello no sé o no me sale lo del icono o imagen aún con el tutorial de tuenti que nos enlazas. Hay que cambiar algo más de tu enlace de tuenti???? 0 sólo la URL IMAGEN???Muchas gracias.

    ResponderEliminar
  14. Hola alguien me puede ayudar con el boton de tuenti. Ya lo hice con el de facebook pero la imagen del boton de tuenti el enlace esta roto

    ResponderEliminar
  15. Hola Guillermo y Rafa,

    El código de Tuenti funciona correctamente, únicamente hay que enlazar una imagen dentro de la etiqueta -img src='URL IMAGEN'- o tambien puedes eliminar esa etiqueta y color un texto.

    Un saludo

    ResponderEliminar
  16. Hola... he estado haciendo pruebas...y mi contador del twitter no cambia. Digo lo hace al momento, pero si recargo la página el contador se pone en cero. Alguna idea?

    ResponderEliminar
  17. Hola Anómino, el problema con el contador de Twitter está afectando a todos los usuarios, suele tener un retreso hasta que se contabilizan los tweets, pero al final los contabiliza.

    Un saludo

    ResponderEliminar
  18. Gracias por aclararme la duda tan rapido. Ok estaré al pendiente de los cambios, si todo sigue igual me estaré dando una vuelta por aca para seguir molestando jejeje :P.

    Saludos Javier.

    ResponderEliminar
  19. el boton de facebook me queda un poquito mas arriba que el de twitter...como lo cambio?
    mira:
    http://videosparapocos.blogspot.com/

    ResponderEliminar
  20. me paso lo mismo que mateo, y encima me quedo abajo de la entrada

    ResponderEliminar
  21. Excelente!!!
    Gracias por la mano para que exista la posibilidad de interconectar nuestros puntos de vista, maás allá de las políticas corporativas de las empresas

    ResponderEliminar
  22. Perdona. Me podrias decir como hacer para que los botones de compartir salgan al principio de la entrada en lugar de al final? muchas gracias!!

    ResponderEliminar
  23. Hola Mateo y Elías, no sé exactamente a que se puede deber ese error, he de suponer que será por el CSS de vuestros blogs ya que otros usuarios han utilizado este mismo código y no han tenido ningún problema.

    Un saludo

    ResponderEliminar
  24. Hola Twal, para ubicar los botones al principio de la entrada tienes que pegar el código antes de la etiqueta -data:post.body/-

    Un saludo

    ResponderEliminar
  25. NO encuentro en mi plantilla estos datos, ya los busque de todas las maneras habidos y por haber !!
    la verdad no se mas que hacer...si tienen alguna otra idea, bienvenida :)

    ResponderEliminar
  26. Gracias por el post! ;) Lo agregaré a una de las páginas que estoy haciendo.

    ResponderEliminar
  27. Muchas gracias por la información aunque yo tengo un problemilla, coloco bien los tres botones pero se me quedan en la misma linea que empieza mi texto y visualmente no queda bien,además el de Facebook queda unos px por encima de los demás como se ve aquí http://watermelonrude.blogspot.com/2010/12/feliz-navidad-donosti.html había pensado ponerlo al final del post en lugar de al principio pero no se como hacerlo. Gracias

    ResponderEliminar
  28. Bueno el comentario que te deje ya lo he medio solucionado pero el codigo de facebook no comparte, solo pone si te gusta o no.

    ResponderEliminar
  29. Hola Watermelon, he visto en tu blog que ya has solucionado todos los problemas, como bien comentas el código de Facebook es para el botón de "Me gusta" para compartir únicamente tienes que sustituir el código por éste que puedes encontrar aquí http://developers.facebook.com/docs/share

    Un saludo

    ResponderEliminar
  30. gracias. Por algún motivo no dejaba insertar los botones que incluye blogger y gracias a ti lo he hecho de forma manual

    ResponderEliminar
  31. Muchas gracias Tio !, me has ayudado un montón... ^^

    ResponderEliminar
  32. Yo te podría decir que me ha ido de maravilla pero el icono de facebook sale un poco mas arriba que el de twitter... no se ve alineado y no sé ya que hacer

    ResponderEliminar
  33. Hola anónimo, en el caso de Facebook incluí la altura (28px) para que quedara precisamente alineado con el resto. Puedes probar a modificar esa cifra aunque pienso que puede deberse a la hoja de estilos que realiza algún tipo de ajuste.

    Un saludo y gracias a vosotro

    ResponderEliminar
  34. muchas gracias, de los que encontramos en internet este fue el más útil

    ResponderEliminar
  35. muchisimas gracias por el aporte me ha sido de gran ayuda, gracias gracias graciasssssss :)

    ResponderEliminar
  36. Muchas gracias de verdad por contenido tan efectivo de este post, un saludo!

    ResponderEliminar
  37. Llevaba tooodo el día perdido buscando este tema, porque en Blogger los botones salían compartir el blog, pero no cada entrada, y gracias a tí lo he conseguido.
    ¡Gracias! :)

    ResponderEliminar
  38. Muy buena la entrada justo lo que buscaba y en los comentarios encontré algunas soluciones de ultimo minuto gracias

    ResponderEliminar
  39. Hola javier, una pregunta que código usaste para alinear la altura a 28px el icono de facebook como mencionaste en un comentario anterior? saludos!

    ResponderEliminar
  40. Hola Marcelo, no sé a que te refieres exactamente con esta alineación, todos los botones tienen la misma altura, únicamente hay que indica el margen de separación derecho para que no estén juntos (margin-left:XXpx), si puedes aclarar aún más tu duda.

    Un saludo

    ResponderEliminar
  41. Hola muy buenas javier!! Estoy montando un blog bastante interesante, con contenido entretenido, divertido... Y me gustaría que mis lectores puedan compartir estos. Me encantaría tener el mismo código que el tuyo, para compartir en tuenti, twitter, facebook, buzz, ... Igual que lo tienes tu. Podrías enviarme el código tal cual como lo tienes tu puesto en este sitio, por favor.

    Espero tu respuesta atentamente en mi gmail.

    Un saludo amigo!

    karpetainfo@gmail.com

    ResponderEliminar
  42. Estoy teniendo un problema serio en mi blog con el botón "Me gusta" de Facebook. Me cuenta la totalidad del blog y no de cada entrada. En algunos post, en otros no... cambia la cantidad de manera significativa hacia abajo y hacia arriba en un mismo día. Muy extraño. Ya probé de todo y pienso que tal vez haya un conflicto con el Facebook Comments. Veo que a vos te funciona correcto. Qué puede estar sucediendo ?

    ResponderEliminar
  43. Hola Ivon, en ocasiones y sin ningún porqué el botón "me gusta" se pone un poco loco, me ha pasado en varias ocasiones en este blog.

    Cuando puse los comentarios me generaba problemas de incompatibilidad con "me gusta" ya que utilizaba en ambos la versión XFBML, sin embargo, cuando agregué la versión iframe de "me gusta" desaparecieron los problemas. Has comprabado esto último?

    Saludos

    ResponderEliminar
  44. Como pongo el send button de facebook?

    ResponderEliminar
  45. Muchísimas gracias Javier ! tarde pero seguro. Mi correo desborda y no me había percatado de tu pronta respuesta. Un abrazo !

    ResponderEliminar
  46. ¿Hay alguna manera de poner los botones en la firma de Gmail?
    Gracias por compartir.
    Maribel

    ResponderEliminar
  47. pues a mi nop me ha salido

    ResponderEliminar
  48. tengo un problema cuando pongo los botones de compartir justo debajo del cuerpo de la entrada los pongo todos la plantilla me dice k esta bien estructurada y no encuentra ningun fallo pero al ver las entradas en mi plantilla no salen

    ResponderEliminar
  49. Hola Javier, tengo 2 blogs, en uno se ven y funcionan prefectamente los botones para compartir, en el otro no y es realmente donde me interesa que funcionen, los dos son de blogger, puedes decirme a que puede deberse esto?

    Blog donde funcionan: http://pruebasjuanca.blogspot.com.es/
    Blog donde no funcionan: http://bloggerhouseforyou.blogspot.com.es/

    Gracias por ayudarme a intentar resolver el problema, saludos!!

    ResponderEliminar
  50. Ah!! y otra cosa! en el blog donde funcionan los blotones, mi blog de pruebas, el boton de whatsapp no funciona, también me gustaría saber como arreglarlo, gracias!!

    ResponderEliminar
  51. Tengo otros dos blogs más donde también me gustaría incluir estos botones pero no me he atrevido a incluirlos al no funcionar en el blog BH. si me das una solución lo intentaré tambien alli, en caso de que funcione en mis tres blogs principales haré una mención a tu página ;)

    ResponderEliminar
  52. Sr javier cerezo mil gracias por pasarme la de separar botones me alegro el dia mil gracias

    ResponderEliminar

Por favor, respeta el resto de opiniones. Insultos y comentarios fuera de lugar, como el spam, serán borrados.