JavaScript API for TinyURL

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Unlike other URL-shortening services, TinyURL provides a public API which works without developer keys or authorization. Here is a tiny JavaScript class which utilizes this service with the help of a few lines of PHP. You can check the demo or download the entire example here. You can also define your own shortening services and a key-value of predefined shortened URLs that can be pulled from the internal urls object of class rather than requesting it from the server. Make sure you check the comments in the code for a better insight and more options.

The Shortener JavaScript Class

[sourcecode language=”javascript”]
(function() {
    "use strict";

    /*
     * @namespace window.AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }

    /*
     * @constructor
     * @param urls (Object) set a predefined key-value pairs of urls/shorturls
     * {
     *  "url": "shorturl"
     * }
     **/
    function Shortener(urls) {
        this.urls = urls || {};
    }

    Shortener.prototype = {
        /*
         * @member APIS (Object)
         * @public
         **/
        APIS: {
            tinyurl: "http://tinyurl.com/api-create.php?url="
        },

        /*
         * @method get
         * @public
         * @param longUrl (String) URL that should be shortened
         * @param callback (Function) [optional] callback that will be executed after the URL has been processed
         * @param apiToUse (String) [optional] which shortening service should be used (default is "tinyurl")
         **/
        get: function(longUrl, callback, apiToUse) {
            var
                that = this,
                service = apiToUse ? this.APIS[apiToUse] : this.APIS.tinyurl;

            if(this.urls[longUrl]) {
                if(callback) {
                    callback.call(this, this.urls[longUrl]);
                    return;
                }
            }

            $.when($.ajax({
                    url: "AcidJs.Shortener/php/Shortener.php",
                    data: "url=" + window.encodeURIComponent(longUrl) +
                        "&service=" + window.encodeURIComponent(service),
                    dataType: "json"
                })).then(function(rsp){
                    that.set(longUrl, rsp[longUrl], callback);
                });
        },

        /*
         * @method set cache the short url in the urls object and reuse it from the DOM storage if requested again
         * @private
         * @param key (String) original expanded URL
         * @param value (String) shortened url
         * @param callback (Function) [optional] execute the callback, if set in the get() method
         **/
        set: function(key, value, callback) {
            this.urls[key] = value;
            if(callback) {
                callback.call(this, this.urls[key]);
            }
        }
    };

    window.AcidJs.Shortener = Shortener;
})();
[/sourcecode]

Using the Class

[sourcecode language=”javascript”]
(function() {
    var
        config = {
            "http://wemakesites.net": "http://tinyurl.com/2cv6wrm",
            "http://acidjs.wemakesites.net/": "http://tinyurl.com/bonbupy",
            "http://acidmartin.wordpress.com": "http://tinyurl.com/clvk2v8"
        };

    window.shortener = new AcidJs.Shortener(config);
    window.shortener.get("http://stickeez.wemakesites.net", function(url) {
        window.console.log(url);
    });
})();
[/sourcecode]

Check the demo and have fun! If you like the script, please, follow @wemakesitesnet on Twitter.

Related Posts: