Mil Trucos Blogger

Marcadores sociales que ocultan link de descarga

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

7 Comentarios

  1. Noviembre 30, 2014    

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

  2. Enero 4, 2015    

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

    • Enero 5, 2015    

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

      Saludos

  3. Abril 1, 2015    

    buen post quisiera saber como cambiarlo de orisontal a vertical?

    • Abril 6, 2015    

      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

  4. Marzo 11, 2016    

    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/

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo