logo

Hacer un sistema simple de tweet para descargar

Twitter es, sin duda, una red social muy popular. Una de las claves de su éxito es su API sencilla y potente, que abre las puertas a innumerables formas novedosas de utilizar el servicio.

Uno de estos usos es permitir que sus visitantes "paguen con un tweet". Es decir, tomas algo que de otro modo ofrecerías gratis (como un libro electrónico, un mp3 u otro tipo de medio digital) y lo pones a disposición de los usuarios solo después de que tuiteen sobre tu sitio web. Es una excelente manera de promocionar sus productos y hacerse notar, y no cuesta nada a sus visitantes.

Construir dicha funcionalidad no es tan difícil como podría pensar. Twitter lo hizo aún más fácil con sus Web Intents, una forma muy sencilla de integrar la plataforma en su sitio web. En este tutorial crearemos un complemento jQuery alrededor de esa API y activaremos un botón de descarga una vez que el usuario tuitee. ¡Así que empecemos!

El HTML

Primero necesitaremos una página web simple para mantener el ejemplo unido.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Tweet to Download | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>Tweet to Download</h1>
            <h2><a href="https://tutorialzine.com/2011/05/tweet-to-download-jquery/">&laquo; Back to Tutorialzine</a></h2>
        </header>

        <section id="container">
            <p>The button below is activated<br />only* after you tweet. <a href="#" id="tweetLink">Try it.</a></p>
            <a href="#" class="downloadButton">Download</a>
        </section>

        <footer>*Not exactly. Read more in the tutorial..</footer>

        <img src="assets/img/twitter_bird.png" alt="Twitter Bird" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="assets/js/jquery.tweetAction.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Estamos utilizando algunas de las etiquetas HTML5:encabezado, sección y pie de página, para separar lógicamente la página en tres partes. Nuestra sección #container contiene dos elementos de anclaje.

El primer enlace, #tweetLink, activará el complemento y mostrará una ventana emergente con un formulario de envío de Twitter. El segundo, #downloadButton, tiene el estilo de un botón y su atributo href se establece como el del archivo que ofrecemos para descargar, una vez que el usuario tuitea.

En la parte inferior del archivo, antes de la etiqueta del cuerpo de cierre, tenemos el conjunto habitual de JavaScript incluidos:la versión 1.6 de la biblioteca jQuery, tweetAction.js complemento que escribiremos en un momento, y script.js , que escucha los clics en los enlaces y activa el complemento.

Pasemos a la sección jQuery de este tutorial.

JQuery

Como puede ver en la documentación de Web Intents, se puede describir como una interfaz basada en ventanas emergentes para interactuar con Twitter. Solo necesita cargar una URL de intención específica en una ventana emergente y pase los parámetros GET con el texto del tweet, el nombre de usuario de Twitter y más, según la intención. Esto producirá un formulario con el cual el usuario puede publicar un nuevo tweet, responder o seguirte.

Juntemos esto en un complemento de jQuery que lo maneje por nosotros:

jquery.tweetAction.js

(function($){

    var win = null;

    $.fn.tweetAction = function(options,callback){

        // Default parameters of the tweet popup:

        options = $.extend({
            url:window.location.href
        }, options);

        return this.click(function(e){

            if(win){
                // If a popup window is already shown,
                // do nothing;
                e.preventDefault();
                return;
            }

            var width   = 550,
                height  = 350,
                top     = (window.screen.height - height)/2,
                left    = (window.screen.width - width)/2; 

            var config = [
                'scrollbars=yes','resizable=yes','toolbar=no','location=yes',
                'width='+width,'height='+height,'left='+left, 'top='+top
            ].join(',');

            // Opening a popup window pointing to the twitter intent API:
            win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
                        'TweetWindow',config);

            // Checking whether the window is closed every 100 milliseconds.
            (function checkWindow(){

                try{
                    // Opera raises a security exception, so we
                    // need to put this code in a try/catch:

                    if(!win || win.closed){
                        throw "Closed!";
                    }
                    else {
                        setTimeout(checkWindow,100);
                    }
                }
                catch(e){
                    // Executing the callback, passed
                    // as an argument to the plugin.

                    win = null;
                    callback();
                }

            })();

            e.preventDefault();
        });

    };
})(jQuery);

