Muchas veces queremos bloquear un contenido de descarga especifico con el fin de crear algo similar a un «contenido premium» y que las personas deban dar una especie de pago para poder ver el enlace de descarga; pues bien el truco de hoy hace justo eso: el usuario debe pagar con una acción social (like, +1 o tweet) para poder ver el enlace de descarga.

Sencillo Social Content Locker para Blogger

El truco se ve de la siguiente manera (cuando el enlace de descarga está oculto):

Content-Locker-Blogger (1)

Y así se ve cuando el enlace de descarga ha sido desbloqueado por medio de una acción social:

Content-Locker-Blogger (2)

 

Para agregar este truco en tu blog solo debes ir a la entrada que quieras agregar el contenedor de bloqueo e ir a la edición html y agregar lo siguiente:

 

<div id="paybox">
<div id="paytittle">
Haz un Tweet, Like o +1 para poder descargar
</div>
<div id="fb-root">
</div>
<script type="text/javascript">

function habilitar() {
var url = "Agrega tu enlace de descarga";
url = "<a href='" + url + "'>Haz clic aquí para descargar el archivo.</a> ";
document.getElementById("restricted").innerHTML = url;
}

window.fbAsyncInit = function() {
FB.init({ status : true, cookie : true, xfbml : true });
FB.Event.subscribe('edge.create', function(response) { habilitar(); });
};

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));

twttr.ready(function (twttr) {
twttr.events.bind('tweet', function(event) {
habilitar();
});
});

(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

<br />

<div id="restricted">
<a class="twitter-share-button" data-lang="en" data-text="Texto en Twitter." data-via="habilitar" href="URL DE TU WEB"></a>

<g:plusone callback="habilitar" href="URL DE TU PERFIL DE G+" size="medium"></g:plusone>

<fb:like href="URL DE TU PÁGINA DE FACEBOOK" layout="button_count" send="false" show_faces="false" width="220"></fb:like>

</div>
</div>

 

He resaltado en verde los aspectos que puedes personalizar, hecho esto puedes guardar los cambios.

Este es un truco sencillo pero muy útil, pues en WordPress esto se puede con un plugin pero en Blogger nos toca de forma manual, espero que te haya gustado el truco del día de hoy y no olvides ayudarnos compartiendo este tutorial en tus redes sociales.


2 comentarios

Betzabe · junio 17, 2015 a las 12:44 am

Hola!! me encanta tu página y uso varios trucos de ellos en mi blog, no sabes que seria de mi vida sin esta página, quisiera un truco parecido a este pero en lugar de que compartan en redes sociales me gustaría que con un comentario se activara la descarga, crees que eso seria posible?

    Juvinao · junio 28, 2015 a las 9:07 pm

    Hola Betzabe gracias por comentar, te cuento que hasta ahora no he visto nada parecido en Blogger a lo que comentas pero tal vez si se pueda, todo es cuestión de probar.

Deja una respuesta

Marcador de posición del avatar

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