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.
Copia codice 

<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>
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
⤽
Copia codice 

<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>
Demo funzionante
⤽

JQuery