Marcadores sociales que ocultan link de descarga

No sabia que titulo ponerle a esta entrada, pero luego de pensarlo un poco creo que el titulo expresa la idea central y función principal del truco del día de hoy, el cual consta de un contenedor con marcadores sociales que ocultan un enlace de descarga, el cual solo se mostrará cuando el usuario presione alguno de los botones de las redes sociales, en otras palabras el usuario primero tendrá que compartir la entrada en una red social y luego si tendrá acceso al link con el archivo de descarga.

Hace un tiempo publiqué un truco similar, pero el del día de hoy es bastante sencillo y se puede personalizar con algo de CSS, razón por la cual el diseño es simple pero muy funcional.

Marcadores sociales que ocultan link de descarga 

El truco se ve de la siguiente manera:

Para agregar este truco a tu blog solo debes ir al editor de entradas de Blogger y dar clic en HTML (ubicado en la parte superior) y pegar lo siguiente:

<div style="text-align: center;">
<div id="paybox">
<div id="paytittle">
<span style="font-family: Times, Times New Roman, serif; font-size: large;"><i><b>Comparte en estas redes sociales para poder descargar</b></i></span>
 </div>
<div id="fb-root">
</div>
<script type="text/javascript">
 
 function habilitar() { 
 var url = "http://cdn.rt.com/actualidad/public_images/e93/e931546e93a837fab474e6fc600afbce_article.jpg"; 
 url = "<a href='" + url + "'>Descargar 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 que se desea compartir" data-via="habilitar" href="URL que se desea compartir"></a>
  
 <g:plusone callback="habilitar" href="URL de tu perfil de Google+" 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>

Ahora solo debes reemplazar lo que está resaltado en azul por lo que se indica en cada caso.

0
Shares

7 thoughts on “Marcadores sociales que ocultan link de descarga

Deja un comentario

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