Como poner el boton de google mas 1

Actualizado: 1/2/2012
Me he percatado de que los botones del ejemplo no se muestran. Pero podeis ver los botones funcionando correctamente en el index del blog ;)

Un rápido recorrido al proceso de agregar la nueva funcionalidad de google. Google +1 para conseguir más visitas! Muchos creen tenerlo bien implementado pero hoy se darán cuenta que no.

Google sacó hace unos días su nueva funcionalidad Google +1.
Hasta hoy he estado sin ganas de ponerlo pero un experimento propuesto por un compañero en un foro me ha dado el empuje para acabar poniéndolo.

He visto algunos foros y sobretodo blogs con el botón mal instalado apuntando a las urls que no son… y por eso me he decidido a escribir sobre ello.

Como dije en la introducción, muchos creen que pusieron bien el dichoso botoncito pero no es así…
También les daré algunas ideas interesantes de que se puede hacer con el mismo.

Código de Google +1

Lo primero es conocer un poco lo que google +1 es capaz de ofrecernos…
Nos vamos a la página de google+1 y configuramos el botón como queramos.

Pero si se fijan hay una pestaña de opciones avanzadas.

Esas opciones son:

  • Incluir contador…
  • que más decir

  • Parse
  • no la he tocado y ni me interesa :S

  • Callback function
  • Esta dará juego ;)

  • URL to +1
  • URL a la que se le sumará el +1

Bien las dos últimas son las que me importan y en el g:plusone los parámetros son callback y href respectivamente.

El código se divide en dos partes. La primera es incluir el javascript.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>

Y la segunda es el código del botón, variable según cada caso.
Éste sería el código más básico.
Simplemente agregaría un +1 a la página actual en la que nos encontremos.

<g:plusone></g:plusone>

Usar el Callback de google+1

El callback no es más que una función en javascript que nos permite realizar ciertas acciones cuando alguien clica sobre el botón de google+1.

Estas acciones son infinitas… desde mostrar un div con un simple gracias hasta hace un rastreo intensivo y hacer estadísticas… como siempre, queda a nuestra imaginación.

En este caso veremos dos casos bastante útiles.

Controlar cuando se suma o resta un +1 en el boton de google +1

Interesante porque podemos controlar si se suma o resta un +1 y realizar una acción en base a ello.

En mi ejemplo voy a usar un div en donde pondré un mensaje según el estado, también usaré el parámetro href para que se entienda.

El código del botón Google+1 es:

<g:plusone callback="sayThanks" href="http://apuntes.skamasle.com/"></g:plusone>

La función que hará el trabajo:

			function sayThanks(plusone) {
				var div_ty = document.getElementById('thanks');
				if (plusone.state == 'on') {
					div_ty.innerHTML = "Gracias por darnos tu voto de confianza!!! Nosotros también te amamos!";
				} else {
					div_ty.innerHTML = ":( parece que ya no nos quieres... Porque no te lo piensas mejor?";
				}
			}

Este sería el ejemplo funcionando:


Si dais click en el +1 aparecerá 1 mensaje en el div inferior, y si lo desactiváis dará un mensaje contrario.

El truco reside en el parámetro plusone de la función. Que podría llamarse de la forma que os de la gana.
Este parámetro contiene dentro cierta información en este caso state nos dará el estado del botón.
Siendo ‘on’ cuando esté activado y ‘off’ el contrario.

Volviendo al parámetro href, en este caso, todos los votos afectarían a la pagina principal de apuntes y no al post sobre el que estamos trabajando.

No se olviden de dejarnos el +1 si les ha servido el ejemplo!!! :P

Mostrar contenido oculto por medio del botón +1 de google

Esta es otra idea interesante.
Había visto al idea por medio del like de facebook.

Así que pensé que a muchos podría interesarles el mismo método.

Se trata de hacer lo mismo que en el ejemplo anterior pero usando jQuery eliminamos el div con el boton +1 (para que no pueda retirarse el +1 una vez visto el contenido).

Y mostramos el div que estaba oculto.

Si, lo se… si un div está oculto puede verse en el código… bueno…
Existe la posibilidad de usar AJAX para recuperar el contenido oculto y así saneamos dos fallos…
El otro es que al recargar la página aparece el botón +1 y se puede quitar el voto.
Pero como solo es un ejemplo de demostración no le daré demasiadas vueltas a ello.

Y aquí dejo el código:

function displayContent(plusone) {
	if (plusone.state == 'on') {
		$("#hideme").remove();
		$("#showme").attr('style',"display:block");
	}
}
<g:plusone callback="displayContent" href="http://apuntes.skamasle.com/"></g:plusone>

Bueno, por hoy he escrito suficiente.
Como conclusión doy por conocidos los métodos callback y href.

También decir que si no hay un href este apuntará a la dirección que tengamos en el navegador y ese es el principal fallo de muchos a la hora de implementar el botón en un theme de wordpress u otro cms.

Por eso he creado una entrada sobre Como poner el botón de google mas uno en WordPress


Así nos han encontrado!

  • google mas
  • google mas uno
  • google mas1

5 Responses to Como poner el boton de google mas 1

  1. skamasle dice:

    Pues a mi me gusta como queda a ese lado.. yo lo meti a la izquierda……. creo que lo cambiaré :D

  2. leotec dice:

    yo te he encontrado con esto: “URL para +1″ google

    jejejej saludos

  3. David dice:

    Hola.

    Yo tengo un problemilla con este botón, lo meto en una botonera y me añade un espacio en blanco a la derecha bastante molesto.

    Alguna idea??

    Gracias
    Salu2

  4. nax dice:

    hola David.

    Puedes darme el link a la página que te da el fallo?

    puede ser que se deba a algún otro estilo y no al botón en si.

  5. Xavi dice:

    Hola Ignacio,

    gracias por este interesante artículo, quería hacerte una consulta, como puedo hacer para que mis +1 de google plus sumen en mi blog, suelen sumar pero hay algun caso en el que no aparecen todos los +1 que me han dado… te dejo el enlace por si se te ocurre algo….

    http://ganardineroporinternetweb.com/marketing-de-afiliados/

    Muchísimas gracias,

    Xavi Alonso Solé

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">