Trình rút gọn URL khi đang chạy trên trang web

Question

Tôi đang tìm kiếm trình rút ngắn URL nhanh chóng giống như cách hoạt động của tweetdeck. Tôi đã tìm thấy nhiều jQuery và plugin javascript chung có một url và chạy nó thông qua một dịch vụ rút ngắn như bit.ly khi một nút được nhấn. Tuy nhiên, tôi đã không thể tìm thấy một trong những hiện nó trên bay. Câu hỏi đầu tiên của tôi là điều này đã tồn tại ở đâu đó? Thứ hai, nếu không, thì cách tốt nhất để nhận ra một URL cần được rút ngắn bên trong một hộp văn bản là gì? suy nghĩ của tôi:

1. On onKeyUp đó vùng văn bản chạy qua các văn bản tìm kiếm http
2. Nếu tìm thấy lấy toàn bộ URL (làm cách nào để xác định cuối cùng có thể là khoảng thời gian, dấu phẩy, không gian, vv ..? .)
3. hãy chắc chắn rằng các URL chưa được một URL bit.ly
4. Validate URL (tạo ra một yêu cầu và đảm bảo đáp ứng http không phải là một lỗi, không bit.ly đã làm điều này?)
5. Nếu hợp lệ, hãy gửi url tới API của bit.ly và nhận phản hồi
6. Re đặt URL dài bằng URL ngắn trong vùng văn bản.

Suy nghĩ?

Answer 1

Dưới đây là một ví dụ làm thế nào để có được một URL rút ngắn với Bitly API và 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); 
     } 
    ); 
} 

Các mã sau đây có thể được sử dụng để có được một URL ngắn:

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

Bit đang phát sẽ khó thực hiện đáng tin cậy và nhanh chóng.

Mọi người sẽ không nhập hầu hết thời gian hoặc thậm chí là www.

Kết thúc, như bạn đã nói, sẽ rất khó để xác định xem url có chứa dấu cách hay không, chạy vào câu tiếp theo vì người dùng không đặt vào khoảng trống.

Và điều gì sẽ xảy ra nếu mọi người cần thay đổi url sau khi thực tế vì họ đã nhập http://stakoverflow.com/ thay vì https://stackoverflow.com/?

Tôi nghĩ giải pháp tốt nhất sẽ là nút "chèn url rút gọn" trên trình chỉnh sửa văn bản cho phép mọi người làm điều đó. Hoặc, thực hiện phía máy chủ khi bài đăng được tạo.

Answer 3

Tại sao không thực hiện một POST jQuery đối với API Bit.ly? http://blog.themeforest.net/tutorials/creating-an-ajax-web-app-using-the-bitly-api/

Answer 4

Tôi đã tìm thấy bài đăng của bạn trong khi tìm kiếm nội dung tương tự và cuối cùng chỉ viết một plugin jQuery cung cấp (ít nhất một phần) những gì bạn đang tìm kiếm.

My jQuery Url Shortener trên Bitbucket

Đó là một plugin rất đơn giản; Tôi không cần phải rút ngắn url của người dùng vì vậy tôi không có bất kỳ kiểm tra độ dài hoặc kiểm tra url trước khi rút ngắn nó, mặc dù tôi không muốn thêm các loại tính năng đó.

Chỉ nghĩ rằng bạn có thể thấy nó hữu ích.

Để nhận dạng URL trong hộp văn bản của bạn, tôi khuyên bạn nên sử dụng RegEx to match the url.

Answer 5

Bạn cũng có thể tạo ra một url ngắn với php và curl trên máy chủ, theo cách này bạn không cần phải để lộ khóa API của mình trong trang 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);  
?> 

Sau đó, trong trang web của bạn mã nên được một cái gì đó như:

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

Xem bitly API để biết thêm chi tiết

Answer 6

Tôi đoán API của Bitly đã thay đổi một chút. Bây giờ bạn chỉ thực sự cần một mã thông báo truy cập để yêu cầu một URL ngắn.

Tiếp theo best practices, tôi đã tạo ra sau javascript chỉ đoạn mã:

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