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.


7 comentarios

ClubAnime HD · noviembre 30, 2014 a las 10:45 pm

esto es excelente hah pero no me sirve men tal vez si tendrias que comentar para ver lin seria genial

Daniel Calandreli · enero 4, 2015 a las 10:20 pm

bro estaria a todo dar que hisieras uno donde tienes que comentar para descargar

    Hayder Juvinao · enero 5, 2015 a las 10:23 pm

    Daniel pues la verdad es que es muy interesante lo que planteas, voy a investigar 😉

    Saludos

Apministrador · abril 1, 2015 a las 3:33 am

buen post quisiera saber como cambiarlo de orisontal a vertical?

    Hayder Juvinao · abril 6, 2015 a las 3:24 pm

    Hola amigo, de forma horizontal es más cómodo pero si lo quieres poner de forma vertical solo debes aplicar un salto de línea a la parte final del código:

    Saludos

mgiuel · marzo 11, 2016 a las 4:17 pm

hola ace tiempo que quiero poner este tipo de codigo pero qusiera saber si se puede poner otros botones q se veam mas chulos muchas gracias por los post

visita mi blog http://clubanimehd.blogspot.com.ar/

Responder a Apministrador Cancelar la respuesta

Marcador de posición del avatar

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