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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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() {
});
platinumdogs.me 
Published by