English Português

Blogger ha agregado un nuevo detalle a su plataforma, se trata de botones para compartir el contenido de un post en servicios sociales como: Facebook, Twitter, Blogger, Google Buzz y el mail de toda la vida.

¿Cómo agregarlos?

Primero hay que activarlos en:

Escritorio → Diseño → Blog Posts → Editar

botones-compartir-blogger

Si con esto no se muestran en tu blog, seguramente tienes una plantilla modificada, así que hay que agregar el código manualmente. En el código de tu plantilla (Escritorio → Diseño → Edición de HTML → Expandir plantilla de artilugios ), busca algo como lo siguiente:

<div class='post-footer-line post-footer-line-3'>

Nota: también puedes buscar por post-footer-line-2 o post-footer-line-1.

Justo después agrega el siguiente código:

<!-- Botones para compartir -->
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Te cuidado de que las etiquetas se abran y cierren correctamente, de otro modo, obtendrás un error.

Personalización

A partir de las clases que Blogger pone por defecto, es posible dar estilos a estos iconos y así personalizar su ubicación, dimensiones o cualquier otra propiedad con CSS. Las clases que agrega Blogger son:

.post-share-buttons {} /* Contenedor de los botones */
.share-button {} /* Aplicada a todos los botones */
.sb-email {} /* Botón para compartir por email */
.sb-blog {} /* Botón para compartir en un blog de Blogger */
.sb-twitter {} /* Botón para compartir en un Twitter */
.sb-facebook {} /* Botón para compartir en un Facebook */
.sb-buzz {} /* Botón para compartir en un Google Buzz */

Conclusión

Fieles a su costumbre, Blogger llega años tarde con características que sus usuarios ya usaban sin su ayuda. Me parece que la opción es completa, pues ofrece los servicios más usados por los usuarios: Facebook, Twitter y el correo electrónico. Este último, quizá es el mayor aporte de esta función, pues agrega una nueva página con un formulario fácil de usar, que además hace uso de los contactos guardados en GMail.

compartir-blogger-email

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Catalina / Hace 6 años /

      Muchas gracias!!!
      Aunque agregando la opcion no me funcionó, lo hice agregando el código y funcionó perfectamente. Es realmente muy útil. Gracias!!

      Responder a Catalina →
    2. Frank / Hace 6 años /

      Muchas gracias por la ayuda! ya lo implenté por q los anteriores que tenía estaban haciendo la carga lenta.

      Responder a Frank →
    3. LMGuillermo / Hace 6 años /

      Pues muy buen post, aunque a mi no me quedan ni agreándolos con la opción de blogger ni modificando el código manualmente. A pesar de que quite el de addthis que ya tenía ni así lo pone ni en post-footer-line-1 ni en post-footer-line-2 ni en post-footer-line-3, es más ni en post-footer-line (sin número).

      Responder a LMGuillermo →
    4. Francisco / Hace 6 años /

      @LMGuillermo: Lo que pasa es que tienen que ser ambas cosas a la vez, activar en el panel y luego agregarlo en la plantilla. Solamente si abriste tu blog en el último mes, no será necesario agregar el código manualmente.

      Responder a Francisco →
    5. Sergio Martínez / Hace 6 años /

      Maestro GRACIAS!
      Facilisimo de comprender, vas a favoritos.

      Responder a Sergio Martínez →
    6. Zikeritox / Hace 6 años /

      Aaaaah lastima no me funciono! active los botones y no me aparecierón! agregue el codigo y desaparecen mis post’s! hehehe a que creen que se deba esto? cualquier ayuda o comentario les estare perennemente agradecido! saludos…..

      Responder a Zikeritox →
    7. Francisco / Hace 6 años /

      @Zikeritox: Seguramente no has cerrado una etiqueta bien, comprueba todo se abra y se cierre como corresponde.

      Responder a Francisco →
    8. Jane / Hace 6 años /

      me sirvio bastante

      Responder a Jane →
    9. Antonio / Hace 6 años /

      Gracias!!!

      Responder a Antonio →
    10. Francisco / Hace 6 años /

      hola queria preguntarte si me ayudarias a centrar los botones gracias

      Responder a Francisco →
    11. Layla / Hace 6 años /

      Hola! Muchisimas gracias por el post!!! Antes activando los botones no me salían, pero al poner el código en mi plantilla si!!! Muchas gracias por la ayuda ^^

      Un saludo

      Responder a Layla →
    12. asmodeo / Hace 6 años /

      Gracias 😉
      no sabia como ponerlos
      saludos!

      Responder a asmodeo →
    13. Braian / Hace 6 años /

      Muchas Gracias!! funciona perfectamente el codigo.. lo unico que en vez de un 1 me aparecia un 3 en este, en el nº final->

      Responder a Braian →
    14. Martin Caporali / Hace 6 años /

      GRACIAS!!! Me funcionó de 10 el codigo!!! Excelente!!! +10 para ustedes!!!

      Responder a Martin Caporali →
    15. Lenin Puga / Hace 6 años /

      Hola, gracias por el post, tengo una consulta, ¿como puedo hacer que los botones se vean en color y no grises?, ¿en que parte del css o html le modifico?, saludos y gracias de antemano

      Responder a Lenin Puga →
    16. Beatriz / Hace 6 años /

      HOLA COMO TE VA, QUIERO QUE ME AYUDES PORFIS DIME COMO PUEDO INCLUIR COMPARTELO EN TWITTER EN MI BLOG, YO NO SE MUCHO DE HTML, AYUDAME PARA PONER EL CODIGO EN I BLOG,
      GRACIAS

      Responder a Beatriz →
    17. Beatriz / Hace 6 años /

      HOLA GRACIAS POR TODOS TUS COMENTARIOS, PERO NO SE POR QUE SE PUSO NOMODIFICAR, ME LLAMO BEATRIZ, A TUS ORDENES Y ME ENCANTAN TODOS TUS ARTICULOS
      SALUDOS

      Responder a Beatriz →
    18. Andrés GF / Hace 6 años /

      Hola, Francisco, apliqué tus indicaciones y conseguí ubicar el botón de “me gusta” de Facebook, en la página de cada entrada de mi blog. Muchas gracias.

      Ahora quiero preguntarte: ¿Cómo puedo hacer para ubicar este botón al lado de los botones para compartir y que no quede desalineado y haya todo ese espacio después de él?

      Excelente tu página, y te agradeceré que me respondas. Abrazo!

      Responder a Andrés GF →
    19. Phoenix / Hace 6 años /

      Muchas gracias por tu post me ha servido de gran ayuda.

      Un saludo, Phoenix.

      Responder a Phoenix →
    20. alex / Hace 6 años /

      funciono gracias

      Responder a alex →
    21. Luis / Hace 6 años /

      de hecho ya estan los botones desde Twitter eso es una maravilla pues nos libramos de los plugins al menos en wordpress

      Responder a Luis →
    22. Javi / Hace 6 años /

      ¡Muchas gracias por esta entrada, me ha sido de gran ayuda para incorporar los botones oficiales de compartir!

      Seguiré pasándome para leer los tutoriales, creo que me van a ser muy útiles así que de nuevo, ¡gracias!

      Javi

      Responder a Javi →
    23. angelikova / Hace 6 años /

      que tal, me fue de mucha ayuda tu articulo, ya logré lo que quería después de batallar jajaja
      solo tengo una duda… cuando le doy click al botón de compartir a facebook, sí funciona solo que en mi muro sale parte del código y no la reseña del artículo… copio aquí lo que aparece:

      var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym

      incluso he visto q en varios muros de gent que comparte en su face, aparecen codigos similares, que puedo hacer??
      gracias!!

      Responder a angelikova →
    24. Roxana / Hace 6 años /

      Hola Francisco, he agregado el código en la plantilla de HTML pero al momento de probar los botones aparece que no encuentran la página y un error…¿que puedo hacer?

      Responder a Roxana →
    25. Nacho / Hace 6 años /

      Gracias por la info. me aparecen los iconos pero al comprobar me da error. Aparece que la página no existe. No encontre ni 1, 2 ni 3 y lo puse al final de footer’. Sabes donde puede fallar?

      Gracias,
      Nacho.

      Responder a Nacho →
    26. Santiago / Hace 6 años /

      ¡¡Muy bueno, muchas gracias!!

      Recién lo agregué a mi blog. Le incluí un float right para que flote a la derecha, pero no sé por qué se ve excelente en Google Chrome e IE, pero aparece una línea en blanco en Firefox =S

      ¿Tenés idea de qué puede ser y cómo arreglarlo?

      ¡Saludos, y muchas gracias otra vez!

      Responder a Santiago →
    27. Santiago Mendoza / Hace 6 años /

      Amigo me podrias ayudar, ya busque el codigo que especificaste, pero no aparece en mi blog (en la edicion html).

      Me podrias ayudar?

      Responder a Santiago Mendoza →
    28. a2b.cat / Hace 6 años /

      Muchas gracias. No sabia que código se tenía que añadir para que apareciera!!!

      Responder a a2b.cat →
    29. Diego / Hace 6 años /

      Muchísimas gracias!

      Responder a Diego →
    30. Jean Roa / Hace 6 años /

      Que tal Francisco ni idea que se podia hacer de esa manera, en mi plantilla no salia, Mil Gracias por el aporte…

      Responder a Jean Roa →
    31. portaltodo / Hace 6 años /

      @angelikova:

      hola a mi igual me sale ese error en facebook en mis entradas individuales en blogspot estoy rompiendome la cabeza con esto pero lo encontrare pero esto me pasa pues tengo un script para miniaturas en mi portada y cuanda ingreso en cada entrada y se comparte aparece el error de una parte de mi script

      summary_noimg = 300; summary_img = 300; img_thumb_height = 145; img_thumb_width = 185; //=1) { imgtag = ”; summ = summary_img; } var summary = imgtag + ” + removeHtmlTag(div.innerHTML,summ) + ‘

      Responder a portaltodo →
    32. Marcela / Hace 6 años /

      Hola!

      He intentado varias veces pegar el código que indicas, pero me dice que no se puede guardar y aparece la siguiente frase:

      Se ha encontrado más de un artilugio con el ID: HTML18. Los ID de artilugio deben ser exclusivos.

      Que puedo hacer???
      Gracias!!
      Marce

      Responder a Marcela →
    33. Enrique / Hace 6 años /

      Un artículo de gran ayuda. Gracias.

      Responder a Enrique →
    34. santiago / Hace 6 años /

      Hola. Active la opción e inserte el codigo pero no se ve. Buscando vi que ya está el codigo en mi plantilla, debajo de ‘2’ pero no se ve… ¿Qué podrá estár pasando????
      GRACIAS!

      Responder a santiago →
    35. Joel / Hace 5 años /

      Muchísimas gracias por tu ayuda!

      Responder a Joel →
    36. eluser / Hace 5 años /

      yo quiero modificarlo que al pasar el raton sobre ellos se expandan xD y no e podido

      Responder a eluser →
    37. Facundo Xmil / Hace 5 años /

      GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

      LO NECESITABA MUCHO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ERES UN GENIO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

      Responder a Facundo Xmil →
    38. Mercedes Navarro / Hace 5 años /

      Hola,
      Necesito poner un boton de Me Gusta en un correo generado por mailchimp, puedes ayudarme,

      gracias

      Responder a Mercedes Navarro →
    39. Lía / Hace 5 años /

      Recientemente he creado un blog y aunque aparecen los botones de compartir, el botón de Facebook no funciona correctamente. Cuando se abre el enlace no aparece la entrada publicada en el blog sino esto: “Blogger: Sign in”. ¿Podrían ayudarme? Mil gracias! Lía

      Responder a Lía →
    40. Lourdes / Hace 5 años /

      Hola Francisco.
      Un ciber abrazo y felicitaciones por tu super útil blog. De hecho hay mucho para aprender aqui. Hoy deseo hacerte la siguiente consulta. Hace algunos días cambie la plantilla de mi blog de blogger por uno más profesional y en esta aparecen los iconos de facebook y twitter, pero al hacer click no redirección a estas redes. Cómo puedo activarlos??
      Desde ya mil gracias.
      Lourdes.

      Responder a Lourdes →
    41. LUIS CRISTOBAL SAAVEDRA G / Hace 5 años /

      HOLA FRANCISCO, SALUDOS MUY BUENA TU PAGINA.

      Mira yo he buscado los elementos que tu dices en el post los ”

      Nota: también puedes buscar por post-footer-line-2 o post-footer-line-1. ”

      pero no me salen esos elementos donde los puedo colocar otra cosa, tengo activado los botones como tu dices que hay que hacer primero y no pasa nada, al igual que me he buscado en interner colocar un share facebook despues del post.body y tampoco no se que pueda hacer mira mi plantilla es modificada para blog es de wordpres modificada para blog esta es mi blog

      agradeceria tu ayuda francisco que de todas formas no he podido hacer esto, y como tu sabes ahora se a transformado en un alemento indespensable para la sobrevivencia de una pagina compartirlo con las redes sociales

      atte.

      Luis Cristobal Saavedra

      Responder a LUIS CRISTOBAL SAAVEDRA G →
    42. alex / Hace 5 años /

      mismo problema que cristobal solamente que los botones figuran en mi template pero estan ocultos, es como si mi plantilla los tapara, cambie los colores de los mismos. el template lo baje premiumbloggertemplates y vi que a unos cuantos templates de esta pagina tienen el mismo problema. me gustaria postear el codigo fuente de mi blog para ver si se puede resolver. muchas gracias

      Responder a alex →
    43. Jesica / Hace 5 años /

      Mismo Problema que Alex, auxilio!!!!!!!

      Responder a Jesica →
    44. bellalice / Hace 5 años /

      Puse la plantilla Notebook 2.0 en mi blog, para empezar la plantilla venia incompleta y no se veian los botones de compartir sino solo texto con el vinculo, se que estaba incompleta la plantilla porque lo encontré en otra pagina de ayuda, y pude corregír ese error, pero a medias. Ahora veo los botones pero sigue apareciendome un pedazo del texto de antes sobre cada boton… no tengo idea de como editarlo, ademas que los botones se ven grises y no de colores como los he visto en otras paginas… Que debo hacer?

      Responder a bellalice →
    45. Zherg / Hace 5 años /

      Muchas gracias por la explicación. Aprovecho para preguntar si suele notarse de forma clara algun aumento de visitas por el hecho de tener el botón. Un saludo!!

      Responder a Zherg →
    46. Luciano / Hace 5 años /

      hola…. tengo un inconveniente con este tema. Al cambiar la plantilla minima por la de Google-Chrome los iconos se hicieron invisible dejando mucho espacio entre entradas. Digo invisibles porque al pasar el puntero del mouse este cambia de forma y muestra un texto aludiendo a dichos botones, incluso funcionan normalmente pero no se los ve. El codigo que expones figura en la plantilla asi como las propiedades de los mismos.
      Desde ya muchas gracias y felicitaciones por la pagina, simple, clara y concisa
      atte Luciano

      Responder a Luciano →
    47. Zalo / Hace 5 años /

      Muchas gracias, ha sido de gran ayuda

      Responder a Zalo →
    48. Edyhawk / Hace 5 años /

      Gracias, me fue de mucha ayuda, llevaba mas de un mes sin saber como hacer eso…

      Responder a Edyhawk →
    49. Fherguzon Fletcher / Hace 5 años /

      Como podemos hacer para enmarcar los botones, es decir para meterlos dentro de un rectangulo de color?. Gracias.

      Responder a Fherguzon Fletcher →
    50. daniel / Hace 5 años /

      Hola Francisco, ojala puedas ayudarme.

      He puesto un “like” y “share” de facebook al blog entero (de blogger) pues queria que la gente compartiese la página entera, lo he puesto como widget y he teido que meter info de meta tags para el open graph de facebook, para que reconociese bien la pagina y la imagen que debe mostrar.

      Lo que pasó es que ahora los “like” y “share” de los post no detectan el post individual y hace referencia solo a la pagina entera… No encuentro como cambiar esto sin afectar a los meta tags…

      La verdad es que no se mucho de esto y lo poco que he ido descubriendo me tiene un poco confundido… 😉

      ¿Puedes ayudarme?

      muchas gracias!

      Responder a daniel →
    51. June / Hace 5 años /

      Llevo mucho tiempo leyendo tus ayudas y soluciones, también en otras páginas y no he conseguido por medio de ninguna de ellas que se me solucione el problema de los botones. Los tengo marcados para que aparezcan, incluso desde el gadget de entrada, los he movido de sitio para hacer comprobaciones. También he visto que el código aparece tras el post body 3, pero siguen sin verse, y tampoco he conseguido después de muchos intentos reducir el espacio tan grande que queda entre las entradas. Estoy ya desesperada y no sé cuál puede ser el problema. ¿Me puedes echar un cable? Muchas gracias.

      Responder a June →
    52. Laura / Hace 5 años /

      Mil gracias por la ayuda, casi que lanzo la laptop por el balcón, hasta que encontré tu artículo. Genial!!!

      Responder a Laura →
    53. Fran / Hace 5 años /

      era taaaan facil jajaja gracias!!

      Responder a Fran →
    54. Pablo / Hace 5 años /

      Hola, gracias x tu ayuda; pero no ni por la via de diseño y clickeando en los botones de Fbookk y otros ni modificando la plantilla (no me sla la linea de post-footer…) me salen los botones: no se como hacerlo ! Pablo

      Responder a Pablo →
    55. Carlos / Hace 5 años /

      De todos los links que abrí, busqué, usted fue el que mejor lo explicó, fue el más didáctico y más efectivo, para alguien que no tiene mucha experiencia informática. Saludos.

      Responder a Carlos →
    56. Juan / Hace 5 años /

      Yo he conseguido hacerlo metiendo el codigo despues de

      Responder a Juan →
    57. Juan / Hace 5 años /

      Despues de (quitar espacios para buscarlo)

      Responder a Juan →
    58. Juan / Hace 5 años /

      Despues de:

      Responder a Juan →
    59. andré / Hace 5 años /

      gracias amigo, buscaba una aplicación asi , ya que tengo un blog y es modificado, asi que inserte el codigo y me funcionó perfecto…gracias nuevamente. 🙂

      Responder a andré →
    60. veritos / Hace 4 años /

      muchas gracias!!! utilicé todas las opciones de las demás páginas y esta es la única que no me da error y puedo compartir con las tres redes importantes!!!
      Incluso sirve en las páginas creadas en blogger

      Responder a veritos →
    61. Aroha / Hace 4 años /

      Muchas gracias por el aporte. Compartiendo la vida es más fácil. ¡Me gusta¡
      😀

      Responder a Aroha →
    62. Celene / Hace 3 años /

      Aww gracias me sirvio lo estaba buscando Aunque solo puse el codigo

      yo tengo blogger y fui a diseño de vuelta diseño Añadir codigo Html y puse ese codigo y me lo agrego

      Muchas gracias!

      Responder a Celene →
    63. Celene / Hace 3 años /

      Aww gracias me sirvio lo estaba buscando Aunque solo puse el codigo

      yo tengo blogger y fui a diseño de vuelta diseño Añadir codigo Html y puse ese codigo y me lo agrego

      Muchas gracias!

      Responder a Celene →
    64. Celene / Hace 3 años /

      Aww gracias me sirvio lo estaba buscando Aunque solo puse el codigo

      yo tengo blogger y fui a diseño de vuelta diseño Añadir codigo Html y puse ese codigo y me lo agrego

      Muchas gracias!

      Responder a Celene →
    65. Brrru / Hace 3 años /

      Hola,

      he estado buscando en la plantilla de mi blog y no me aparecen los 2 códigos que comentas ().

      Lo más parecido que tengo es esto:

      ¿Puede ser que en mi plantilla no aparezca el código que tu comentas? ¿Cómo lo puedo hacer para añadir los botones oficiales de compartir?

      Muchas gracias!!! Un gran saludo…y gracias por la ayuda! 😉

      Responder a Brrru →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad