Cómo poner el botón +1 de Google Plus en Blogger

Uno de los botones sociales que no puede faltar en tu blog es el botón +1 de Google, si no lo has incluido aún este tutorial te va a gustar y si ya lo has incluido, aprenderás a modificarlo y sacarle el máximo partido.

Una de las mayores ventajas de este botón es el efecto positivo que tiene para el posicionamiento de tu blog, ya que cada vez que un usuario hace +1 en una entrada, realmente la está recomendando a sus círculos y al mundo, incluido al buscador de Google

Qué es el botón +1

El botón +1 tiene una doble función, por un lado permite al usuario compartir las entradas (o tu blog) y por otro se incrementa un contador interno de  "mas unos", lo que aumenta la la popularidad de esa entrada.

Si lo comparásemos con Facebook, utilizar el botón +1 es similar a hacer un "me gusta" 

Uno de los parámetros que tiene en cuenta el buscador de Google es la cantidad de +1 que se ha hecho en una página, por ello es muy importante divulgar tu contenido en la red social de Google y, sobre todo, tener una herramienta en tu blog para que tus lectores puedan recomendar tu contenido: el botón +1.

Fíjate que el botón +1 sirve para compartir el contenido que quieras de tu blog: entradas, páginas, homepage, etc. Lo que compartimos son enlaces web (URLs) que pueden apuntar hacia cualquier contenido. Podrías poner este botón en una sección de tu blog (en un lateral por ejemplo) para compartir la URL principal "www.tublog.com" y otro botón en cada una de las entradas para poder compartirlas.

Si quieres añadir un botón +1 para recomendar tu blog (y no solo las entradas), puedes aprovechar e incluir la insignia de Google+, que integra la funcionalidad del +1 y el poder añadir directamente a círculos. Échale un vistazo a esta guía si quieres añadir una insignia de Google+.

Pues ahora que tenemos claro qué es el botón +1 y para qué sirve, vamos a incluirlo en el blog.

Nota: El objetivo de esta serie de artículos es crear un gadget personalizado con todos los botones de las redes sociales. Blogger tiene un conjunto de botones sociales que se pueden incluir en las entradas, pero que no permite personalización.

Para desactivar los botones sociales que aparecen por defecto en Blogger, debes acceder a "Blogger > Diseño" y editar el gadget "Entradas del Blog", en la ventana emergente que te aparece busca la opción "Mostrar botones para compartir" y desmárcala.

Cómo poner el botón +1 de Google Plus en todas la entradas

1. Haz una copia de seguridad de tu plantilla
   Blogger > Plantilla > Crear/Restablecer copia de seguridad
2. Accede al código HTML de la plantilla
   Blogger > Plantilla > Editar HTML
3. Copia este código:

   <div class='g-plusone' data-size='tall' expr:data-href="data:post.url"></div>
   <script type="text/javascript">
     window.___gcfg = {lang: 'es'};
   
     (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/platform.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
   </script>

4. Pega el código en la zona donde quieras que aparezca el botón
1. Si quieres colocar el botón al final de las entradas
   Busca todas las apariciones de "post-footer-line post-footer-line-1" (mediante CTRL + F) y copia el código del punto 3 justo debajo de esa línea
2. Si vas a colocar el botón al principio de las entradas
   Busca todas las apariciones de "post-header-line" (CTRL + F) y copia el código del punto 3 justo debajo
5. Guarda la plantilla y visualiza el resultado

El resultado del botón tendrá este aspecto: ¿Lo pruebas regalándome un +1? :-)

El código del punto 3 tiene por un lado la etiqueta div y por otro la etiqueta script. Si ya tenías algún widget de Google+ no es necesario que copies la sección del script, te servirá con copiar  "<div class='g-plusone' data-size='tall' expr:data-href="data:post.url"></div>". 

Cómo personalizar el botón +1

El código anterior muestra el botón +1 con contador superior, puede que ése no sea el aspecto que quieras para tu blog. Google+, al igual que otras redes sociales, ofrecen un conjunto de herramientas o widgets que resultan bastante útiles. ¿Te animas a personalizar el botón?

1. Accede a la herramienta de personalización del botón +1 de Google+
2. Modifica el botón según el tamaño, contador, ancho, idioma, etc.
3. Copia solo la etiqueta <div class="g-plusone" ...></div> del código que te genera la herramienta
4. Al código anterior le añades el atributo con la url, de esta forma:  <div class="g-plusone" ...  expr:data-href='data:post.url'></div>
5. Sustituye el div del paso 3 del apartado anterior por este otro que acabas de crear
6. Guarda la plantilla y visualiza el resultado. Si no gustase el aspecto puedes volver al punto 1

Lo único que hemos hecho es aprovechar la herramienta que nos ofrece Google para generar visualmente el botón y añadir la macro data:post.url de Blogger, que devuelve la URL de la entrada.

Conclusión

Tenía tres objetivos en mente con esta entrada

1. Explicarte el funcionamiento y la importancia del botón +1
2. Mostrarte cómo poner el botón +1 y que seas capaz de modificarlo por ti mismo
3. Dar un paso más para incluir una botonera en las entradas con las redes sociales más importantes 

Podría haber puesto directamente el código que necesitas para incluir el botón, códigos de este tipo ya hay muchos por la red, pero si has leído hasta aquí estoy seguro que tienes ganas de aprender, de querer saber por qué es así y no de otra forma, de ver más allá de un código que mañana puede cambiar. 

Ahora te toca a ti, ¿ya tienes el botón +1? ¿te promocionas en la red social de Google?

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)