Tự động rút gọn liên kết bài viết trên Blogspot với bit.ly

Demo mọi người xem tại đây dưới các bài viết, tuy nhiên mình đã thêm chức năng tự copy khi click vào nên có hơi khác chút, cái này mọi người tự tùy biến

Tạo tài khoản bit.ly và lấy Access Token

• Đầu tiên, truy cập vào trang web bit.ly và đăng nhập vào tài khoản của bạn hoặc tạo một tài khoản mới nếu bạn chưa có. Phần này dễ mình không hướng dẫn
• Sau khi đăng nhập thành công, hãy tạo một Access Token tại đây. Điều này cung cấp quyền truy cập để gửi yêu cầu rút gọn liên kết thông qua mã API.

Chuẩn bị mã JavaScript

• Trên Blogspot của bạn, bạn cần sử dụng mã JavaScript để gửi yêu cầu rút gọn liên kết từ bit.ly API.
• Dưới đây là một đoạn mã JavaScript để thực hiện chức năng này:

<script>
// <![CDATA[
// Cấu hình thông tin API và Access Token của bit.ly
var accessToken = 'YOUR_ACCESS_TOKEN';
var apiUrl = 'https://api-ssl.bitly.com/v4/shorten';

// Hàm để gửi yêu cầu API và rút gọn liên kết
function shortenUrl(longUrl) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', apiUrl, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      var shortUrl = response.id;
      
      // Chèn liên kết rút gọn vào trang hiển thị bài viết
      var linkElement = document.getElementById('myInput');
      linkElement.value = shortUrl;
    }
  };
  
  var data = JSON.stringify({ "long_url": longUrl });
  xhr.send(data);
}

// Gọi hàm shortenUrl ngay sau khi khai báo
var longUrl = window.location.href;
shortenUrl(longUrl);
//]]>
</script>

Lưu ý: thay YOUR_ACCESS_TOKEN bằng token bạn đã lấy ở bước trên

Thêm phần tử HTML để hiển thị liên kết rút gọn

• Tại vị trí mong muốn hiển thị, hãy thêm một phần tử HTML để hiển thị liên kết rút gọn từ bit.ly.
• Bạn có thể sử dụng phần tử '<a>' để hiển thị liên kết rút gọn như sau:

<a id="short-link" href="" target="_blank"></a>

Hy vọng rằng hướng dẫn này đã giúp bạn hiểu cách tự động rút gọn liên kết bài viết trên Blogspot bằng cách sử dụng bit.ly. Nhờ tích hợp bit.ly vào trang web của bạn, bạn có thể giảm đường dẫn dài, tăng tính chuyên nghiệp và cung cấp trải nghiệm tốt hơn cho người đọc. Hãy thử áp dụng các bước trong hướng dẫn này để cải thiện việc chia sẻ liên kết trên Blogspot của bạn.