Hướng dẫn tạo script hiển thị các nhận xét gần đây

Vấn đề đã quá cũ kỹ này hôm nay mình lặp lại trong bài viết này theo hướng dẫn tạo script chứ không phải lấy sẵn từ các trang chia sẻ trên mạng. Nếu như bạn tìm kiếm trên mạng với từ khóa widget nhận xét gần đây cho Blogspot hay recent comments for Blogger cho ra rất nhiều kết quả nhưng mình thấy chung chung đó là các trang copy bài lẫn nhau và nội dung trong đoạn script thường được mã hóa và rất dài, mình cũng chẳng hiểu tại sao lại viết script dài đến thế mà lại mã hóa bản quyền nữa chứ 😏

Hôm nay mình chia sẻ cách tạo script hiển thị các nhận xét gần đây theo hướng rõ ràng hơn cho bạn hiểu theo 2 phương pháp sử dụng callback và sử dụng ajax. Trước hết yếu tố đầu tiên để lấy được dữ liệu hiển thị cần link feed của nhận xét có dạng: homepage-url/feeds/comments/summary

Ví dụ: https://www.vietblogdao.com/feeds/comments/summary

Khi lấy feed người ta thường thêm vào các yếu tố trong url feed

+ orderby=published : hiển thị thời gian xuất bản nhận xét
+ max-results=number: hiển thị tối đa số nhận xét ví dụ max-results=20, nếu không thêm mặc định sẽ là 25
+ start-index=number: hiển thị nhận xét bắt đầu từ số nào ví dụ start-index=21 hiển thị bắt đầu từ nhận xét 21 trở đi
+ alt=json-in-script: bắt buộc khi tạo script lấy dữ liệu

Ví dụ về sử dụng url feed lấy dữ liệu như sau:

- Hiển thị thời gian xuất bản nhận xét và tối đa 20 nhận xét

Copy

/feeds/comments/summary?orderby=published&max-results=20&alt=json-in-script

- Hiển thị thời gian xuất bản nhận xét và tối đa 20 nhận xét và bắt đầu từ nhận xét thứ 21

Copy

/feeds/comments/summary?orderby=published&max-results=20&start-index=21&alt=json-in-script

Sau đây là 2 phương pháp tạo script:

1. Sử dụng callback

url feed sử dụng callback có dạng:

Copy

<script src='/feeds/comments/summary?orderby=published&amp;max-results=20&amp;alt=json-in-script&amp;callback=rc'/>

Với đoạn callback=rc dùng gọi dữ liệu cho đoạn script tạo và hiển thị kết quả ví dụ:

Copy

<script>

//<![CDATA[

  function rc(json) { // json có thể thay bằng ví dụ data

    for (var i = 0; i < json.feed.entry.length; i++) { // yếu tố bắt buộc khi tạo script lấy dữ liệu feed cho số lượng nhiều

      for (var j = 0; j < json.feed.entry[i].link.length; j++) {

        if (json.feed.entry[i].link[j].rel == 'alternate') {

          var commentUrl = json.feed.entry[i].link[j].href; // link nhận xét

          break;

        }

      }

      var w  = ' thag ';

      var x = ', ';

      var t = json.feed.entry[i].published.$t; // thời gian xuất bản nhận xét

      var commentpublished = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4); // thời gian xuất bản nhận xét kết hợp với substring sắp xếp thời gian

      var noimagesrc = 'https://img1.blogblog.com/img/blank.gif'; // url ảnh mặc định của người nhận xét nếu người này không có ảnh tài khoản Google

      var replacesrc = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMF3hdmHsP6QjWajmZVorMGmM31uYhhJIqN9qIOI5HR1Y3LNU7clJd7tIH-kH7CB07bS41XaoIaAJbGiiH0z_KeXhBsRYodWMqbs5Ht_oEwUeq70JP7s1XbWNKixE8MuC6cbrFQCF1aJN/s1600/blogger-icon.png'; // url ảnh thay thế

      var commentimagesrc = json.feed.entry[i].author[0].gd$image.src.replace(noimagesrc,replacesrc); // url ảnh người nhận xét nếu không có ảnh thì sử dụng ảnh thay thế

      var commentUri = json.feed.entry[i].author[0].uri.$t // link hồ sơ của người nhận xét

      var commentAuthor = json.feed.entry[i].author[0].name.$t; // tên người nhận xét

      var commentContent = json.feed.entry[i].summary.$t; // nội dung nhận xét

      document.getElementById("rc").innerHTML += '<li><div class="rc_avatar"><img src='+commentimagesrc+' alt='+commentAuthor+' /></div><div class="rc_block"><div class="rc_header"><span class="rc_user"><a rel="nofollow" href='+commentUri+' title='+commentAuthor+' target="_blank">' +commentAuthor+ '</a></span><span class="rc_date"><a rel="nofollow" href='+commentUrl+'>'+commentpublished+'</a></span></div><p class="rc_content">' +commentContent+ '</p></div></li>'; // hiển thị kết quả đầu ra lấy id="rc"

    }

  }

//]]>

</script>

Viết đầy đủ đoạn script đặt trước </body>

Copy

<script>

