web-dev-qa-db-ja.com

jQueryオンザフライURL短縮サービス

Tweetdeckの仕組みによく似たオンザフライのURL短縮サービスを探しています。私は、URLを受け取り、ボタンが押されたときにbit.lyなどの短縮サービスを介して実行する多くのjQueryおよび一般的なjavascriptプラグインを見つけました。しかし、私はその場でそれを行うものを見つけることができませんでした。私の最初の質問は、これはすでにどこかに存在するのかということです。次に、そうでない場合、テキストボックス内で短縮する必要があるURLを認識するための最良の方法は何でしょうか。私の考え：

  1. そのテキスト領域のonKeyUpで、httpを探してテキストを実行します
  2. 見つかった場合は、URL全体を取得します（終了を判別するにはどうすればよいですか？ピリオド、コンマ、スペースなどがあります...）
  3. URLがまだbit.lyURLではないことを確認してください
  4. URLを検証します（リクエストを行い、http応答がエラーではないことを確認します。bit.lyはすでにこれを行っていますか？）
  5. 有効な場合は、URLをbit.lyのAPIに送信して、応答を取得します
  6. テキスト領域で長いURLを短いURLに置き換えます。

考え？

javascriptjqueryurl-rewritingbit.lyurl-shortener
18
Jason

BitlyAPIとjQueryを使用して短縮URLを取得する方法の例を次に示します。

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

次のコードを使用して短縮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);
});
18
Maksym Kozlenko

BitlyのAPIが少し変わったと思います。短いURLをリクエストするために本当に必要なのはアクセストークンだけです。

ベストプラクティス に従って、次の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);
        }
    );
},
8
Pepijn Olivier

オンザフライビットは、信頼性が高くスピーディーにするのが難しいでしょう。

ほとんどの場合、httpやwwwを入力することはありません。

あなたが言ったように、URLにスペースが含まれているかどうかを判断するのは難しいでしょうが、ユーザーがスペースを入れなかったため、次の文にぶつかります。

そして、 https://stackoverflow.com/ の代わりに http://stakoverflow.com/ と入力したために、事後にURLを変更する必要がある場合はどうなりますか？

最善の解決策は、テキストエディタの「短縮URLを挿入」ボタンで、人々がそれを実行できるようにすることだと思います。または、投稿が行われたときにサーバー側で実行します。

4
greggreg

サーバー上でphpとcurlを使用して短いURLを生成することもできます。これにより、WebページでAPIキーを公開する必要がなくなります。

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

次に、Webページのコードは次のようになります。

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

詳細については、 bitly API を参照してください。

4
abudaan

JQuery POST to the Bit.ly API？ http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using- the-bitly-api /

0
jocull

似たようなものを探しているときにあなたの投稿を見つけ、最終的にはあなたが探しているもの（の少なくとも一部）を提供するjQueryプラグインを作成しました。

私の jQuery Url Shortener Bitbucket

これは非常に単純なプラグインです。ユーザーのURLを短くする必要がなかったので、短くする前に長さのチェックやURLテストを行う必要はありませんが、これらのタイプの機能を追加することは嫌いではありません。

あなたがそれが役に立つかもしれないと思っただけです。

テキストボックス内のURLの認識については、 RLに一致する正規表現 を使用することをお勧めします。

0
Jiaaro