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 |
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)
- Ve a la pestaña Plantilla
- Haz clic en el botón Crear copia de seguridad/restablecer
- Crea una copia de seguridad de tu plantilla actual
- Una vez que tengas la copia, haz clic en el botón Edición de HTML
- Lee el mensaje de advertencia y presiona Continuar
- Haz clic donde pone Explandir plantilla de artilugios
- Usa la combinación de teclas Ctrl F o Ctrl B (en Mac ⌘F o ⌘B) para abrir el buscador
- Busca </head> dentro de tu plantilla.
- Copia el siguiente código (si no tenias ya en tu blog el botón +1)
- Pégalo justo antes de la linea donde hemos encontrado </head>
- 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
- Usa la combinación de teclas Ctrl F o Ctrl B (en Mac ⌘F o ⌘B) para abrir el buscador
- 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) - A continuación mira qué estilo de botón quieres para tu blog y copia el fragmento correspondiente.
- Vuelve a la plantilla HTML y péga el código justo debajo de la linea encontrada en el paso 3
- Guarda, visualiza tu blog y listo!. Enhorabuena lo has conseguido.
| Botón + Fragmento de código HTML |
| |
| |
| |
| |
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!