Crear un contenido bloqueado el cual solo sera disponible cuando el usuario de un me gusta, o un Tweet, es genial ya que con esto ganamos fans para nuestras redes sociales y hacemos que nuestro blog tenga una sección «premium» por decirlo de cierta forma.
Contenido Social Bloqueado en Blogger


Para agregar este truco a tu blog, primero ve a Plantilla y antes de </head> pega lo siguiente:

<link href='http://mybloggerlab.com/StyleSheet/locker.css' rel='stylesheet' type='text/css'/>

Ahora en la edición HTML de una entrada pega lo siguiente:

<article id="default-usage">
<div class="to-lock" style="display: none;">

<!--Hidden Content Starts (You can Use HTML BELOW)-->

<div style="text-align: center; margin-bottom: 20px;">
<img src="http://www.totalcar.rs/wp-content/uploads/2010/10/ferrarilogo.jpg" alt="" style="margin: auto;" />
</div>

<div style="text-align: justify">
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://www.wilvalencia.com/img/visto_bueno_logo.jpg" /></a></div>

<b>Gracias por compartir, ahora puedes disfrutar del contenido que estaba oculto 
</b></div>

<!--Hidden Content Ends (You can Use HTML ABOVE)-->

</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/lock.js"></script>

<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({

text: {
header: "Comparte y Descubre lo que esta oculto",
message: "Aquí se encuentra el contenido oculto, solo comparte y lo descubriras."
},

style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},

// twitter options
twitter: {
url: "URL DE TU TWITTER",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "URL DE TU FACEBOOK",
appId: "418044881593120"
},

google: {
url: "URL DE TU GOOGLE+"
}
});
});;;;

</script>

Reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso.

Lo que esta resaltado en color verde son los parámetros que puedes personalizar, entre ellos se encuentra el contenido que se va a ocultar.

Luego de que el usuario comparta se vera lo siguiente:

Puedes ver el truco funcionando en el siguiente blog de pruebas.

El código pertenece a My Blogger Lab, yo por mi parte he traducido el script al español y he agregado un par de cosas mas, dando como resultado un código mas optimizado.

Espero que les haya sido de mucha utilidad este truco, y si ya usaste este truco, coméntanos que tal te ha parecido.


35 commentarios

Pancho Gámez · julio 18, 2013 a las 11:27 pm

NO APARECE NADA SOLAMENTE LA DIRECCION DEL QUE CREO EL GADGET…. es posible que sea problema de navegador ,,, he utilizado dos navegadores distintos y nada

    Hayder Juvinao · julio 26, 2013 a las 9:41 pm

    Pancho ya fue actualizado el código, por lo que ya te debe funcionar.

    Saludos

Josu Nuñez Albeniz · julio 19, 2013 a las 2:16 pm

no me funciona… seguro que jquery entra en conflicto, ya he probado de todo y no me funciona… no se que hacer por que la verdad es que me vendría perfecto

    Hayder Juvinao · julio 26, 2013 a las 9:42 pm

    Josu ya fue actualizado el código, por lo que ya te debe funcionar.

    Saludos

Hayder Juvinao · julio 19, 2013 a las 8:57 pm

Ya he actualizado el código, por lo cual ya debe funcionar perfectamente el truco, por favor pruebenlo y avisenme.

Saludos

    Pancho Gámez · julio 20, 2013 a las 4:04 am

    ya lo probé y ya me funciono, creo que era porque tenia mis navegadores desactualizados. (modifique el script para quitarle el «POWERED BY MYBLOGGERLAB.COM» solo para probar como luciria)

    Anonymous · julio 20, 2013 a las 8:12 pm

    ¿Y cómo yo podría eliminar el ¨POWERED BY MYBLOGGERLAB.COM¨? ¡Help me!

    PD. Es que no se ve bien estéticamente. Lo hubieran podido poner más pequeñito. 🙁

    Hayder Juvinao · julio 26, 2013 a las 9:43 pm

    Yo puedo editar el script y eliminar los créditos, pero no seria nada ético de mi parte, así que el lo quiera modificado lo pasare solo por correo.

    Anonymous · julio 26, 2013 a las 9:57 pm

    ¡Hola! Te envíe un email para el script modificado. Te estaría muy agradecido si me lo pasas. ¡Gracias!

Anonymous · julio 20, 2013 a las 9:12 pm

Me ha encantado pero tengo una pregunta se podria hacer solo para la red social Facebook ya que solo tengo facebook

    Hayder Juvinao · julio 26, 2013 a las 9:45 pm

    Pues si se puede, pero vamos amigo todo mundo tiene esas redes sociales

