Blogger

Botones oficiales para “compartir” en Blogger

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

Deja un comentario

68 Comentarios

  • Información Bitacoras.com…

    Valora en Bitacoras.com: 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 agregarlo……

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

  • 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).

  • @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.

  • 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…..

  • 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

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

  • 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

  • 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

  • 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

  • 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!

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

  • ¡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

  • 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!!

  • 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?

  • 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.

  • ¡¡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!

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

    Me podrias ayudar?

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

  • @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) + ‘

  • 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

  • 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!

  • GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

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

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

    gracias

  • 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

  • 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.

  • 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

  • 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

  • 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?

  • 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!!

  • 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

  • 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!

  • 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.

  • 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

  • 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.

  • 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. 🙂

  • 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

  • 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!

  • 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!

  • 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!

  • 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! 😉

  • tengo una pregunta llevo toda la noche buscando algo como esto:

    1.- un icono de compartir que al darle clic me aparezcan todas las redes sociales, en lugar de tener todos los iconos de las redes.

    2.- Que este icono aparezca en la vista previa de mis entradas.

    Y he puesto mis las redes para compartir pero aparecen siempre al final del blog y visitando un blog vi que una chava tenia un solo icono que te daba la opción para todas las redes hasta para copiar enlace, y lo tenias en la vista previas de sus entradas.