Chèn khung tự động rút gọn link bit.ly cho từng bài viết

Nếu bạn sử dụng Twitter chắc hẳn cũng biết rằng mọi đường link bạn đưa lên đều được tự động rút gọn dưới dạng bit.ly và nếu bạn phát triển blog/website trên nền tảng WordPress thì bạn không cần quan tâm đến bài viết này bởi họ có sẵn plugin để bạn thêm chức năng tự động rút gọn tất cả đường link bài viết trên blog. Nhưng đối với blog thì không như thế, bạn cần phải tự chèn mã nguồn này vào template và mình sẽ hướng dẫn bạn thực hiện công việc này.

Demo

Tại sao rút gọn link với bit.ly

Nếu bạn đưa những cái link khá dài, nó chiếm rất nhiều về không gian và tạo cảm giác không thân thiện cho người xem. Thay vì làm điều đó, bạn chỉ nên sử dụng bit.ly, và nó làm cho link bài viết của bạn gọn gàng và chiếm không gian ít hơn, làm cho người xem dễ dàng thấy chúng. Điều này cũng rất hữu ích trên Twitter. Khi sử dụng bit.ly nó sẽ giúp bạn phân tích và thống kê được số liệu từ link bit.ly. Làm cho bạn dễ dàng quản lý lượng truy cập website từ bit.ly. - Tham khảo trên internet

Chèn code vào template

Bạn chèn code bên dưới vào vị trí muốn hiển thị khung chứa link rút gọn cho bài viết trong template của mình và lưu lại

<script type=”text/javascript” charset=”utf-8″ src=”http://bit.ly/javascript-api.js?version=latest&amp;login=bitlyapidemo&amp;apiKey=R_0da49e0a9118ff35f52f629d2d71bf07″></script>
<script type=”text/javascript” charset=”utf-8″>
BitlyClient.addPageLoadEvent(function(){
BitlyCB.myShortenCallback = function(data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result['longUrl'] = r;
break;
}
document.getElementById(“shorturl”).innerHTML = “URL bài viết: &lt;input type=’text’ value=’” result['shortUrl'] “‘ name=’bitlyurl’/&gt;”;
}
BitlyClient.shorten(document.location, ‘BitlyCB.myShortenCallback’);
});
</script>

• Trong đoạn code trên mình có đánh dấu 2 đoạn. Ở đoạn code được đánh dấu màu xanh bên dưới bạn có thể thay thế nội dung cho phù hợp với blog của mình.
• Đoạn code được đánh dấu màu vàng là API của bạn, mình sẽ giải thích ngay bên dưới tại sao lại có dãy ký tự này

Thêm style cho khung chứa link rút gọn

Chèn đoạn CSS bên dưới trước thẻ ]]></b:skin>

form#shorturl {color:#066;font-size:11px}
#shorturl input {color:#066;border:1px solid #CCC;padding:1px 5px;}

Kiểm tra lượt click từ bitly:

Nếu bạn muốn kiểm tra xem có bao nhiêu lượt truy cập từ link rút gọn của bitly thì đoạn code API được đánh dấu màu vàng phía trên quyết định việc này, hoặc bạn có thể bỏ qua nếu không quan tâm đến có bao nhiêu lượt click.
Vậy làm cách nào để lấy code API? Trước hết bạn phải vào https://bitly.com sau đó tạo muộn tài khoản, bạn có thể tạo tài khoản bằng email hay Facebook, Twitter đều được. Sau đấy bạn click vào https://bitly.com/a/your_api_key để lấy API và thay thế bằng đoạn code vàng phia trên.
Muốn kiểm tra lượt truy cập từ link rút gọn bạn chỉ việc đăng nhập vào https://bitly.com, tất cả đường link và lượt truy cập sẽ hiển thị ngay trên trang này