Hiển thị thông báo khi có bình luận mới

Zalo 0971539681 Tư vấn & Hỗ trợ

Chia sẻ code Hiển thị thông báo khi có bình luận mới cho Blogger, code hiển thị thông báo khi có bình luận mới trên Blogspot.

Code viết bởi Hòa Trần Blogger, các Blogger có share lại thì cho mình xin link luôn ngồn. 


Tất cả các code mình không muốn dùng Apikey vi nó rắc rối khi các bạn Setup, nên dùng thẳng URL của Blog.

Hiển thị thông báo khi có bình luận mới

Cách hoạt động: Code sẽ hiển thị và hoạt động trong 24h gần nhất, nếu có nhận xét sẽ thông báo tổng số nhận xét đã bình luận trên Blog của các bạn, qua 24h tức là 1 ngày sẽ đếm lại. Ngược lại nếu trong ngày đó không có nhận xét nào thì thông báo tự động ẩn đi, cho đến khi có nhận xét thì nó mới hiển thị.


Cách cài đặt: Copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong mà không cần phải setup gì thêm.

Nếu chưa có trang hiển thị toàn bộ nhận xét thì xem bài này: Share code load toàn bộ comment blogger [Loadmore]


<style>
/*<![CDATA[*/
@keyframes iconSkew{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}.popup-hoablogger{position:fixed;bottom:70px;left:17px;margin:0;z-index:99;top:auto!important}.popup-hoablogger .icon{display:block;position:relative;z-index:4;height:48px;width:48px;text-align:center;border-radius:50%;border:1px solid #33beb3;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,0.15);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;animation:iconSkew 2s infinite}.popup-hoablogger .icon svg{fill:#33beb3;width:20px;height:20px;transition:opacity 0.35s ease-in-out,-webkit-transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out,transform 0.35s ease-in-out;transition:opacity 0.35s ease-in-out,transform 0.35s ease-in-out,-webkit-transform 0.35s ease-in-out;animation:iconSkew 1s infinite ease-out;min-height:-webkit-fill-available}.bubble{width:20px;height:20px;text-align:center;line-height:20px;position:absolute;top:0;right:-3px;font-size:16px;font-weight:bold;cursor:pointer;color:#fff;border-radius:50%;animation:pulse 1s infinite;background:#33beb3;z-index:999}
/*]]>*/
</style>
<!-- HTML -->
<div class='popup-hoablogger' id='commentPopup' style='display:none'>
<div class='bubble' id='commentBubble'>0</div>
<a class='icon' href='/p/binh-luan.html' title='Bình luận mới'>
<svg height='1em' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'>
<path d='M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z'></path>
</svg>
</a>
</div>
<!-- Include Axios from CDN -->
<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'></script>
<!-- JavaScript -->
<script>
  //<![CDATA[
  const blogFeedUrl = '/feeds/comments/default';
  let commentCount = 0;

  function updateCommentCount(newCount) {
    commentCount = newCount;
    document.getElementById('commentBubble').innerText = commentCount;
    const commentPopup = document.getElementById('commentPopup');
    commentPopup.style.display = commentCount > 0 ? 'block' : 'none';
  }
  async function getNewCommentsFromFeed() {
    try {
      const response = await fetch(blogFeedUrl);
      const xmlText = await response.text();
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
      const comments = xmlDoc.querySelectorAll('entry');
      const currentDate = new Date();
      if (comments.length > 0) {
        const newComments = Array.from(comments).filter(comment => {
          const updatedElement = comment.querySelector('updated');
          if (updatedElement) {
            const updatedDate = new Date(updatedElement.textContent);
            // Kiểm tra xem bình luận có được cập nhật trong khoảng thời gian gần đây không (24 giờ trước)
            return updatedDate > currentDate - 24 * 60 * 60 * 1000;
          }
          return false;
        });
        if (newComments.length > 0) {
          // Cập nhật số lượng bình luận mới
          updateCommentCount(newComments.length);
        }
      }
    } catch (error) {
      console.error('Đã xảy ra lỗi:', error);
    }
  }
  // Gọi hàm để kiểm tra và hiển thị thông báo
  getNewCommentsFromFeed();
  //]]>
</script>

Nếu không dùng thư viện axios.min.js bạn xóa đi cũng được nhé, không ảnh hưởng gì

<script src='https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'/>


Thư viện axios.min.js là một thư viện JavaScript được sử dụng để thực hiện các yêu cầu HTTP từ trình duyệt hoặc Node.js. Axios được thiết kế để làm cho việc làm việc với HTTP trở nên dễ dàng và linh hoạt.

Các chức năng chính của Axios bao gồm:

Thực hiện Yêu cầu HTTP: Axios cho phép bạn thực hiện các loại yêu cầu HTTP như GET, POST, PUT, DELETE, và nhiều loại yêu cầu khác.

Xử lý Yêu cầu và Phản hồi dưới dạng Promise: Axios sử dụng Promise để xử lý yêu cầu và phản hồi, giúp làm cho mã nguồn của bạn trở nên dễ đọc và hiểu hơn, đặc biệt là trong các trường hợp sử dụng bất đồng bộ.

Hỗ trợ Gửi JSON dễ dàng: Axios giúp bạn dễ dàng gửi và nhận dữ liệu dưới dạng JSON thông qua yêu cầu HTTP.

Xử lý Lỗi một cách Dễ dàng: Axios có cơ chế xử lý lỗi thông minh và linh hoạt, giúp bạn dễ dàng xử lý lỗi trong quá trình thực hiện yêu cầu.

Chức năng Interceptors: Axios hỗ trợ interceptors, cho phép bạn can thiệp vào quá trình gửi yêu cầu hoặc nhận phản hồi để thực hiện các thao tác xử lý trước hoặc sau mỗi yêu cầu.

Hỗ trợ Các Môi trường khác nhau: Axios có thể được sử dụng trong nhiều môi trường khác nhau như trình duyệt và Node.js, giúp tạo ra mã nguồn có thể chia sẻ giữa frontend và backend.

Sử dụng Axios là một cách tiện lợi để thực hiện các yêu cầu HTTP trong ứng dụng web của bạn, và nó đã trở thành một trong những thư viện phổ biến nhất cho mục đích này.

Bài liên quan ngẫu nhiên

Nhận xét

Đăng nhận xét

6 nhận xét
Hiển thị
Contact Me on Zalo