Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 81
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    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://4.bp.blogspot.com/-5EiQyVV8RQw/W0cWvhABRlI/AAAAAAAAMBo/lUUVZpG42SAj64m5GQJ-iBFY5YYlHD_uQCLcBGAs/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://4.bp.blogspot.com/-5EiQyVV8RQw/W0cWvhABRlI/AAAAAAAAMBo/lUUVZpG42SAj64m5GQJ-iBFY5YYlHD_uQCLcBGAs/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

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

                    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://4.bp.blogspot.com/-5EiQyVV8RQw/W0cWvhABRlI/AAAAAAAAMBo/lUUVZpG42SAj64m5GQJ-iBFY5YYlHD_uQCLcBGAs/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
                      Bài đăng mới hơn Bài đăng cũ hơn