//<![CDATA[

  function rc(json) {

    for (var i = 0; i < json.feed.entry.length; i++) {

      for (var j = 0; j < json.feed.entry[i].link.length; j++) {

        if (json.feed.entry[i].link[j].rel == 'alternate') {

          var commentUrl = json.feed.entry[i].link[j].href;

          break;

        }

      }

      var w = ' thag ';

      var x = ', ';

      var t = json.feed.entry[i].published.$t;

      var commentpublished = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4);

      var noimagesrc = 'https://img1.blogblog.com/img/blank.gif';

      var replacesrc = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMF3hdmHsP6QjWajmZVorMGmM31uYhhJIqN9qIOI5HR1Y3LNU7clJd7tIH-kH7CB07bS41XaoIaAJbGiiH0z_KeXhBsRYodWMqbs5Ht_oEwUeq70JP7s1XbWNKixE8MuC6cbrFQCF1aJN/s1600/blogger-icon.png';

      var commentimagesrc = json.feed.entry[i].author[0].gd$image.src.replace(noimagesrc, replacesrc);

      var commentUri = json.feed.entry[i].author[0].uri.$t

      var commentTitle = json.feed.entry[i].title.$t;

      var commentAuthor = json.feed.entry[i].author[0].name.$t;

      var commentContent = json.feed.entry[i].summary.$t;

      document.getElementById("rc").innerHTML += '<li><div class="rc_avatar"><img src=' + commentimagesrc + ' alt=' + commentAuthor + ' /></div><div class="rc_block"><div class="rc_header"><span class="rc_user"><a rel="nofollow" href=' + commentUri + ' title=' + commentAuthor + ' target="_blank">' + commentAuthor + '</a></span><span class="rc_date"><a rel="nofollow" href=' + commentUrl + '>' + commentpublished + '</a></span></div><p class="rc_content">' + commentContent + '</p></div></li>';

    }

  }

//]]>

</script>

<script src='/feeds/comments/summary?orderby=published&amp;max-results=20&amp;alt=json-in-script&amp;callback=rc'/>

Đặt <ul id="rc"></div> vào nơi muốn hiển thị các nhận xét gần đây ví dụ trong widget HTML/Javascript hay trong trang tĩnh

2. Sử dụng ajax

Cái này phải cần đến thư viện jquery mà đa số Blog nào cũng có trừ những Blog mặc định

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Phương pháp này không sử dụng url callback thay vào đó đưa vào trực tiếp trong script get url feed bằng ajax

Copy

<script>

//<![CDATA[

$.ajax({

  url: '/feeds/comments/summary',

  type: 'get',

  dataType: 'jsonp',

  data: { 'orderby': 'published', 'max-results': '20', alt: 'json-in-script' },

  success: function(data) {

    for (var i = 0; i < data.feed.entry.length; i++) {

      for (var j = 0; j < data.feed.entry[i].link.length; j++) {

        if (data.feed.entry[i].link[j].rel == 'alternate') {

          var commentUrl = data.feed.entry[i].link[j].href;

          break;

        }

      }

      var w = " thag ";

      var x = ", ";

      var t = data.feed.entry[i].published.$t;

      var commentpublished = t.substring(8, 10) + w + t.substring(5, 7) + x + t.substring(0, 4);

      var noimagesrc = 'https://img1.blogblog.com/img/blank.gif';

      var replacesrc = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMF3hdmHsP6QjWajmZVorMGmM31uYhhJIqN9qIOI5HR1Y3LNU7clJd7tIH-kH7CB07bS41XaoIaAJbGiiH0z_KeXhBsRYodWMqbs5Ht_oEwUeq70JP7s1XbWNKixE8MuC6cbrFQCF1aJN/s1600/blogger-icon.png';

      var commentimagesrc = data.feed.entry[i].author[0].gd$image.src.replace(noimagesrc, replacesrc);

      var commentUri = data.feed.entry[i].author[0].uri.$t

      var commentTitle = data.feed.entry[i].title.$t;

      var commentAuthor = data.feed.entry[i].author[0].name.$t;

      var commentContent = data.feed.entry[i].summary.$t;

      document.getElementById("rc").innerHTML += '<li><div class="rc_avatar"><img src=' + commentimagesrc + ' alt=' + commentAuthor + ' /></div><div class="rc_block"><div class="rc_header"><span class="rc_user"><a rel="nofollow" href=' + commentUri + ' title=' + commentAuthor + ' target="_blank">' + commentAuthor + '</a></span><span class="rc_date"><a rel="nofollow" href=' + commentUrl + '>' + commentpublished + '</a></span></div><p class="rc_content">' + commentContent + '</p></div></li>';

    }

  }

});

//]]>

</script>

Nội dung trong đoạn script không thay đổi so với phương pháp sử dụng callback chỉ là đưa url feed trực tiếp vào script thôi. Bạn thay 20 bằng số nhận xét muốn hiển thị và vẫn đặt script trước </body> sau đó đặt <ul id="rc"></div> vào nơi muốn hiển thị.

Như vậy mình đã vừa hướng dẫn tạo script hiển thị các nhận xét gần đây bằng 2 phương pháp cơ bản sử dụng callback trong Javascript và sử dụng ajax kết hợp với Jquery. Đọc xong bài này hi vọng các bạn đã biết cách làm không phải lấy từ các trang mạng khác. Chấm hết bài!!!

Nội dung chính