jQuery on the fly URL acortador

Question

Estoy buscando un acortador de URL sobre la marcha al igual que funciona tweetdeck. He encontrado muchos jQuery y complementos generales de JavaScript que toman una url y la ejecutan a través de un servicio de acortamiento, como bit.ly, cuando se presiona un botón. Sin embargo, no he podido encontrar uno que lo haga sobre la marcha. Mi primera pregunta es si esto ya existe en algún lugar? En segundo lugar, si no es así, ¿cuál sería la mejor manera de reconocer una URL que debe acortarse dentro de un cuadro de texto? Mis pensamientos:

1. En onKeyUp de esa área de texto dirigido a través del texto en busca de http
2. Si encontrado agarrar toda la URL (¿Cómo se determina el final podría ser punto, coma, espacio, etc ..? .)
3. Asegúrese de que la URL no es ya una URL bit.ly
4. Validar la dirección URL (hacer una petición y asegúrese de que la respuesta HTTP no es un error, no bit.ly ya hacer esto?)
5. Si es válido, envíe la URL a la API de bit.ly y obtenga la respuesta
6. Re coloque la URL larga con la URL corta en el área de texto.

¿Pensamientos?

Answer 1

Aquí es un ejemplo de cómo obtener una URL acortada con API Bitly y 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); 
     } 
    ); 
} 

El siguiente código se podría utilizar para obtener una URL corta:

/* 
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

El bit sobre la marcha va a ser difícil de hacer confiable y rápido.

Las personas no escriben http la mayor parte del tiempo o incluso www.

El final, como dijiste, va a ser difícil determinar si la url contiene un espacio o algo peor, se ejecuta en la siguiente oración porque el usuario no puso un espacio.

¿Y si las personas necesitan cambiar la url después del hecho porque escribieron http://stakoverflow.com/ en lugar de https://stackoverflow.com/?

Creo que la mejor solución sería un botón "insertar URL acortada" en su editor de texto que permitiera a las personas hacer justamente eso. O bien, hazlo desde el lado del servidor cuando se realice la publicación.

Answer 3

¿Por qué no hacer una POST jQuery a la API Bit.ly? http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/

Answer 4

Encontré tu publicación mientras buscaba algo similar y finalmente escribí un plugin jQuery que proporciona (al menos parte de) lo que estás buscando.

Mi jQuery Url Shortener en Bitbucket

Es un plugin muy simple; No necesité acortar las direcciones URL del usuario, así que no tengo ninguna verificación de longitud o prueba de URL antes de acortarla, aunque no soy reacio a agregar ese tipo de características.

Pensé que podría serle útil.

En cuanto al reconocimiento de URL en su cuadro de texto, le sugiero que utilice un RegEx to match the url.

Answer 5

También podría generar una url corta con php y curl en el servidor, de esta manera no tiene que exponer su clave API en la página web:

<?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);  
?> 

Luego, en su página web el código debe ser algo como:

//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 
     } 
    }); 

Véase el bitly API para más detalles

Answer 6

supongo que la API de Bitly ha cambiado ligeramente. Ahora solo necesitas un token de acceso para solicitar una URL corta.

Tras la best practices, he creado el siguiente JavaScript-fragmento:

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); 
     } 
    ); 
},