Ir al contenido principal

Cómo aceptar pagos sociales en tu sitio web


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.


El comprador hace una recomendación pública de tu producto -puedes personalizar el mensaje- en una red social y se les recompensará con una copia gratuita del mismo.

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?

Entradas populares de este blog

Optimiza las ganancias de acortadores al máximo fácil con Lanza.me

Seguro que ya conoces  Lanza.me ; el primer acortador y metaacortador que te permite cambiar todos tus enlaces en pocos segundos a los acortadores que quieras, evitando con ellos problemas con los principales acortadores que pagan . Estoy seguro de que también conoces Shorteners.net ; el primer comparador de tasas y otras características de acortadores de acortadores que pagan y que te ofrece las tasas de estos siempre actualizadas, valoraciones y más. Ha llegado el momento de unir ambos sitios para una obtención de datos práctica y automática. Lanza.me + Shorteners.net: La unión perfecta Así es. Lanza.me y Shorteners.net ya tienen una conexión conjunta. Con ella, Lanza.me puede conocer las tasas de los acortadores y con ello, decirte cuál es el acortador que más te conviene para las visitas que recibas. Y no me estoy refiriendo al recomendador de acortadores integrado en Lanza.me , que te anuncia cuales son los acortadores que no estás empleando y que tienen

Compatible con Youtube, Lanza.me trae otras muchas mejoras

Lanza.me es es un acortador y metaacortador con funcionalidades únicas. Una de ellas es la de mostrar páginas externas de nuestra preferencia, así como acortar nuestros enlaces con los principales acortadores de enlaces. Hubo novedades, y en esta entrada te las presento. Si quieres saber más acerca de Lanza.me visita esta sección del blog . Vídeos de Youtube como páginas intermedias Desde la madrugada del 24 de febrero Lanza.me es compatible con Youtube. Cuando inserten la URL de un vídeo de youtube como una página externa, el acortador lo detectará y lo mostrará ocupando todo el ancho de la pantalla cuando los usuarios visiten el enlace. Los usuarios VIP pueden configurar estas páginas para que reproduzcan el vídeo automáticamente, con lo que conseguirán más visitas. Más datos añadidos y un repaso a las estadísticas Hace tiempo comenté que otra vez había habido cambios en las estadísticas. Miraremos más por encima esas estadísticas porque tienen algunas opciones que sería inte

Multiplica tus ingresos con el encadenador de acortadores de Lanza.me

Lanza.me es el acortador y metaacortador que he estado desarrollando durante los últimos 4 años. Con él puedes usar otros acortadores para acortar tus enlaces y cambiarlos fácilmente y en muy pocos segundos. También permite usar páginas externas para mostrar en tus enlaces cortos o simplemente usar enlaces directos.  Ya es muy estable y está lleno de opciones, como estadísticas a nivel de usuario y enlace, optimización de acortadores, alertas dinámicas y reactivas de acortadores caídos o en problemas,  listas públicas de enlaces , programa de referidos, etc. Hoy te traigo una nueva característica. Encadenador: Multiplica tus ingresos sin esfuerzo ni riesgo Este lunes 5 de julio de 2021 se ha lanzado el encadenador de acortadores. Se trata de una nueva característica, única de Lanza.me, con la que podrás conseguir duplicar tus ingresos sin esfuerzo ni riesgo. Cómo funciona el encadenador El encadenador de acortadores usa varios acortadores a la vez sobre un mismo enlace; Los visitantes