Dios Con Su Pueblo · julio 21, 2013 a las 12:10 am

me agradaria si lo iceras en un video y lo suvieras a youtube.. 🙂 podrias acerlo porfavor

Antonio Serra Junior · julio 22, 2013 a las 7:38 pm

Eres un fenómeno!

Redimidos · julio 26, 2013 a las 7:50 pm

me redirige a la pagina de mo blogger lab. que hago para que no haga eso

Redimidos · julio 27, 2013 a las 5:02 pm

que crees que sea? o por que me redirige a su web?. sera la plantilla ? o que puede ser

Redimidos · julio 28, 2013 a las 7:23 pm

si claro, mi web es http://jpgcristianas.net

Andres Aguilar · agosto 16, 2013 a las 1:32 pm

una pregunta… el codigo lo tengo q añadir primero? es q uso salto de linea en mis posts y no se si me funcione con ello… a mas de usar la primera imagen como portada???

Benjamín Rdz · agosto 21, 2013 a las 8:06 pm

Hola!!, Todo bien pero no aparece el botón de facebook para darle like x.x aparece pero al momento de pasar el mouse no sale like ni nada, podrías ayudarme con eso? podrías también pasarme el script sin los creditos porfavor?

Anonymous · septiembre 9, 2013 a las 3:38 am

¡Hola! Te envíe un email para el script modificado. Te estaría muy agradecido si me lo pasas. ¡Gracias! —Mi Correo Tabu_1996@hotmail.com

    Hayder Juvinao · septiembre 11, 2013 a las 4:32 pm

    He tenido un par de ocupaciones, y por eso no he terminado de modificar el script.

    Ademas creo que lo dejare así, porque si lo hago estaría violando derechos de autor.

Anonymous · diciembre 4, 2013 a las 9:18 am

el app id no sirve ese por default..y nose como hacer una app id en facebook, me enseñarias o me ayudarias?si tienes un link donde se explike como hacerlo seria fabuloso

    Hayder Juvinao · diciembre 7, 2013 a las 9:57 pm

    Amigo en el momento no tengo ese tutorial, pero pronto lo publicare (o)

    Saludos

{[D4rkFl4m3M4ster]} · enero 2, 2014 a las 2:18 am

No hay alguna así pero para los comentarios, osea que cuando comente con blogger o facebook se desbloqueé el contenido 😕 espero respuesta 🙂

    Hayder Juvinao · enero 4, 2014 a las 4:21 pm

    Pues hasta ahora no he visto ese truco pero de seguro que si lo hay.

    Saludos

Fernando Perez · febrero 7, 2014 a las 4:04 pm

Hola buenas tardes, quisiera que me ayudes en una consulta, resulta que en facebook se publican miles de videos diarios, que si hago clic para ver me llevan a las web o blogs del autor pero estan bloqueados hasta que haga clic en compartir y ahi ese video se vuelve viral, es decir para poder ver el video tengo que obligatoriamente compartir en facebook, me gustaria probar ese recurso, tienes idea de como se hace Gracias y sigue adelante, tu blog ya es una referencia para quienes estamos aprendiendo alissfer1@gmail.com

    Hayder Juvinao · febrero 9, 2014 a las 10:31 pm

    Fernando con este truco puedes bloquear los vídeos, solo reemplaza el código de la imagen que he puesto por el de un vídeo.

    Saludos

    Ronald xaiborweb · marzo 11, 2014 a las 4:10 pm

    hola @Hayder Juvinao primero que todo muchas gracias por ese tutorial realmente tienes un blog muy bueno y con mucho futuro y me preguntaba si existe la posibilidad de agregarle un temporizador al script de tal manera que si no se comparte se tenga que esperar un tiempo y solo se desbloquee asi como el ultimo ejemplo de esta demo
    http://demo.byonepress.com/social-locker-for-jquery/

    saludos y gracias brother 🙂

Ronald xaiborweb · marzo 11, 2014 a las 4:04 pm

hola amigo gracias por el tuto la verdad esta muy bueno pero que posibilidad hay de agregarle un temporizador de manera que si no comparten tengan que esperar un tiempo y solo se desbloquee como lo podemos ver en la ultima demo de http://demo.byonepress.com/social-locker-for-jquery/ la que dice

Helper Tools
The plugin provides a pair of helper tools: the Unlocking Timer and the Close Icon. You can use these optional features together or apart.

Andres Felipe · mayo 13, 2014 a las 3:24 am

Muy bueno seguro sera muy util

Andres Felipe · mayo 18, 2014 a las 8:13 pm

Ya no sirve amigo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *