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

15 de junio de 2014
12 comentarios
Cómo poner el botón +1 de Google Plus en tu Blog

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

Cómo personalizar el botón +1 de Google+
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

Botón +1 de Google+ Conclusiones
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

Gracias :-)

12 comentarios :

  1. Sin lugar a dudas los 'pluswan' ayudan al posicionamiento, incluso me atrevo a decir que más que los likes o tuits ;) Por ende hay que implementarlos también en la sidebar para que los visitantes recomienden el blog.

    Gracias Fran, me gustaría que en una próxima entrada nos enseñes la implementación de los 3 botones sociales (Google+, Twitter, FB), como tú los tienes bajo el título del post y al final del mismo.

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Marcelo,

      Que alegría verte por aquí ;-) Aunque esta guía, al igual que la anterior de Twitter son básicas, creo que pueden ayudar a mucha gente que está empezando.

      Con respecto a los 3 botones (o más) juntos eso está hecho ;) En un próximo post comentaré el de Facebook y en el siguiente los juntamos todos para hacer una botonera inferior o superior con todos los botones sociales (Google+, Twitter, Facebook, Pinterest, Linkedin, ..). Pondré varios estilos de ejemplo, incluido la mía.

      ¡Un abrazo!

      Eliminar
  2. Perdón, quizá no tiene mucho que ver con esta entrada.. o algo si.

    Es que verás no encuentro lo que quiero de la manera que me gustaría. Quiero agregar botones para compartir en cada entrada botones del estilo de esta página: http://www.xataka.com/tecnologia-en-el-coche/mercedes-y-bmw-van-juntos-de-la-mano-para-la-carga-inalambrica-de-coches

    Si te fijas, debajo de la imagen hay unos botones para compartir, esos botones y he mirado el codigo fuente de la página y los elementos pero no se muy bien exactamente qué copiar y donde exactamente pegarlo en mi plantilla HTML de blogger. Yo solo quiero poder poner esos botones, sin efecto ni nada de que al pasar el ratón por encima hará esto y lo otro.. Eso no. Solamente los botones.

    No hallo la manera ni encuentro el tutorial de como hacer que esos botones aparezcan un poco antes del "Seguir Leyendo" de mis entradas y que al clickar en la entrada esos mismos botones aparezcan al final de la entrada antes de los comentarios.

    No se si es que quiero lo imposible jaja o será que no busco bien. No lo sé. En cualquier caso, gracias.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Perdón, este es mi blog, para que veas donde los quiero poner.

      http://nolosabiascuriosidades.blogspot.com.es/

      Eliminar
    2. Hola Kristian,

      Entiendo lo que quieres hacer. Podrías utilizar el servicio que ofrece AddThis, en la opción "Sharing Buttons", se aproxima a lo que quieres y lo si sigues los pasos que te indican lo tendrás funcionando de forma sencilla.

      Si aún así quieres personalizarlos por ti mismo, será un poco más complicado, pero lo puedes adaptar a tu gusto. Primero muestras los botones originales, tal como pongo yo en los ejemplos, luego los ocultas con CSS y luego muestras en su lugar el icono que desees. Si lo ves complicado o no sabes por donde empezar coméntamelo, podría ser interesante hacer un pequeño tutorial.

      Eliminar
  3. Muchas gracias por tu ayuda!Ha quedado genial!

    ResponderEliminar
    Respuestas
    1. Hola Hugo,

      Un placer tenerte por aquí, gracias a ti por comentar ;-)

      Eliminar
  4. Enhorabuena.. Éste sitio siempre me es de mucha ayuda.. un saludo ;)

    http://brevespensamientos79.blogspot.com

    ResponderEliminar
  5. Muy buenas, quiero decirle que es un excelente post. Sirve.
    Me gustaría pedirle un favor sobre cómo poner lo que usted tiene qué es:
    "Que lo compartas es el mejor regalo que me puedes hacer". Haría un tutorial sobre eso por favor?

    ResponderEliminar
    Respuestas
    1. Hola, tomo buena nota de tu propuesta para publicar una entrada explicando como incluir la caja de suscripción.

      Saludos ;)

      Eliminar
  6. Es muy util el Boton 1+...bastante practico, estos consejos son utiles, yo lo tengo implementado como Gadget, debo hacer esta manera especifica para aumentar en el posicionamiento, gracias, saludos :).

    ResponderEliminar
  7. Hola Revisando el blog me he dado cuenta que tengo el botón de google+1 y no recuerdo haberlo instalado. La plantilla que uso no es de blogger. Me gustaría saber como quitar el texto que acompaña el botón, alguna sugerencia?

    http://bquilla.blogspot.com.co/

    ResponderEliminar