Para abrir una ventana emergente con window.open() , necesitamos pasar una lista de parámetros delimitados por comas. Estos incluyen qué barras de direcciones se mostrarán y las dimensiones y la posición de la ventana.

Después de abrir http://twitter.com/intent/tweet comprobamos el closed atributo de la ventana cada 100 ms ejecutando el checkWindow() función con un setTimeout() . Esta es la única forma en que podemos saber que la ventana emergente se ha cerrado, ya que los navegadores evitan cualquier tipo de interacción entre dominios. Cuando se cierra la ventana emergente, se ejecuta una función de devolución de llamada, pasada como el segundo argumento de la función.

Puede ver cómo usamos este complemento a continuación:

secuencia de comandos.js

$(document).ready(function(){

    // Using our tweetAction plugin. For a complete list with supported
    // parameters, refer to http://dev.twitter.com/pages/intents#tweet-intent

    $('#tweetLink').tweetAction({
        text:       'How to make a simple Tweet to Download system',
        url:        'https://tutorialzine.com/2011/05/tweet-to-download-jquery/',
        via:        'tutorialzine',
        related:    'tutorialzine'
    },function(){

        // Callback function. Triggered when the user closes the pop-up window:

        $('a.downloadButton')
                .addClass('active')
                .attr('href','tweet_to_download.zip');

    });

});

En el fragmento de arriba activamos la tweetAction complemento en el #tweetLink ancla. Cuando haga clic, mostraremos una ventana emergente que, cuando se cierre, activará la devolución de llamada. Aquí es donde habilitamos el botón y establecemos su href atributo al del archivo.

El CSS

Lo único que nos queda por hacer es agregar algunos estilos CSS sofisticados. Voy a presentar aquí sólo algunas de las declaraciones más interesantes. Puedes ver el resto en assets/css/styles.css .

Estamos usando múltiples fondos para el elemento html. Las imágenes de fondo se muestran una debajo de la otra, comenzando con la imagen superior:bg_gradient.jpg .

html{
    /* CSS3 Multiple backgrounds with a fallback */

    background-color:#e4e4e4;
    background:url('../img/bg_gradient.jpg') no-repeat center center,url('../img/bg_tile.jpg');
}

body{
    color:#888;
    padding:10px;
    min-height:600px;
    font:14px/1.3 'Segoe UI',Arial, sans-serif;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

Más abajo tenemos el estilo del icono del pájaro de Twitter. Estoy usando el carácter> para indicar que esto afectará solo a las imágenes que son hijos directos del cuerpo.

body > img{
    /* The twitter illustration */

    margin:50px auto 0;
    display:block;
}

Finalmente tenemos la sección de #contenedores. Con la ayuda de los :before /:after pseudo elementos, mostramos sombras sutiles por encima y por debajo del contenedor.

#container{
    width:450px;
    height:300px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    position:relative;
    background-color:#fff;
    display:block;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

#container:before,
#container:after{

    /* Adding subtle shadows with before/after elements */

    content:'.';
    text-indent:-99999px;
    overflow:hidden;
    display:block;
    height:12px;
    width:470px;
    background:url('../img/shadows.png') no-repeat center top;
    position:absolute;
    left:0;
    top:-12px;
}

#container:after{
    top:auto;
    bottom:-12px;
    background-position:center bottom;
}

Estos dos pseudo elementos comparten casi todo su código, así que los he definido como un grupo. El :after el elemento también se diseña por separado, pero solo se redefinen los estilos que difieren.

¡Con esto, nuestro experimento Pagar con un Tweet está completo!

¡Pero espera! ¡Esto no funciona!

Y tienes toda la razón. Como puede ver en el código (y confirmar en la demostración), asumimos que cerrar la ventana emergente equivale a un tweet publicado. No es así.

Como se trata de una interacción entre dominios, no hay forma de suscribirse cuando se publica un tweet. La única forma de hacer esto sería usar la API @Anywhere más compleja de Twitter, pero incluso entonces las personas podrían simplemente vincular su archivo.

¿Importa siquiera? El propósito real de esta técnica es dar a la gente un incentivo para tuitear sobre su producto/servicio, algo que a mucha gente le encantaría hacer solo por la sensación de recibir su descarga "solo para miembros".