Boton Google +1 con mensaje al hacer click

Con la llegada del botón +1 (PlusOne) y su prometedor éxito, es seguro que la mayoría ya sabe cómo agregar el botón +1 de Google en el blog. ¿Pero, qué posibilidades tiene el botón para ser configurado?

La verdad es que si partimos del punto que podemos hacer un callback para leer funciones Javascript entonces las posibilidades son muchas.

Una de esas posibilidades es poder mostrar un texto en el botón +1, un mensaje cuando el usuario nos regale un voto y otro mensaje para cuando el usuario quiera deshacer la recomendación.

Puedes ver el ejemplo en este botón, si le das click para recomendar aparecerá un mensaje de agradecimiento, después de eso dale click nuevamente y aparecerá un mensaje distinto.

Ahora vamos a ver cómo ponerlo en el blog. Entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios.
Si lo quieres debajo del título de la entrada entonces busca esta línea:

<div class='post-header'>

O si lo quieres al final de las entradas entonces busca esta línea:

<div class='post-footer'>

En cualquiera de los casos, agrega debajo de una de esas líneas lo siguiente:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// mensaje Google+ (ciudadblogger.com)
function saludoPlusOne(plusone) {
var div_ty = document.getElementById("mensajePlusOne");
if (plusone.state == "on") {
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros."; document.getElementById('mensajePlusOne').className='msgPlusOne';
} else {
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad."; document.getElementById('mensajePlusOne').className='msgPlusOne';
}
}
//]]>
</script>

<div align='right'><g:plusone callback='saludoPlusOne'/>
<div id='mensajePlusOne'/></div>

Ahora antes de ]]></b:skin> pega los estilos:

.msgPlusOne {
background:#0B0B3B;
color:#A4A4A4;
padding:10px;
font-style:italic;
}

Esos son los estilos que tendrá el recuadro donde aparecerá el mensaje, puedes establecer otros o simplemente no ponerlo si es que no quieres que tenga alguna apariencia. Lo que está en color rojo son los mensajes que mostrará, el primero es el mensaje que aparece cuando se hace click para recomendar, y el segundo para cuando ya no le gusta al lector.

Y habiendo hecho eso tendrás el botón +1 de Google que muestra un mensaje al hacer click.