Sencillo Social Content Locker para Blogger

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):

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

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.