Contenido Social Bloqueado en Blogger

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.

0
Shares

35 thoughts on “Contenido Social Bloqueado en Blogger

  • julio 18, 2013 en 11:27 pm
    Permalink

    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

    Responder
  • julio 19, 2013 en 2:16 pm
    Permalink

    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

    Responder
  • julio 19, 2013 en 8:57 pm
    Permalink

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

    Saludos

    Responder
    • julio 20, 2013 en 4:04 am
      Permalink

      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)

      Responder
    • julio 20, 2013 en 8:12 pm
      Permalink

      ¿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. 🙁

      Responder
    • julio 26, 2013 en 9:43 pm
      Permalink

      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.

      Responder
    • julio 26, 2013 en 9:57 pm
      Permalink

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

      Responder
  • julio 20, 2013 en 9:12 pm
    Permalink

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

    Responder
  • julio 27, 2013 en 5:02 pm
    Permalink

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

    Responder
  • agosto 16, 2013 en 1:32 pm
    Permalink

    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???

    Responder
  • agosto 21, 2013 en 8:06 pm
    Permalink

    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?

    Responder
  • septiembre 9, 2013 en 3:38 am
    Permalink

    ¡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

    Responder
    • septiembre 11, 2013 en 4:32 pm
      Permalink

      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.

      Responder
  • diciembre 4, 2013 en 9:18 am
    Permalink

    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

    Responder
  • enero 2, 2014 en 2:18 am
    Permalink

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

    Responder
  • febrero 7, 2014 en 4:04 pm
    Permalink

    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

    Responder
    • febrero 9, 2014 en 10:31 pm
      Permalink

      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

      Responder
    • marzo 11, 2014 en 4:10 pm
      Permalink

      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 🙂

      Responder
  • marzo 11, 2014 en 4:04 pm
    Permalink

    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.

    Responder

Deja un comentario

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