jQuery on the fly URL shortener

Question

I'm looking for an on the fly URL shortener much like how tweetdeck works. I have found many jQuery and general javascript plugins that take a url and run it through a shortening service such as bit.ly when a button is pressed. However, I have not been able to find one that does it on the fly. My first question is does this already exist someplace? Secondly, if it doesn't, then what would be the best way to recognize a URL that needs to be shortened inside a textbox? My thoughts:

1. On onKeyUp of that text area run through the text looking for http
2. If found grab the whole URL (how do I determine the end? could be period, comma, space, etc...)
3. Make sure the URL isn't already a bit.ly URL
4. Validate the URL (make a request and make sure the http response is not an error, does bit.ly already do this?)
5. If valid, send the url to bit.ly's API and get the response
6. Replace the long URL with the short URL in the text area.

Thoughts?

Answer 1

Here is an example how to get a shortened URL with Bitly API and jQuery:

function get_short_url(long_url, login, api_key, func)
{
    $.getJSON(
        "http://api.bitly.com/v3/shorten?callback=?", 
        { 
            "format": "json",
            "apiKey": api_key,
            "login": login,
            "longUrl": long_url
        },
        function(response)
        {
            func(response.data.url);
        }
    );
}

The following code could be used to get a short URL:

/*
Sign up for Bitly account at
 https://bitly.com/a/sign_up

and upon completion visit
https://bitly.com/a/your_api_key/ 
to get "login" and "api_key" values
*/
var login = "LOGIN_HERE";
var api_key = "API_KEY_HERE";
var long_url = "http://www.kozlenko.info";

get_short_url(long_url, login, api_key, function(short_url) {
    console.log(short_url);
});

Answer 2

I guess the API of Bitly has changed slightly. You now only really need an access token to request a short URL.

Following the best practices, I created the following Javascript-only snippet:

getShortUrl: function(url, callback)
{
   var accessToken = '___YOUR_ACCESS_TOKEN___';
   var url = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + accessToken + '&longUrl=' + encodeURIComponent(url);

    $.getJSON(
        url,
        {},
        function(response)
        {
            if(callback)
                callback(response.data.url);
        }
    );
},

Answer 3

The on the fly bit is going to be difficult to make reliable and speedy.

People won't type http most of the time or even www.

The end, like you said, is going to be hard to determine if the url contains a space or worse, runs into the next sentence because the user didn't put in a space.

And what if people need to change the url after the fact because they typed http://stakoverflow.com/ instead of https://stackoverflow.com/ ?

I think the best solution would be an "insert shortened url" button on your text editor that allowed people to do just that. Or, do it server-side when the post is made.

Answer 4

You could also generate a short url with php and curl on the server, this way you don't have to expose your API key in the webpage:

<?php
    //the long url posted by your webpage
    $url = strip_tags($_POST["url"]);

    $api_user = "your_bitly_user_name";
    $api_key = "your_bitly_api_key";

    //send it to the bitly shorten webservice
    $ch = curl_init ("http://api.bitly.com/v3/shorten?login=$api_user&apiKey=$api_key&longUrl=$url&format=json");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //the response is a JSON object, send it to your webpage
    echo curl_exec($ch);    
?>

Then in your webpage the code should be something like:

    //the long url that you want to shorten
    var longUrl = escape(window.location.href)

    $.ajax({
        url : "php/getShortUrl.php",//this is the php script above
        dataType : "json",
        type : "POST",
        data : {
            url : longUrl
        },
        success : function(data) {
            if(data.status_txt === "OK"){
                shortUrl = data.data.url;
            }
        },
        error : function(xhr, error, message) {
            //no success, fallback to the long url
            shortUrl = longUrl
        }
    });

See the bitly API for more details

Answer 5

Why not do a jQuery POST to the Bit.ly API? http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/

Answer 6

I found your post while looking for something similar and eventually just wrote a jQuery plugin that provides (at least part of) what you're looking for.

My jQuery Url Shortener on Bitbucket

It's a very simple plugin; I didn't need to shorten the user's urls so I don't have any length checking or url testing before shortening it, though I am not averse to adding those types of features.

Just thought you might find it useful.

As for Recognising URLs in your textbox, I would suggest using a RegEx to match the url.