Cómo aceptar pagos sociales en tu sitio web

votar

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?

11 comentarios:

  1. Aunque la remuneración no sea monetaria de seguro habrá más de uno interesado en ello.

    ResponderEliminar
    Respuestas
    1. Más teniendo en cuenta que por el tweet patrocinado de algunos famosos, algunas marcas, pueden pagar de 500 a 6000$. Es Estados Unidos, eso sí y con gente que además de muy famosa tienen miles de seguidores, que es el principal baremo. Aún no hablé de ninguno de estos sistemas, a ver si pronto.

      Saludote Jesús y gracias por tu comentario!

      Eliminar
  2. Hola Jorge, me acabo de hacer seguidora de tu blog, esta genial. Yo estoy pensando en monetizar mis blogs, de ahí que también esté preparando un "lavado" de cara a los mismos para hacerlos más atractivos. Te iré visitando con frecuencia ya que veo que hay mucho que aprender en tu blog.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Muchas gracias por el seguimiento María Teresa, siéntete libre de preguntar lo que te interese, intentaré ayudar y ser lo más claro posible. Un saludo y hasta pronto!

      Eliminar
  3. Llevaba buscando un código así varios días!! muchisimas gracias! funciona a la perfección en blogspot!

    ResponderEliminar
    Respuestas
    1. Muchas gracias por el aviso y el comentario.

      Un saludote!

      Eliminar

Tu comentario tiene valor, dedícale unos minutos y repásalo. Si tiene faltas de gramaticales o de ortografía lo borraré. Respondo a todos así que si tienes dudas no repares en preguntar.

Si esperas respuesta acuérdate de marcar el botón de 'Avisarme'.

Y RECUERDA: Para mantener las conversaciones legibles usa correctamente el botón COMENTAR o RESPONDER cuando proceda. Muchas gracias.

Más de 2000 suscriptores reciben las entradas en su correo

Vía FeedBurner. Introduce tu dirección de correo electrónico y confirma el mensaje que te llegue.