Construir spoilers con el botón de Google+ y Javascript

En CodeCanyon encontré un artículo muy interesante que consta en construir spoilers con CSS3 y jQuery mediante el Callback del botón de Google+. Este artículo es un tutorial de pago, así que decidí hacer una alternativa algo similar, pero sin jQuery y con Javascript nativo.

Nota: Para comprobar en el demo si la cookie existe, primero debes actualizar la página, la cookie se almacenará en la entrada y no en todo el blog para prevenir que se desbloqueen todos los posts al mismo tiempo.

Paso 1: Crear la función para el Callback y definir todas las variables:

Lo primero que debemos hacer es una función, que ésta lleve como parámetro el mismo que el del callback, además debemos empezar con todas las variables que se emplearán y también con las instrucciones que se ejecutarán al hacer +1.

<script type="text/javascript">
// Empezamos con las variables
 var url = document.URL; // Establecemos la URL actual
 var ruta = "http://tu-blog.blogspot.com".length; // Obtenemos la longitud de nuestro dominio
 var mensaje_spoiler = document.getElementById("contenido-oculto"); // Creamos una variable a partir del spoiler
 var boton_spoiler = document.getElementById("boton-plusone"); // Creamos una variable a partir del botón de Google+
 var cookieplus = document.cookie.substring(document.cookie.indexOf("plusoneguardado" + '=') + "plusoneguardado".length + 1,document.cookie.length); // Esta variable nos permite crear un índice por si existen otras cookies almacenadas en la página, con esta la seleccionamos de manera individual
  if(cookieplus.indexOf(';') != -1)cookieplus = cookieplus.substring(0,cookieplus.indexOf(';'))


function spoiler(plusone) { // Empezamos la función con el Callback
  if(plusone.state == "on") { // Si el estado del callback es on...
   mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto
   boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1
   document.cookie ='plusoneguardado=confirmado; path=' + url.substring(ruta,999); // Escribimos la cookie denominada plusoneguardado=confirmado y se le asigna un path, se calcula mediante substring y la longitud de la variable ruta
  }
 
};
</script>

Paso 2: Detectar la cookie cuando la página se cargue:

Dentro de la misma etiqueta <script> iniciaremos otra nueva función, ésta se denominará leercookie y designará una serie de instrucciones si la condición se cumple:

<script type="text/javascript">
// Empezamos con las variables
 var url = document.URL; // Establecemos la URL actual
 var ruta = "http://tu-blog.blogspot.com".length; // Obtenemos la longitud de nuestro dominio
 var mensaje_spoiler = document.getElementById("contenido-oculto"); // Creamos una variable a partir del spoiler
 var boton_spoiler = document.getElementById("boton-plusone"); // Creamos una variable a partir del botón de Google+
 var cookieplus = document.cookie.substring(document.cookie.indexOf("plusoneguardado" + '=') + "plusoneguardado".length + 1,document.cookie.length); // Esta variable nos permite crear un índice por si existen otras cookies almacenadas en la página, con esta la seleccionamos de manera individual
  if(cookieplus.indexOf(';') != -1)cookieplus = cookieplus.substring(0,cookieplus.indexOf(';'))


function spoiler(plusone) { // Empezamos la función con el Callback
 if(plusone.state == "on") { // Si el estado del callback es on...
 mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto
 boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1
 document.cookie ='plusoneguardado=confirmado; path=' + url.substring(ruta,999); // Escribimos la cookie denominada plusoneguardado=confirmado y se le asigna un path, se calcula mediante substring y la longitud de la variable ruta
 }
 
};
</script>


// Función creada para comprobar si la cookie existe
window.onload = function leercookie() { // Cargamos la función al cargar la página
 if (cookieplus == "confirmado") { // Si la cookie contiene el valor "confirmado"...
 mensaje_spoiler.className = "g-activo"; // Asignamos una clase .g-activo al contenido oculto
 boton_spoiler.className ="g-oculto"; // Asignamos una clase .g-oculto al botón +1
   }
   
};

No olvides reemplazar "http://tu-blog.blogspot.com" por la URL de tu blog (Sin / al final).

Nota: Este código debe ir antes de:

</body>

Paso 3: Añadir CSS a los elementos:

Para que todos estos elementos interactúen correctamente, lo que debemos hacer es crear las reglas CSS con las que condicionaremos los comportamientos. Lograremos entonces que la clase .g-activo sea del tipo visible, y .g-oculto una clase invisible, y junto con ello aplicaremos estilos a todos los elementos:

#plus-one { /*Atributos del contenedor del spoiler*/
 font-family: 'Open Sans', sans-serif; /**/
 background:#F9F9F9; /*Color de fondo en formato hexadecimal*/
 border:5px solid white; /*Tamaño, tipo y color del borde*/
 box-shadow:0 0 5px rgba(0,0,0,0.1), inset 0 0 5px rgba(0,0,0,0.3); /*Sombras con CSS3*/
 color:#888; /*Color de la fuente*/
 padding:12px 20px; /*Espaciado del contenedor*/
 border-radius:10px; /*Bordes redondeados*/
 width:85%; /*Ancho del spoiler*/
 font-weight:300; /*Ancho de la tipografía, necesita que ésta la soporte*/
 margin:10px auto; /*10px de márgen superior e inferior, y automático para centrar*/
}

#plus-one a { /*Atributos de los enlaces dentro del contenedor*/
 text-decoration:none; /*Sin subrayado o algún otro tipo de decoración*/
 color:#444;/*Color del enlace*/
}

#boton-plusone { /*Atributos del botón y del mensaje*/
 font-style:italic; /*Cursiva*/
}

.g-oculto {
 display:none; /* g-oculto es una clase invisible*/
}

.g-activo {
 display:block; /*g-activo es una clase visible*/
}

Nota: Este código debe ir antes de:

]]></b:skin>

Y para la fuente, pega el siguiente código antes de </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic' rel='stylesheet' type='text/css' />

Paso 4: Insertar el spoiler en alguna entrada:

Una vez que ya tengas todo instalado y configurado correctamente en tu plantilla, deberás pegar el siguiente código en la edición HTML de la entrada en la cual insertarás el spoiler:

<div id="plus-one">
<div id="boton-plusone">Contenido Bloqueado. Para desbloquear el contenido oculto presiona en el siguiente botón.
<br />
<g:plusone callback="spoiler"></g:plusone>
</div>

<div id="contenido-oculto" class="g-oculto">
Inserta acá el código que se mostrará cuando el botón haya sido presionado.
</div>
</div>

Importante: Para que el spoiler almacene la ruta correctamente, el spoiler debe ir oculto mediante el salto de línea en la página principal, o de lo contrario almacenará la cookie en dicha URL.