Social Locker en Blogger. Pago social por ver contenidos

Un Social Locker o Bloqueador Social es un sistema que permite ocultar cierto contenido en una web, de manera que sólo se podrá ver si previamente se realiza alguna acción en redes sociales, por ejemplo hacer un Like para Facebook, tuitear una URL o hacerse seguidor en alguna red social.

Personalmente es algo que no me gusta y por eso aunque lo conozco desde hace tiempo me he demorado en publicarlo, pero ya me lo han solicitado lo suficiente como para darme cuenta de que hay bastantes personas a las que le interesa y también entiendo que en algunos casos concretos puede ser especialmente útil. Como mencioné en el título, viene a ser como un pago en especie a cambio del trabajo realizado y puesto a disposición pública.

Quiero dejar claro antes de explicar cómo añadir esta utilidad a tu blog, que si bien lo he montado de manera que añadirlo a vuestros blogs os resulte lo más fácil posible, no voy a poder ofrecer apenas ayuda adicional más allá de lo que detallaré en este post. El motivo es que todo se basa en un script jQuery desarrollado por cuenta ajena (OnePress) y que este es algo complicado para mis escasos conocimientos de JavaScript. No obstante, si entendéis inglés esta misma gente tiene esta sección de soporte y este manual en pdf de la versión 1.3.1.

Y bien ¿qué es lo que hay que hacer para activarlo? Pues sólo un sencillo cambio en la plantilla y luego ya marcar adecuadamente lo que se quiere ocultar.

1 El siguiente código incluye la librería jQuery, una hoja de estilo, una función JavaScript y unos parámetros de configuración.

Todo eso junto tal cual lo veis aquí, lo tenéis que insertar entre ]]></b:skin> y </head>. Esto sólo hay que hacerlo una única vez.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/acholoblogger/ficheros/sociallockerspa16.js' type='text/javascript'/>
<link href='https://sites.google.com/site/acholoblogger/ficheros/sociallocker.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function ($) {
$('.to-lock').sociallocker({
//Eliminar los botones que no se necesiten e incluir las direcciones en redes sociales
buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {},
facebook: {},
google: {},
text: {
header: "Síguenos para desbloquear este contenido",
message: "Puedes hacerlo indistintamente en Twitter, Facebook o Google plus.",
facebook_like: "Me gusta",
facebook_share: "Compartir",
twitter_tweet: "Haz tweet",
twitter_follow: "Seguir",
google_plus: "+1",
google_share: "Compartir"
},
locker: {close: false, timer: 0,},
theme: "secrets"
});
});
//]]> </script>

2 Una vez guardado lo anterior, cada vez que queráis ocultar algún contenido y que la caja de botones sociales se quede solapada sobre dicho contenido, sólo tendréis que encerrarlo dentro de un div con clase to-lock. Así:

<div class="to-lock">
CONTENIDO OCULTO POR LOS BOTONES
</div>

Notas diversas

jQuery

Si ya tienes jQuery en tu plantilla, la primera línea no hay que incluirla porque es la que carga esa librería y lo único que conseguiríamos sería duplicarla y quizás crear algún conflicto de versiones.

Alojamiento del fichero JavaScript

El fichero sociallockerspa16.js debéis descargarlo y subirlo a un alojamiento bajo vuestro control. Luego tendréis que sustituir la dirección que puse por la vuestra.

Podéis hacerlo como yo, en Google Sites, o bien usar cualquier otro servicio que admita JavaScript, como por ejemplo yourjavascript.com. Si no hacéis esto un buen día os dejará de funcionar y eso será cuando mi alojamiento supere el número de peticiones que Google admite, es decir, cuando se canse de que mucha gente tire del mismo fichero.

Lo que os recomiendo es que probéis con el código que puse tal cual, comprobéis que todo funciona y a continuación para que no se os olvide, cambiéis las direcciones.

Alojamiendo de la hoja de estilo

Con respecto a la hoja de estilo sociallocker.css, la recomendación es exactamente la misma que antes, descargarla y alojar el fichero en un hosting propio para después sustituir la dirección que yo puse por la vuestra.

Este segundo fichero sólo contiene CSS así que lo que podéis hacer también es copiar su contenido y directamente incluirlo en vuestra plantilla. Será un poco largo pero es mejor opción incluso que la anterior.

Qué botones mostrar

Se indican en el parámetro buttons: order [...], añadiendo dentro, entre comillas y separados por comas, unas palabras clave que cargarán unos u otros. En el ejemplo puse tres. En este mismo orden el de "Like", tuitear y +1.

Esta sería la lista completa de los disponibles:

• facebook-like: Like de Facebook
• facebook-share: Compartir de Facebook
• twitter-tweet: Tuitear el artículo
• twitter-follow: Seguir cuenta de Twitter
• google-plus: Hacer +1 EN G+
• google-share: Compartir en G+
• linkedin-share: Compartir en Linkedin

Para algún caso de Facebook será necesario tener una APP para incluir su ID. Los de Google Plus he leído en la documentación que están todavía en plan beta (no funcionan bien siempre en todos los casos). El de seguir una cuenta de Twitter requiere parámetros extra que veremos después y el tamaño del botón es casi el doble en cuanto a ancho que los otros.

Textos mensajes y botones

En el parámetro text tenéis todos los mensajes que muestra el artilugio así como las leyendas de los distintos botones. Para modificar esos textos simplemente hay que cambiar lo que veis entrecomillado.

Posibilidad de ver contenido sin acción

Si queréis rebajar el nivel de invasión del sistema, se pueden habilitar unas opciones que permiten cerrar el cuadro de los botones sin realizar ninguna acción social. Están dentro de locker

• close: si se cambia a true se habilita una equis sobre la caja de botones para poder cerrarla y revelar el contenido oculto sin necesidad de activar ningún botón
• timer: si se indica un valor positivo mayor que cero la caja de botones se cerrará sola tras un tiempo equivalente a la cifra que pongáis (en milisegundos)

Cuatro estilos distintos

Desde el parámetro theme se pueden activar hasta cuatro estilos distintos para la caja de botones. En el ejemplo usé el llamado secrets que es el que se ve en la imagen del principio y en la demo que adjunté a a esta entrada, pero además tenéis los tres siguientes. Su nombre bajo cada uno de ellos.

starter

dandyish

glass

Qué URL se compartirá

Esa parte se controla con los valores que aparecen en el código debajo de buttons y la he dejado con los valores en blanco porque de esa manera lo que se compartirá será la dirección que en ese momento figure en el navegador.

No hay ningún problema en dejarlo así para los botones de compartir contenido, pero por ejemplo, el de seguir en Twitter (twitter-follow) requiere que indiquéis vuestra cuenta en esa red social.

Para ello tenéis que escribirla dentro de las llaves de esta manera:

twitter: {url:"https://www.twitter.com/USUARIO_TWITTER"},

Igualmente si queréis que lo que se comparta sea una página concreta, tanto para Twitter como para Facebook o Google+, tendréis que indicar la dirección de esa página expresamente.

Y para terminar, una demostración:

Aquí podemos poner texto, imagen, audio, vídeo, un enlace para una descarga... En fin, cualquier cosa que se pueda escribir con HTML.

Usadlo con cabeza ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter