Making a Simple Tweet to Download System

Demo Download

Twitter is undoubtedly a hugely popular social network. One of the keys to its success is its simple and powerful API, which opens the doors to countless novel ways for you to use the service.

One of these uses is allowing your visitors to "pay with a tweet". Namely you take something that you would otherwise offer for free (like an ebook, mp3 or other kind of digital media), and make it available to users only after they tweet about your website. It is a great way to promote your products and get noticed, and it doesn't cost anything to your visitors.

Building such functionality is not as hard as you might think. Twitter made it even easier with their Web Intents - a dead simple way to integrate the platform in your website. In this tutorial we will build a jQuery plugin around that API, and activate a download button once the user tweets. So lets get started!

The HTML

First we will need a simple web page to hold the example together.

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>

We are using some of the HTML5 tags - header, section and footer, to logically separate the page in three parts. Our #container section holds two anchor elements.

The first link - #tweetLink, is going to trigger the plugin and display a popup holding a Twitter submission form. The second - #downloadButton, is styled as a button and its href attribute is set to that of the file we are offering for download, once the user tweets.

At the bottom of the file, before the closing body tag, we have the usual set of JavaScript includes - version 1.6 of the jQuery library, the tweetAction.js plugin we will be writing in a moment, and script.js, which listens for clicks on the links and triggers the plugin.

Lets move to the jQuery section of this tutorial.

tweet-to-download-jquery-plugin.jpg

The jQuery

As you can see from the Web Intents documentation, it can be described as a popup based interface for interacting with Twitter. You just need to load a specific intent URL in a popup window and pass GET parameters with the text of the tweet, Twitter username and more, depending on the intent. This will produce a form which with which the user can publish a new tweet, reply or follow you.

Lets put this together in a jQuery plugin that handles it for us:

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);

To open a popup window with window.open(), we need to pass a list of comma-delimited parameters. These include which address bars are to be shown, and the dimensions and position of the window.

After we open http://twitter.com/intent/tweet we check the closed attribute of the window every 100 ms by running the checkWindow() function with a setTimeout(). This is the only way we can know that the popup has been closed, as browsers prevent any kind of cross-domain interactions. When the popup is closed, a callback function, passsed as the second argument of the function, is executed.

twitter-intent-share.jpg

You can see how we use this plugin below:

script.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');

    });

});

In the fragment above we trigger the tweetAction plugin on the #tweetLink anchor. When it clicked, we will display a popup window, which, when closed, will trigger the callback. This is where we enable the button and set its href attribute to that of the file.

The CSS

The only thing we are left to do, is throw in some fancy CSS styles. I am going to present only some of the more interesting declarations here. You can see the rest in assets/css/styles.css.

We are using multiple backgrounds for the html element. The background images are displayed one beneath the other, starting with the topmost image - 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);
}

Further down we have the styling of the twitter bird icon. I am using the > character to denote that this will affect only images that are direct children of body.

body > img{
    /* The twitter illustration */

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

Finally we have the #container section. With the help of the :before/:after pseudo elements, we display subtle shadows above and below the container.

#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;
}

These two pseudo elements share almost all of their code, so I've defined them as a group. The :after element is also styled separately, but only the styles that differ are redefined.

With this our Pay with a Tweet experiment is complete!

But wait! This doesn't work!

And you are entirely correct. As you can see from the code (and confirm from the demo), we assume that closing the popup window equals a published tweet. It does not.

As this is a cross domain interaction, there is no way to subscribe for when a tweet is actually published. The only way to do this would be to use Twitter's more complex @Anywhere API, but even then people could just hotlink to your file.

Does it even matter? The real purpose of this technique is to give people an incentive to tweet about your product/service, something that a lot of folks would love to do just for the feeling of receiving your "members-only" download.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles