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

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

Using the Class

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

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

Related Posts:

About these ads

10 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s