Botón Google+1 (PlusOne) en una barra flotante



Sé que ya muchos están usando el botón Google+1 en el blog para que los usuarios puedan recomendar las entradas que les parecen interesantes. Pero también podemos colocar el botón +1 (Plus One) para que se recomiende no la entrada sino la página principal del blog.
Y para ya no poner nada en las entradas (por si ya tienes ahí el botón) vamos a colocar el botón Google +1 en una barra flotante abajo de la página, de esta forma tus lectores podrán recomendar tu blog.

Puedes ver el ejemplo en esta misma entrada, al final aparece una barra. En ella se muestra un texto que invita a los lectores a recomendar el blog, luego, tal como hicimos para poner un mensaje al hacer click en el botón +1 haremos que el primer mensaje desaparezca al hacer click y que en su lugar se muestre un mensaje de agradecimiento, y al hacer click nuevamente para deshacer el voto se mostrará un mensaje diferente.

Como sé que a muchos les puede parecer molesto tener siempre la barra visible, he incluido una cookie (a duras penas lo hice) para que el lector sólo lo vea una vez por semana, aunque por supuesto este tiempo lo puedes configurar a tu gusto.

Empecemos. Primero entra en Diseño | Edición de HTML y pega antes de </head> esto:

<script type='text/javascript'>
//<![CDATA[
// Cookies
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}


function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}


function eraseCookie(name) {
createCookie(name,"",-1);
}
//]]>
</script>
Ahora pega antes de ]]></b:skin> estos estilos:
/* Barra Plus One
----------------------------------------------- */
#barraPlus1 {
position:fixed;
bottom:0px;
left:0;
height:24px;
background:#000; /* Color de la barra */
width:100%;
padding:5px;
filter:alpha(opacity=70); /* Transparencia de la barra */
-moz-opacity:0.7; /* Transparencia de la barra */
-khtml-opacity: 0.7; /* Transparencia de la barra */
opacity: 0.7; /* Transparencia de la barra */
z-index:900;
}
#mensajePlus1, #textoPlus1 {
color:#D8D8D8; /* Color del texto */
font-family:Verdana; /* Tipo de fuente */
font-size:16px; /* Tamaño del texto */
vertical-align: middle;
display:table-cell;
}
.botonPlus1 {
display:table-cell;
padding-left:20px;
}
.cerrarTextoPlus1 {display:none !important;}
A continuación busca la etiqueta <body> o esta línea:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Debajo de cualquiera de ellas dos agrega este código:
<script type='text/javascript'>
//<![CDATA[
// barra Google +1 (comunidadbloggers.com)
function saludoPlus1(plusone) {
var div_ty = document.getElementById("mensajePlus1");
if (plusone.state == "on") {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "¡Gracias por recomendarnos! Tu voto es importante para nosotros.";
} else {
document.getElementById('textoPlus1').className='cerrarTextoPlus1';
div_ty.innerHTML = "Parece que ya no te gustamos, ojalá nos des otra oportunidad.";
}
}
//]]>
</script>

<div align='center' id='barraPlus1'>
<span id='textoPlus1'>&#191;Te ha gustado el blog? Qué tal si nos regalas un +1</span>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<div id='mensajePlus1'/><span class='botonPlus1'><g:plusone callback='saludoPlus1' href='http://nombre-de-mi-blog.blogspot.com'/></span>
</div>

<script type='text/javascript'>
//<![CDATA[
var divName = document.getElementById("barraPlus1");
if(!readCookie('cookiePlus1')) {
divName.style.display='block';
createCookie('cookiePlus1', 'cookiePlus1', 7); // Número de días que dejará de verse
}
else {
divName.style.display='none';
}
//]]>
</script>
Ahora vamos a personalizar todo esto. En el segundo código, el de los estilos, está señalado en color verde algunas áreas que se pueden modificar como el color de fondo, tamaño de la letra, etc. Ahí mismo se controla la transparencia que tiene la barra, con un valor más alto se hace menos transparente, con uno más bajo se hace más transparente.

El primer texto en rojo es el mensaje que aparece cuando el lector recomienda el blog, el segundo texto es el mensaje cuando deja de recomendarlo, y el tercero es el mensaje que aparece por defecto cuando carga la página.
Un poco más abajo se señala dónde se debe cambiar la dirección de tu blog.

Por último, en color azul verás el 7, ese es el número de días que dejará de verse la barra estática, transcurrido ese tiempo el lector podrá verla de nuevo, a menos claro que él haya borrado las cookies de su navegador. Ese valor puedes cambiarlo por el que quieras.
Yo en mi ejemplo lo he puesto para que dure unos minutos nada más, así que cuando actualices esta página, dejes un comentario o ingreses a otra entrada dejará de verse, pero después estará ahí de vuelta.

El resultado me parece que puede ser muy óptimo para recomendar el blog con el botón +1 de Google, sobre todo porque podemos seguir usando el botón que recomienda las entradas, y al mismo tiempo usar este que recomendará el blog, no las entradas.

Fuente: Ciudadblogger

Comentarios

  1. Excelente!, Gracias por esta info!.

    ResponderEliminar
  2. gracias a ti por visitar nuestro blog.

    ResponderEliminar
  3. Que interesante blog!!!me encantó la entrada del boton + 1 , ya lo inorpore a mi blog!
    La verdad es que parece que están al servicio nuestro, y es muy destacable!
    Ya los sigo en mi lista de blogs!
    Quiero que se suscriban al mío,necesito su apoyo amigos!ya que ello depende de un puesto de trabajo mío.
    Mi blog se llama Fidelizar al Cliente
    www.fidelizaralcliente.blogspot.com
    Trata de la relación de lealtad con el cliente,que en definitiva influye en los resultados y crecimiento de nuestro negocio.
    Publico de manera totalmente original,y que todo genere un debate,lo empecé en julio.
    Por favor a todos los usuarios y comunidad bloggers, los espero porque sino nos apoyamos entre blogs, quienes sino?
    Estoy a su disposición...
    Muchas Gracias
    Lucia

    ResponderEliminar
  4. hola lucia, me alegro de que te haya servido. si lo deseas puedes empezar a colaborar con nosotros en este blog , y asi publicitar tu blog.

    ResponderEliminar
  5. Que interesante blog!!!!me encantó lo del boton + 1,ya lo aplique a mi blog.
    Ya los sigo en mi lista de blogs.
    Quiero que se suscriban al mío,ya que ello depende de un puesto de trabajo mío,porque sino nos apoyamos entre bloggers quienes sino?
    Mi blog se llama Fidelizar al cliente
    www.fidelizaralcliente.blogspot.com
    Trata de relación de lealtad con el cliente,que en definitiva,influye en los resultados y en el crecimiento de la empresa.
    Publico de manera,fresca,natural, y divertida, a nadie le resulta leer árticulos largos dirigidos a ecomistas calificados.
    Por favor suscríbanse!
    Lucia Bonino

    ResponderEliminar
  6. Muy interesante tu blog, tienes mi apoyo con seguirte, compartir tu contenido y leer tus post, te deseo lo mejor mucho éxito cualquier cosa estámos para servirte en comunidadbloggers... Saludos!

    ResponderEliminar

Publicar un comentario

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Entradas populares de este blog

5 alternativas open source a Loquendo

Que es microsoft silverlight