Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asincrono utilizzando JSONP o “JSON con padding”. È necessario modificare il ‘nome utente’ e la ‘API Key’, che si ottengono creando un account su Bit.ly. Suo Uso rende gli URL corti e ordinati, poi attraverso l’interfaccia che offre Bit.ly si possono gestire e avere delle statistiche degli url generati.
Codice JavaScript

⤽
La funzione accorcia_url() si occupa di inviare l’indirizzo web, già filtrato, e il suo successo popola il blocco html identificato con risultato. Nel caso non va a buon fine si indicherà un messaggio appropriato nel blocco errore.
[code lang=”javascript”] <script type="text/javascript">
function accorcia_url(url) {
var url=url;
var username="nome utente"; // bit.ly nome utente
var key="API Key";
$.ajax({
url:"http://api.bit.ly/v3/shorten",
data:{longUrl:url, apiKey:key, login:username},
dataType:"jsonp",
success:function(v) {
var url_corto=v.data.url;
$("#risultato").html(‘<a href="’+url_corto+’" target="_blank">’+url_corto+'</a>’).show();
},
error: function() {
$("#errore").html("Errore imprevisto").show();
}
});
}
$(document).ready(function() {
$("#mio_url").focus();
$("#accorcia").click(function(e) {
$("#errore").empty().hide();
$("#risultato").empty().hide();
var url = $("#mio_url").val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var okTest = urlRegex.test(url);
if(okTest) {
accorcia_url(url);
} else {
$("#errore").html("URL incorretto").show();
}
e.preventDefault();
});
});
</script>
[/code]
Una volta che la pagina è pronta, la funzione viene invocata al momento di cliccare il pulsante con l’ID accorcia. Prima di farlo pulisce preventivamente i blocchi per i messaggi e testa il valore contenuto nel campo mio_url: se l’url no ha il formato atteso invia una messaggio di errore altrimenti esegue la funzione.
Codice HTML
⤽
[code lang=”html”] <form>
<input type="text" name="mio_url" id="mio_url"/>
<input type="submit" id="accorcia" value="Accorcia URL"/>
<div id="risultato"></div>
<div id="errore"></div>
</form>
[/code]
Demo funzionante
⤽

JQuery