Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 1/12/13.

Lượt xem: 6,915

  1. TrollVL Thành viên cấp 2

    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.
    [​IMG]
    Demo

    Tại sao nên 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
    Code:
    <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
    Híc, do trên diễn đàn không có chức năng tô màu đánh dấu cho code nên muốn rõ hơn bạn vào xem bài viết gốc tại đâ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>
    Code:
    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

    ...
    An Thị Gì Gì Đấy thích bài viết này

Ủng hộ diễn đàn