En el blog de labnol han publicado un práctico código con el que los editores como nosotros podemos ofrecer artículos, libros u otras descargas con el modelo de pago social. Es decir, descargas a cambio de un tweet o recomendación de Facebook o Google+. Realmente no tiene porque ser una descarga, puede ser un enlace a cualquier otro sitio o recurso web.
Antes de nada hazle un clic aquí a la demo que tienen preparada para que veas como funciona. Puedes realizar por igual, un +1, un me gusta de Facebook o enviar un tweet para desbloquear el enlace de descargar del archivo.
Desbloquear contenido con un tweet, me gusta o +1
Para integrar estas prestaciones sociales en tu página web copia solo lo que hay entre las etiquetas <body> del fragmento a continuación (lo que está en negro) y añadela a la plantilla de tu página web. También tienes que modificar los bloques de la línea 13 (dirección URL del archivo), 56 (texto del tweet), 61 (URL a +1) y 65 (página de Facebook):<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Pay with a Tweet, Facebook Like or Google +1</title>
/* Pago social por Digital Inspiration (2013) */
/* Adaptado por el Exprimiblog */
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
function labnol() {
// La URL del archivo a descargar tras el megusta/tweet/+1
var url = "http://www.nombredetublog.com/";
url = "<a href='" + url + "'>Click here</a> to download the file.";
document.getElementById("restricted").innerHTML = url;
}
window.fbAsyncInit = function() {
FB.init({ status : true, cookie : true, xfbml : true });
FB.Event.subscribe('edge.create', function(response) { labnol(); });
};
(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) {
labnol();
});
});
(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>
<div id="restricted">
//Texto a añadir al tweet
<a href="https://twitter.com/share"
data-text="Este blog es mi favorito: http://nombredetublog.com"
data-via="labnol" class="twitter-share-button" data-lang="en"></a>
// La URL en la que el visitante hará +1 en Google Plus
<g:plusone size="medium" callback="labnol"
href="http://www.nombredetublog.com/"></g:plusone>
// La dirección completa de tu página de Facebook para el megusta
<fb:like href="http://www.facebook.com/tupágina" send="false"
layout="button_count" width="220" show_faces="false"></fb:like>
</div>
</body>
</html>
Recuerda que puedes insertarlo, por ejemplo, en cualquier entrada. Simplemente omite lo que está en azul; copia sólo lo que este entre las etiquetas <div> y modfica lo que está en verde.
Así es como funciona el código: Cuando el usuario hace clic en cualquiera de los botones sociales, el evento se captura y, a continuación, utilizando JavaScript, el enlace para descargar el archivo se añade en el lugar del botón. Si el usuario abre el diálogo de Twitter, pero decide no publicarlo finalmente, se cancela la acción y no se puede abrir el enlace.
Hay otras soluciones ya hechas disponibles, "Paga con un tweet" es muy popular, pero requieren demasiados pasos para el usuario para completar la transacción. Aquí, es tan fácil como hacer clic en el ordinario "tweet" o el botón "me gusta".
Si vas a introducir este código en la plantilla de Blogger, antes tendrás que parsearlo. Usa esta herramienta.
El único inconveniente de este sistema es que cualquier persona con conocimientos técnicos puede descubrir el enlace de descarga desde el código fuente HTML, aunque la mayoría de los usuarios de Internet no son capaces de eso, no tienen la suficiente paciencia o no les importa pagar socialmente.
¿Qué os ha parecido? ¿Alguna sugerencia?