Bit.ly URL Shortener

Shorten URLs using the power of Bit.ly and JSONP.

by Kai

HTML

<div id="container">
    <span class="note">Shorten with Bit.ly</span><br/>
    <input type="text" id="url" />
    <button id="shorten">Shorten</button>
</div>

CSS

#container {
    position: relative;
    padding: 10px;
    margin: 20px auto;
    background-color: #ccc;
    border: solid 1px #999;
    width: 460px;
    height: 65px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#url {
    width: 350px;
    height: 30px;
    border: solid 1px #ccc;
    background-color: #ffff99;
    font-family: Verdana, serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#shorten {
    height: 32px;
    width: 100px;
    font-family: Verdana, serif;
    color: #fff;
    border: 1px solid #ccc;
    background-color: #336699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

#shorten:hover { background-color: #6699cc; }

#shorten:active { background-color: #99ccff; }

.note {
    font-weight: bold;
}

JavaScript

// Must explicitly assign to window object in jsFiddle
window.Bitly = (function() {
    var x_login,
        x_apiKey,
        apiUrl = "http://api.bit.ly/v3/shorten?",
        callbackHandler,
        e,
        head = document.getElementsByTagName("head")[0];
    
    function constructUrl(longUrl) {
        var q = "";

        if (x_login && x_apiKey) {
            q += "login=" + x_login + "&apiKey=" + x_apiKey + "&";
        }

        q += "longUrl=" + encodeURIComponent(longUrl) + "&format=json&callback=Bitly.callback";

        return apiUrl + q;
    }

    return {
        setLogin: function(login) {
            x_login = login || "";
            return this;
        },

        setKey: function(apiKey) {
            x_apiKey = apiKey || "";
            return this;
        },

        setCallback: function(fn) {
            if (typeof fn !== 'function') {
                throw new Error("Bitly: callback must be a function.");
            }

            callbackHandler = fn;

            return this;
        },

        shorten: function(longUrl) {
            e = document.createElement("script");
            e.src = constructUrl(longUrl);

            head.appendChild(e);
        },

        callback: function(response) {
            callbackHandler(response);
        }
    };
}());


(function () {
    
    function myCallback (response) {
        url.value = response.data.url || response.status_code + ": " + response.status_txt;
    }
    
    Bitly.setLogin("kmallea83")
        .setKey("R_134a45b9326fd277580471cd200d35d0")
        .setCallback(myCallback);
    
    var url = document.getElementById("url"),
        shorten = document.getElementById("shorten"),
        validUrl = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/i;
    
    shorten.onclick = function() {
        var value = url.value;
        if (value.match(validUrl)) {
            Bitly.shorten(value);
        }
    };
}());