javascript - jQuery on the fly URL shortener

url-rewriting bit.ly

Question

Estoy buscando un acortador de URL sobre la marcha de manera muy parecida a cómo 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, ejecute el texto buscando http
2. Si lo encuentra, capture la URL completa (¿cómo puedo determinar el final? Podría ser punto, coma, espacio, etc.)
3. Asegúrese de que la URL no sea ya una URL bit.ly
4. Valide la URL (realice una solicitud y asegúrese de que la respuesta http no sea un error, ¿bit.ly ya hace esto?)
5. Si es válido, envíe la url a la API de bit.ly y obtenga la respuesta
6. Reemplace la URL larga con la URL corta en el área de texto.

¿Pensamientos?

Answer 1

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

Answer 2

Aquí hay un ejemplo de cómo obtener una URL abreviada con Bitly API 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 podría usarse 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 3

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

Mi jQuery Url Shortener en Bitbucket

Es un plugin muy simple; No necesitaba acortar las direcciones URL del usuario, por lo que no tengo ninguna comprobación de longitud o prueba de URL antes de acortarla, aunque no soy reacio a agregar ese tipo de funciones.

Sólo pensé que podría resultarte útil.

En cuanto al reconocimiento de URL en su cuadro de texto, sugeriría usar un RegEx para que coincida con la URL .

Answer 4

La broca sobre la marcha será difícil de hacer confiable y veloz.

La gente no escribe http la mayor parte del tiempo o incluso www.

El final, como dijiste, será difícil de determinar si la URL contiene un espacio o, peor aún, se ejecuta en la siguiente oración porque el usuario no colocó un espacio.

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

Creo que la mejor solución sería un botón "insertar url acortada" en su editor de texto que permita a las personas hacer eso. O, hazlo del lado del servidor cuando se haga la publicación.

Answer 5

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

Siguiendo las mejores prácticas , creé el siguiente fragmento de código solo para Javascript:

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 6

También puede 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);    
?>

Entonces en tu página web el código debería 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
        }
    });

Ver la API bitly para más detalles