Social Locker en Blogger. Pago social por ver contenidos | Oloblogger 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 pre...

27 de julio de 2015

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.

Bloqueo por contenido para Blogger


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
Copy URL

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

follow us in feedly

50 comentarios :

  1. Busco algo asi pero en lugar de like o tweet, que sea ingresar alguna contraseña!!! se podrá!?!?!

    ResponderEliminar
    Respuestas
    1. Seguro que sí Juan M., pero yo no sabría cómo hacerlo :(

      Eliminar
  2. A mí tampoco me gusta, pero ahora sé cómo lo ponen en algunos blogs :)

    ResponderEliminar
  3. Por cierto, nos podrías hacer un post de cómo modificar ese horrible banner que Google nos ha colocado en la cabecera de los blogs?
    Cambiarlo de sitio, o poderlo poner junto al que ya tenía de cookies de terceros. Es que nos lo han puesto justo en el cabezal y queda feísimo!
    Te estaría muy agradecida porque por más que le doy vueltas a la plantilla no logro encontrar cómo quitarlo de ahí :)

    ResponderEliminar
    Respuestas
    1. Para ocultar el aviso de cookies de Blogger poner esto en la plantilla:

      #cookieChoiceInfo {display:none !important;}

      Eliminar
    2. Contestados ambos en el post de ayer ;)

      Eliminar
  4. Respuestas
    1. Erick, supongo que viste que aquí si funcionaba. Pues el código que usé es exactamente el mismo que expliqué, así que no te sabría decir otra cosa.

      Eliminar
    2. Logre que me funcionara. Hay alguna manera de que el social locker aparezca siempre? Porque una vez que le dan compartir ya no les vuelve a aparecer ni en el post actual ni en alguno otro del blog.

      Eliminar
    3. Te pasan cosas muy raras :)
      Si usas los de compartir post (los del ejemplo) y no pones parámetros en las URL (tal y como pongo en el ejemplo), no debería ocurrirte eso. En este blog al menos a mí si me funciona así.

      Eliminar
  5. Hice que funcionara pero usando otro tutorial. Pero me ocurriía eso que te mencioné. Decidí hacer una prueba en otro blog y me funciona perfectamente: http://bit.ly/1OPwvJp
    Pero en el que me interesa es en este y no me funciona para nada: http://bit.ly/1JwxYEc

    ResponderEliminar
    Respuestas
    1. Pues no te sabría decir Erick. Esa plantilla tiene varios scripts comprimidos cuyo código es imposible de analizar y cualquiera de ellos puede estar interfiriendo.

      Eliminar
  6. Pues yo puedo ver el contenido "oculto" sin necesidad de hacer nada... supongo que falla.

    ResponderEliminar
    Respuestas
    1. No Leslie. Lo comprobé bastante antes de publicarlo. Posiblemente es porque tú ya hiciste alguna acción social en mi blog y por eso no te sale.

      Eliminar
  7. Oloman Oloman primero que nada muchas gracias, es una gran herramienta, me pasa lo mismo que ( Erick Navarro ) Hay alguna manera de que el social locker aparezca siempre? Porque una vez que le dan compartir ya no les vuelve a aparecer ni en el post actual ni en alguno otro del blog.??? y no me responde la opcion ( Timer ) colocando 4k milisegundos.. resulatdo.. http://goo.gl/B7eZpc

    ResponderEliminar
  8. No lo veo en esa página Moderador, pero de todas formas esto no es un castigo. Si cada vez que entro a una página me obligan a hacer un Like, probablemente no vuelva. No me parece buena idea, pero es que tampoco le veo solución.

    ResponderEliminar
  9. Hola Norlan.

    Posiblemente es porque en alguna ocasión ya has pinchado en alguno de esos botones, pues yo lo sigo viendo bien.

    ResponderEliminar
  10. en que parte del codigo pego APP: ID para compartir en Facebook????

    ResponderEliminar
    Respuestas
    1. En los enlaces que figuran al principio sobre el soporte del gadget y entre los que encontrarás también un PDF, se detalla ese aspecto. Creo recordar que es dentro de un tipo concreto de botón para Facebook, en sustitución de la URL de la fan-page.

      Eliminar
    2. no entiendo mucho de javascript me podrias ayudar o pasarme un tutorial para poner la APP: ID para compartir en Facebook

      Eliminar
    3. No l_c_a_o. Sólo una vez saqué una APP de Facebook para una cosa especial que hice y de verdad que no recuerdo como lo hice. Ya dije al principio del post que sobre esto no os podría ayudar mucho.

      Eliminar
    4. APP de Facebook ya la tengo solo quiero saber en que parte exacta del codigo la tengo que poner

      Eliminar
    5. Es que no lo sé l_c_a_o. Ya dije al principio del post que en este caso no podría ayudar mucho con el gadget y que todo lo que sabía quedaría escrito en el mismo.

      Prueba con esto, pero insisto en que no lo sé:

      facebook: {
      appId: "427542137301809"
      },

      Eliminar
  11. Pues todo funciona...!
    jQuery... hoja de estilo... JavaScript.
    Grande...!
    ;-)

    ResponderEliminar
  12. Es posible poner una opción para que te sigan el google+ ?

    ResponderEliminar
    Respuestas
    1. Es posible que sí, pero te tengo que remitir al tercer párrafo de esta entrada :)

      Eliminar
  13. Personalmente no me gusta locker, lo que hace es los visitantes no vuelvan

    ResponderEliminar
  14. Al querer guardar me dice esto: Error parsing XML, line 951, column 9: The element type "b:skin" must be terminated by the matching end-tag "".
    Pero el ]]> esta justo abajo del cierre /script>
    algun tip?

    ResponderEliminar
  15. no me deja publicar que me sale el error de que falta el CIERRE de b:skin pero si esta justo abajo de /script (diagonal script)

    ResponderEliminar
    Respuestas
    1. No tengo tip para tu caso porque tampoco entiendo muy bien lo que te ocurre. Sólo puedo inferir que no estás colocando el código dónde se debe porque te aseguro que está comprobado y además nadie más indicó que tuviera problema alguno.

      Eliminar
  16. Funciona perfectamente, gracias por este gran tutorial Oloman ;)

    ResponderEliminar
  17. Gracias por el aporte.Aprovecho para preguntar...Algún scrip que haga autolike de forma invisible en facebook?He visto algo para wordpress y quería saber si hay algo para blogger.

    ResponderEliminar
    Respuestas
    1. Jajaja... ¿Autolike invisible? Pues no, no sabría cómo hacer eso, pero es que además me parece como poco ético ;)

      Eliminar
  18. Las imágenes no funcionan, y antes de twittear ya carga el contenido oculto

    ResponderEliminar
    Respuestas
    1. Al margen de que ya advertí que sobre este script no podría dar apenas soporte, es normal que se vea el contenido oculto si sobre ese post ya se ha ejecutado una acción social.

      Eliminar
  19. Buenos días Oloman, te sigo desde hace mucho tiempo y he usado tus trucos en mi blog y ahora estoy creando una nueva página y quería usar este social blocker pero sólo me funciona en Firefox. El que tú tienes puesto en este post tampoco funciona ni en Opera ni en Chrome. ¿Es así? ¿Alguna razón? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jose. Te tengo que remitir a mi anterior comentario en lo referente al soporte.

      De todas formas, cuando lo publiqué funcionaba en los tres principales navegadores y a veces lo que pasa simplemente es que haciendo pruebas vamos abriendo el bloqueo.

      Eliminar
  20. porque cuando le doy en compartir en una entrada por ejemplo, queda desbloqueado en todas?

    ResponderEliminar
    Respuestas
    1. Hola Ichank. Te remito al tercer párrafo del post ;)
      Lo siento.

      Eliminar
  21. Yo encantado con tu Blog ( Oloman ) siempre se encuentran cosas importantes, yo no entiendo nada de este leguaje de blogger, pero entro en tus post. siempre dan gana de regresar y leer... gracias por el espacio.

    Social Locker es un tips realmente genial, yo suelo compartir modelos 3d, en la cual me preguntaba si hay posibilidad, que siempre este activo. osea me refiero cada vez quien desea descargar un archivo siempre hay que darle Like bueno son diferentes persona y que no quede desbloqueado en todas las entradas en donde coloca el ( lock )

    Por otro lado, me encontré con una necesidad de ponerle Contraseñas algunas entregar o una pagina estetica de blogger pero esta viendo que no es posible ( ya que CTR + U ) encuentras la información de mismo..
    me encontré este tutorial. en realidad no se se funciona. https://emiliocobos.net/poner-contrasena-blogger/
    saludos, excelente trabajo que haces...

    ResponderEliminar
    Respuestas
    1. Hola Moderador.

      Lo de este script he repetido varias veces que no lo controlo, pero en principio sólo debería bloquearte la URL desde la que se hizo la acción social y no todas las otras.

      Sobre lo de la contraseña de Emilio debe funcionar, pero es necesario tener un hosting dónde puedas alojar PHP, ya que Blogger no facilita ese servicio.

      Eliminar
  22. Hola amigo, hace unos días empece a usar el social locker, pero pasando unos días el botón de ME GUSTA, dejo de funcionar, he resubido el js y css a mi propio hosting pero aun asi, no me funciona, sabrás de alguna solución, Saludos y muchas gracias por tu blog, es muy interesante.

    ResponderEliminar
    Respuestas
    1. Jaja qué haces por acá Mi Maleta Musical?

      Eliminar
    2. Creo o me supongo que lo mismo que tu jajaja buscando una solución y tratando de conquistar al mundo como Pinky y Cerebro ;)

      Eliminar
    3. Hola Mi Maleta Musical
      Con frecuencia, los grandes servicios y redes sociales cambian sus API y es posible (no lo he comprobado) que sea el caso del botón Me Gusta de FB. Si los demás funcionan entonces es eso. Y si es así, no conozco otro sistema distinto de este. Lo siento.

      Eliminar
  23. Gracias por compartir éste tema interesante. A mi tampoco me gusta que las páginas tengan ese sistema pero teniendo una página de películas y ver que descargan películas y no tengo ni un MG en Facebook, y en otra página de música que tengo en Facebook ya con más de un año tengo apenas 49 MG es totalmente defraudante ya que cuesta mucho publicar cosas, mucho más en dos blogs a la vez y ni hablar siendo una persona sola, y ver que no te dan MG ni nada es bastante defraudante, y por eso estaba pensando en utilizar éste medida. Vos qué decís?

    ResponderEliminar
    Respuestas
    1. Que si publiqué este código fue porque pensé que en algún caso podría estar justificado su uso. Pero cada cual es quién decide por sí mismo ;)

      Eliminar
  24. Alguna solucion para el like de facebook que repentinamente desapareció?

    ResponderEliminar
    Respuestas
    1. Pues sólo se me ocurre que lo reinstales de nuevo. En esta página de Facebook te explican el código que necesitas añadir:
      https://developers.facebook.com/docs/plugins/like-button?locale=es_ES

      Eliminar
  25. Hola, ya hice todo, copié el java y el css y agregué el div para ocultar una parte de una entrada. Efectivamente no muestra el contenido en el DIV
    Pero tampoco muestra el social locker,
    Estoy haciendo esto en Blogger,

    ResponderEliminar