24 oct. 2012

Botón Compartir de Google+ en cada post de Blogger



En este tutorial aprenderás a incorporar el botón Compartir de Google+ en cada uno de tus post en Blogger. La misión de este botón en tu blog es facilitar a tus lectores que compartan tus post con sus círculos sin necesidad de hacer un +1. También puede ser un método rápido de promocionar los post antiguos de tu blog entre tus círculos de Google+, ahora solo tendrías que visualizar tu blog e ir compartiendo aquellos post que te interesa trasladar a tus seguidores haciendo clic en este botón.

Botón Compartir de Google+ en cada post de Blogger
Botón "Compartir" de Google+ en cada post de Blogger

Comprueba su funcionamiento

Antes de seguir, puedes comprobar el funcionamiento de este botón en iniciaBlog. El botón de compartir lo tengo al pie de cada post, de manera que puedes probarlo y decidir si procedes a su incorporación en tu blog o si de momento lo dejas pendiente. Cuando hagas clic verás un diálogo donde te pide con cuales de tus círculos vas a compartir la entrada del blog.

Diferencia entre el botón +1 y el botón de compartir de Google+

Cuando haces clic en el botón +1, efectivamente puedes compartir a tus círculos pero tu voto queda registrado, por lo que si decides volver a clicarlo tu voto desaparece. El botón de compartir está diseñado para que puedas usarlo tantas veces como quieras y eso no implica quitar o poner tu voto dado con +1.

¿Para qué resulta interesante este botón en el blog?

Es otra manera más de compartir tus post en la red social de Google. ¿Cómo hacías hasta ahora para compartir en Google+ un post antiguo? Lo más lógico era acceder a la pestaña entrada, mover el ratón sobre el título de la entrada y hacer clic en el enlace Compartir que se muestra. Ahora también podrás compartir visualizando tu blog y presionando este nuevo botón y eso lo hace interesante, ya que es más dinámico y visual el proceso. 

Tendrás que hacer un sencillo cambio en tu plantilla HTML

Para colocar este botón en tu blog necesitarás modificar tu plantilla y agregar dos fragmento de código. En el caso que ya tengas el botón +1 de Google+ solo tendrías que añadir el fragmento de código relativo al botón. Es fácil, tu sigue el tutorial que no tiene pérdida.

Pasos para agregar el botón de Compartir de Google +

Primer fragmento de código. (Solo para los que no tengan el botón +1 de Google)

  1. Ve a la pestaña Plantilla
  2. Haz clic en el botón Crear copia de seguridad/restablecer
  3. Crea una copia de seguridad de tu plantilla actual
  4. Una vez que tengas la copia, haz clic en el botón Edición de HTML
  5. Usa la combinación de teclas Ctrl F o Ctrl B (en Mac ⌘F o ⌘B) para abrir el buscador
  6. Busca </head> dentro de tu plantilla. 
  7. Copia el siguiente código (si no tenias ya en tu blog el botón +1)

  8. Pégalo justo antes de la linea donde hemos encontrado </head>
  9. Guarda tu plantilla y nos quedamos el editor HTML para incorporar a continuación el botón

Segundo fragmento de código del Botón compartir

  1. Usa la combinación de teclas Ctrl F o Ctrl B (en Mac ⌘F o ⌘B) para abrir el buscador
  2. Para situarlo al pie del post, busca: <div class='post-footer-line post-footer-line-1'> o bien esto otro <div class='post-footer'>
    Para situarlo en la cabecera del post, busca:  
    <div class='post-header'>
    (Si encuentras varios resultados es el primero en este caso)
     
  3. A continuación mira qué estilo de botón quieres para tu blog y copia el fragmento correspondiente.
  4. Botón + Fragmento de código HTML




  5. Vuelve a la plantilla HTML y péga el código justo debajo de la linea encontrada en el paso 3
  6. Guarda, visualiza tu blog y listo!. Enhorabuena lo has conseguido.
Antes de despedirme, recomendarte que visites el centro oficial para desarrolladores de Google, si quieres conocer otros parámetros avanzados así como otras opciones de este botón como puedan ser la sintaxis HTML5 o la carga asíncrona. En este caso he usado lo más "estándar"

¿Cómo alinear este botón?

Esta es una pregunta que me han hecho no solo con respecto a este botón sino también con respecto a resto de los botones que tenemos para compartir las entradas, como por ejemplo el botón de Twitter, Facebook, Linkedin, Google+, imprimir.  Aquí va mi sugerencia, debes poner una división (div) que envuelta tanto a este botón como a todos los demás que tengas. El código es muy sencillo:


<div style='width:600px; vertical-align:top;border:0'>
        ...aquí el código del botón de compatir
        ...y el resto de código de los otros botones que tengas para compartir
</div>
Con el parámetro vertical-align podemos alinearlos al Top (arriba), middle (medio), botton (abajo) +info sobre esta propiedad CSS
Con el parámetro width establecemos el ancho de la división. 

¿Conocías este botón de Compartir? ¿has aplicado ya este tutorial? ¿lo ves práctico?

Me gustaría completar este artículo con tu comentario. Además si lo consideras interesante para tus amigos y seguidores compártelo utilizado los botones sociales situados en el pié del artículo.

¿Quieres recibir los próximos tutoriales de iniciaBlog directamente en tu email?

En este caso puedes suscribirte a nuestro boletín y recibirás los próximos tutoriales y consejos para tu blog directamente en tu buzón de correo electrónico. Recuerda que una vez envíes tu solicitud, recibirás un email con un enlace para confirmar tu suscripción. ¡Gracias!


34 comentarios:

  1. Ya incorpore el botón y funciona pero quisiera que quedara al lado del botón de Pinterest y no debajo de este. ¿Qué puedo hacer?

    ResponderEliminar
    Respuestas
    1. Claro,
      Ya lo tienes explicado en el post...bajo la pregunta al final de cómo alinear el botón. Muchas gracias por tu sugerencia!

      Eliminar
    2. Cordial saludo.

      Nuevamente consultando sobre una duda. (La anterior no ha recibido respuesta... http://www.iniciablog.com/2012/10/configurar-resumen-miniatura-post-blogger.html)

      Quería saber cuál sería la diferencia de este botón, con el que ya me aparece de forma predeterminada en las entradas de mi blog: www.guiadelsena.com

      Eliminar
  2. Hola!
    De nuevo genial tu post. Muy útil y práctico. Lo único es que el botón de compartir queda separado del botón g+. Si pudieras indicarnos dónde está el códico para el botón g+ podremos ponerlos juntos, ¿no?, además de editarlo, porque yo, por ejemplo, le quiero quitar lo de "+1 recomendar esto en google". No se si me explico bien, soy un poco patatera en esto.

    En la página de desarrolladores que nos recomiendas vienen los códigos con los distintos formatos para el botón g+, pero lo dicho, ni idea de donde colocarlo.

    Muchas gracias por todo !! y un saludo!!

    ResponderEliminar
    Respuestas
    1. Hola Marta,

      Muchas gracias y llevas toda la razón. He puesto un enlace que te lleva al otro tutorial del botón +1. De todas formas haz clic aqui para ver el otro tutorial

      Eliminar
  3. Hola!
    De nuevo genial tu post, muy útil y práctico. Lo único para comentarte es que el botón compartir queda separado del botón g+. Si nos pudieras indicar dónde encontrar el botón g+ en el código HTML podríamos ponerlos juntos, no?, además de editarlo. Porque por ejemplo, yo le quiero quitar al mio eso de "+1 recomendar esto en google".

    En la página que nos recomiendas de los desarrolladores vienen todas las opciones de los botones g+ y compartir, también muy útil ;-)

    Muchas gracias y un saludo!!

    ResponderEliminar
  4. yo tengo incorporado otro botón el "g+1" y creo que cumplen la misma función ¿no?.

    Un abrazo !!.

    ResponderEliminar
    Respuestas
    1. Muchisimas gracias Celso por la comparación. Acabo de agregar esa pregunta al post. Así que te he respondido bajo el apartado "Diferencia entre el botón +1 y compartir"

      Gracias por tu aporte

      Eliminar
  5. Si deseo comentar con cuenta de facebook como lo haría.
    Es decir que la caja de comentarios tenga la opcion de comentar con cuenta de google+ y con cuenta de facebook

    ResponderEliminar
    Respuestas
    1. Hola Justo,
      Es una buena pregunta. Lamentablemente la caja de comentario que viene por defecto con Blogger no soporta la funcionalidad que comentas.

      Tendrías que añadirle a tu blog otro sistema de comentario. Mira a ver si te sirve este:
      http://vagabundia.blogspot.com/2011/05/el-nuevo-comment-box-de-facebook-en.html

      Recuerda siempre hacer copias de seguridad en tu blog.

      Eliminar
  6. Muy bien explicado y sencillo. Gracias por compartir.

    ResponderEliminar
  7. Hola Jesús muy bueno tu post, tengo una pregunta, bueno quisiera pedirte un favor, si nos pudieses hablar del botón "hangouts" que se que también se puede integrar a Blogger, para qie seria y como se utilizaría, gracias y nuevamente felicitarte por tu blog, esperando me saques de dudas, gracias ...

    ResponderEliminar
    Respuestas
    1. Perfecto Rafael,

      Me parece una estupenda idea dedicar uno o varios post a Hangout.

      Jesús González

      Eliminar
  8. Hola... seguí al pie de la letra tus instrucciones, pero simplemente no funcionó.. será porque tengo una plantilla personalizada?

    ResponderEliminar
    Respuestas
    1. Hola Blanca,

      lo cierto es que no hallo explicación. Si has aplicado estos cambios en tu blog lo cierto es que no se ve por ningún lado.

      ¿Al guardar tu plantilla te dio error o algo parecido?

      Eliminar
  9. Muy útil todo, lo estoy haciendo y todo va bien, pero me gustaría cambiar "share" por "compartir" ¿cómo puedo cambiar el idioma de los botones google de inglés a español?

    ResponderEliminar
    Respuestas
    1. Hola Carmen,
      Qué buena prengunta. Te refieres al botón de Linkedin que por defecto muestra el texto Shared pero sabes qué, que viendo la página para desarrolladores, no ofrecen opciones de lenguaje y sale así en todos los sitios de manera estándar.

      De momento habrá que esperas a ver si en un futuro esta red social ofrece la posibilidad de parametrizar el idioma.

      Seguimos conversado.

      Gracias

      Jesús

      Eliminar
  10. Jesús, excelente post, como siempre, explicado clarísimo! ya agregué el botón para compartir, y me has aclarado perfectamente la diferencia con el otro de +1, que hasta ahora pensaba que era lo mismo! Gracias, cariños desde Argentina, Victoria

    ResponderEliminar
    Respuestas
    1. genial Victoria!

      Muchisimas gracias por el comentario!

      Eliminar
  11. wordpress tiene una opcion a traves de un plugin de compartir de manera automatica los post en pinterest y paginas de G+, no en perfiles de google plus, sino paginas.

    ResponderEliminar
    Respuestas
    1. Gracias Leiva por este dato.

      En el caso de Blogger recuerda que tienes una pestaña para configurar si publicas de manera automática en tu página de Google+ o en tu perfil personal.

      Un fuerte abrazo!

      Jesús González

      Eliminar
  12. Todo bien, pero si los servidores de Google tienen problemas o se están actualizando nuestra web no llegaría a renderizarse. por eso cuando llamamos al script (en HTML 5) usamos async:

    script async src="http://una-web.com/script.js"></script (lo puse así porque no se admiten tags de script en los comentarios) o de la forma que Google nos muestra en la zona de "developers".
    Con esto hacemos que las peticiones continúen de forma asíncrona, para que la web cargue independientemente de un script. Gracias por la ayuda, yo lo estoy por implementar en mi web.

    ResponderEliminar
    Respuestas
    1. Hola Vennenno,

      Correctísimo tu comentario, efectivamente una llamada asíncrona es ideal para que la página no demore. Por esto no cierro mi post sino que dejo la puerta a que puedan probar métodos avanzados como el que tu propones. En mi caso y en la mayoría de los usuario prefiero el método más estándar y compatible con la mayoria de los navegadores, por eso uso el código no asíncrono.

      Muchísimas gracias por este estupendo comentario y espero que nos cuentes la experiencia.

      Jesús.

      Eliminar
  13. Gracias me funciona perfectamente... se agradece el info.

    ResponderEliminar
    Respuestas
    1. gracias a ti Fenix, me alegra muchísimo saber que lo has podido aplicar con éxito.
      Jesús

      Eliminar
  14. Hola! está muy interesante el blog! estoy poniendo los botones de redes sociales, lo que no entiendo es la parte donde explicas cómo ponerlos de forma horizontal, que es como me gustaría que queden los botones! así ocupa menos espacio. gracias!

    ResponderEliminar
    Respuestas
    1. Hola Cristian,

      Para linearlos es como si tuvieras que crear una division que los envuelva a los tres. Edita tu plantilla, busca la zona donde los tienes a los tres y escribe, antes de la primera linea del primero de los botones esto el comienzo de la division (cópiala de arriba ya que aquí en los comentarios no te lo puedo poner)...<div style='width:600px; ......


      y baja hasta que veas la última linea de los botones y justo debajo cierra la division
      .....</div>

      esto es todo.

      Eliminar
    2. Hola Jesús, gracias por contestar! Hoy volví a intentar, siguiendo tus indicaciones, pero solo el tercer boton lo lleva a la derecha, en su misma línea, luego llegué a la conclusión de que así como están, no están tan mal.jeje luego intenté agregar un 4to botón (linkedin) solo cuando lo pongo en primer lugar aparece, quiero ponerlo 4to, pero se queda al lado del 3ro, no bajo el 3ro.. Es soy un caradura para meterme entre esos códigos que ni sé qué son! Pero sigo haciéndole retoques a la página, gran parte, guiándome por tus artículos y el que publicaste en el blog de Google. Veré si puedo mañana hacer un pantallazo al script para pasarte, o mejor cómo tengo insertado el código, por email. Saludos!

      Eliminar
  15. Lo que yo necesito es que queden de forma horizontal, no uno debajo de otro, eso se puede?

    ResponderEliminar
    Respuestas
    1. Hola Christian,
      He estado en tu blog, veo que lo has conseguido colocando una Tabla ¿Verdad?. El motivo del por qué creaba dos lineas es porque aunque aparentemente caben no erá así. Sobre todo el botón de Facebook como el de enviar ocupa mucho espacio horizontal.

      En definitiva lo has solucionado, enhorabuena.

      Saludos, Jesús

      Eliminar

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! ;-)

Más información ¿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 González

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