Recently I needed to build URL shortening into a UI for a client – it’s not rocket science but I thought I’d reproduce the code here for posterity.
There are 2 versions; 1 for Goo.gl and 1 for Bitly.
Browser Compatibility & CORS
This does not work work in IE7/8/9 due to CORS issues. Both Google and Bitly’s URL shortening APIs are exposed via HTTPS.
The use of an XDomainRequest jQuery plugin will not solve this problem if you’re using the Google shortener, as Google requires that the request
Content-Typeheader isapplication/jsonwhereas XDomainRequest requires that this betext/plain.
| (function($,window) { | |
| "use strict"; | |
| window.pdogs = window.pdogs || {}; | |
| pdogs.urlshortener = function() { | |
| var | |
| _googlAPIKey = '<YOUR GOOGLE APIKey HERE>', | |
| _module = { shorten: shorten }; | |
| return _module; | |
| function shorten(longUrl, sync) { | |
| var p = $.Deferred(); | |
| if (typeof longUrl === 'undefined' || !longUrl || !longUrl.length) { | |
| p.reject({ error: 'Invalid/Empty URI' }); | |
| return p.promise(); | |
| } | |
| var | |
| decodedLongUrl = decodeURIComponent(longUrl), | |
| params = 'key='+_googlAPIKey, | |
| r = { | |
| type: 'POST', | |
| url: 'https://www.googleapis.com/urlshortener/v1/url?' + params, | |
| headers: { | |
| 'Accept': 'application/json', | |
| 'Content-Type': 'application/json' | |
| }, | |
| data: "{ longUrl: '" + decodedLongUrl + "' }", | |
| async: !sync | |
| }; | |
| jQuery.support.cors = true; | |
| $.ajax(r) | |
| .done(function(response) { | |
| if (response.error) p.reject({ error: '[' + response.error.code+'] ' + response.error.message }); | |
| else | |
| p.resolve({ shortUrl: response.id, shortUrlImg: response.id + '.qr', longUrl: response.longUrl }); | |
| }) | |
| .fail(function(xhr,textStatus, error) { | |
| var m = error.message ? error.message : error; | |
| p.reject({ error: 'goo.gl] ' + textStatus + ': ' + m }); | |
| }); | |
| return p.promise(); | |
| } | |
| }(); | |
| })(jQuery,window); |
Bitly
| (function($,window) { | |
| "use strict"; | |
| window.pdogs = window.pdogs || {}; | |
| pdogs.urlshortener = function() { | |
| var | |
| _bitlyAccessToken = '<YOUR BITLY ACCESS_TOKEN HERE>', | |
| _bitlyShortDomain = 'j.mp', | |
| _module = { shorten: shorten }; | |
| return _module; | |
| function shorten(longUrl, sync) { | |
| var p = $.Deferred(); | |
| if (typeof longUrl === 'undefined' || !longUrl || !longUrl.length) { | |
| p.reject({ error: 'Invalid/Empty URI' }); | |
| return p.promise(); | |
| } | |
| var | |
| encodedLongUrl = encodeURIComponent(decodeURIComponent(longUrl)), | |
| params = 'access_token=' + _bitlyAccessToken | |
| + '&longUrl=' + encodedLongUrl | |
| + '&domain=' + _bitlyShortDomain | |
| + '&format=json', | |
| r = { | |
| type: 'GET', | |
| url: 'https://api-ssl.bitly.com/v3/shorten?' + params, | |
| headers: { | |
| 'Accept': 'application/json' | |
| }, | |
| async: !sync | |
| }; | |
| jQuery.support.cors = true; | |
| $.ajax(r) | |
| .done(function(response) { | |
| if (response.status_code != 200) p.reject({ error: response.status_txt }); | |
| else p.resolve({ shortUrl: response.data.url, shortUrlImg: response.data.url + '.qrcode' }); | |
| }) | |
| .fail(function(xhr,textStatus, error) { | |
| var m = error.message ? error.message : error; | |
| p.reject({ error: 'bitly] ' + textStatus + ': ' + m }); | |
| }); | |
| return p.promise(); | |
| } | |
| }(); | |
| })(jQuery,window); |
Usage
pdogs.urlshortener.shorten(longUrl)
.done(function(response) {
console.log(response.shortUrl);
console.log(response.shortUrlImg);
})
.fail(function(response) {
if (response.error) alert(response.error);
})
.always(function() {
});
Published by