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 from this link. 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);
});
})();
Watch the demo or click here to download the Shortener API and enjoy! If you like the script, please, follow @wemakesitesnet on Twitter.
Related Posts:
- JavaScript Mapper Class for RESTFul Methods
- HTML Validator Bookmarklet
- JavaScript Template Engine
- XML to JSON JavaScript Objectifier
- URI to JSON Serializer
- IMDB Fetcher – Experimental IMDB JavaScript and PHP API
- Quick and Dirty Localization With JavaScript
- JavaScript Instance Name Finder
- Cross-browser HTML5 Placeholder Enabler
- Cross-browser HTML5 Details Element Enabler
- JavaScript Wrapper for the HTML5 WebWorkers API
- JavaScript Inheritance Without Constructors
- JavaScript Class Augmenter
