jQuery longUrl: Uniform Resource Elongator

|

jQuery Long Url uses the longurlplease.com short URL lengthening API to expand short URLs from at least 80 services, including bit.ly, is.gd, tinyurl.com and more!

And not only has jQuery Long Url been written to take advantage of the longurlplease.com API “batch” ability, where up to ten URLs can be lengthened per request, but it can optionally use any lengthening service, supporting any URL-per-request “batch” limitations, which minimizes the number of external requests made for faster performance.

Usage

Basic

Look, how easy can it get? You call .longUrl() on some A elements, and they get updated:

// Lengthen URLs of all selected "a" elements. The "title"
// and "href" attributes of each element will be updated
// with the fetched long URL.
$("a").longUrl();

Slightly more advanced

So, let’s say you want a little more control over what happens when those A elements are updated…

// Lengthen URLs of all selected "a" elements, giving them
// a class of "fetch" in the meantime.
$("a").longUrl({
  complete: function(result){
    // The "complete" function executes after all elements
    // have been updated, so remove the "fetch" class on
    // everything (`this` is the initial set of elements).
    this.removeClass( "fetch" );
  }
}).addClass( "fetch" );

// Lengthen URLs of all selected "a" elements, setting their
// text to be their long URL value.
$("a").longUrl({
  callback: function( href, long_url ){
    // The "callback" function executes for each unique
    // href, and `this` is a jQuery object containing all
    // elements sharing that href.
    if ( long_url ) {
      this.text( long_url );
    }
  }
});

And if you’re trying to do something fancy, you can call $.longUrl() to just fetch long URLs without updating any A elements. This gives you the flexibility to use longURL however you’d like…

// Lenthen a single URL.
$.longUrl( "http://url.ie/4qns", function(result){
  // When URL is fetched, result will be:
  // { "http://url.ie/4qns": "http://twitter.com/cowboy/" }
});

// Lenthen a few URLs.
var urls = [
  "http://url.ie/4qns",
  "http://tinyurl.com/d2b3do",
  "http://su.pr/A5aJ2t"
];

$.longUrl( urls, function(result){
  // When URLs are fetched, result will be:
  // {
  //  "http://url.ie/4qns": "http://twitter.com/cowboy/",
  //  "http://tinyurl.com/d2b3do": "http://benalman.com/",
  //  "http://su.pr/A5aJ2t": "http://jquery.com/"
  // }
});

Either way, check out the live example to see the plugin in actual action, and if you have any non-bug-related feedback or suggestions, please let me know below in the comments. If you have any bug reports, please report them in the issues tracker, thanks!

Also, I really want to thank Darragh Curran for keeping his awesome longurlplease.com service up and running!

Post A Comment

  • Any of these HTML tags may be used for style: a, b, i, br, p, strong, em, pre, code.
  • Multi-line JavaScript code should be wrapped in <pre class="brush:js"></pre>
    (supported syntax highlighting brushes: js, css, php, plain, bash, ruby, html, xml)
  • Use &lt; instead of < and &gt; instead of > in the examples themselves.