How to Show Recent Comments in your Blog? Widget Blogger Script

How to Display Recent Comments with Pagination on Your Blogger Blog - Comments Widget Script For Blogger

In this tutorial, we'll guide you through displaying recent comments with pagination on your Blogger blog. We'll also show you how to enhance the comment section by adding features like post titles, author names, and emojis. All of this is done with a simple JavaScript script integrated into your Blogger template.

How to add Custom CSS Style to Recent Comments

Step 1: Set Up Your Blog

Before adding the script, ensure that your Blogger blog is set up and ready to go. If you haven't already, create a blog on Blogger by visiting Blogger.

Step 2: Log in to Your Blogger Dashboard, Select Your Blog > Go to "Layout" and Click the "Add a Gadget"

Once you’re logged in, follow these steps:

1. Log in to your Blogger account and select your blog.
2. Navigate to the Layout section in the sidebar.
3. Click on "Add a Gadget" where you want the comment section to appear (e.g., in the Sidebar or Footer).
4. In the pop-up window, scroll down and click on the "HTML/JavaScript" option.

Step 3: Add the Script to the HTML/JavaScript Gadget

In the HTML/JavaScript window, paste the following code:

      
        <div id="recent-comments"></div>
        <div id="comment-pagination"></div>

        <script>
          // Settings (same as before)
          var showPostTitle = true;
          var showAuthorName = true;
          var showDate = true;
          var showAvatar = true;
          var PrevNextButtons = true;
          var maxComments = 5;
          var maxCommentLength = 100;
          var showViewButton = true;

          var emojiList = ["😃", "😊", "😂", "🤩", "😎", "😍", "🤔", "😇", "🤗", "😜", "😬", "🤓", "😏", "🙃", "🤠"];

          var allComments = [];
          var currentPage = 0;

          function getRandomEmoji() {
            return emojiList[Math.floor(Math.random() * emojiList.length)];
          }

          function showrecentcomments(json) {
            allComments = json.feed.entry || [];
            renderComments();
          }

          function renderComments() {
            var output = "";
            var start = currentPage * maxComments;
            var end = Math.min(start + maxComments, allComments.length);

            if (allComments.length === 0) {
              document.getElementById("recent-comments").innerHTML = "<p>No recent comments.</p>";
              return;
            }

            for (var i = start; i < end; i++) {
              var comment = allComments[i];
              var content = comment.content ? comment.content.$t : "No content";
              var author = comment.author[0].name.$t;
              var postTitle = "Untitled Post";
              var postLink = "#";
              var publishedDate = new Date(comment.published.$t).toLocaleDateString();

              // Extract the post link
              for (var j = 0; j < comment.link.length; j++) {
                if (comment.link[j].rel === "alternate") {
                  postLink = comment.link[j].href;
                  break;
                }
              }

              // Extract post title from URL
              var urlParts = postLink.split("/");
              if (urlParts.length > 5) {
                var slug = urlParts[5].split(".html")[0];
                postTitle = slug.replace(/-/g, " ");
              }

              // Limit comment length
              if (maxCommentLength > 0 && content.length > maxCommentLength) {
                content = content.substring(0, maxCommentLength) + "...";
              }

              var randomEmoji = getRandomEmoji();

              output += <div class='comment-item'>
                          <div class="avatar">${randomEmoji}</div>
                          <div>
                            ${showPostTitle ? <strong><a href="${postLink}" target="_blank">${postTitle}</a></strong><br> : ""}
                            <p>${content} 
                            ${showViewButton ? <a href="${postLink}" class="view-button" target="_blank">View</a> : ""}
                            </p>
                            ${showAuthorName ? <small><b>By:</b> ${author}</small><br> : ""}
                            ${showDate ? <small><b>Date:</b> ${publishedDate}</small> : ""}
                          </div>
                        </div>;
            }

            document.getElementById("recent-comments").innerHTML = output;
            updatePaginationButtons();
          }

          function updatePaginationButtons() {
            if (!PrevNextButtons) return;

            var paginationHtml = "";
            if (currentPage > 0) {
              paginationHtml += <button onclick="prevPage()">« Previous</button>;
            }
            if ((currentPage + 1) * maxComments < allComments.length) {
              paginationHtml += <button onclick="nextPage()">Next »</button>;
            }

            document.getElementById("comment-pagination").innerHTML = paginationHtml;
          }

          function prevPage() {
            if (currentPage > 0) {
              currentPage--;
              renderComments();
            }
          }

          function nextPage() {
            if ((currentPage + 1) * maxComments < allComments.length) {
              currentPage++;
              renderComments();
            }
          }
        </script>

        <script src="YOUR-BLOG.COM//feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
      
    

Make sure to replace YOUR-BLOG.COM with your actual blog's URL.

Step 4: Save and Test

Once you’ve added the script, click Save to add the gadget to your layout. Then, visit your blog’s page to see the recent comments displayed with pagination. If you encounter any issues, make sure the code is properly placed and that the feed URL is correct.

Alternative Method: Adding the Script Directly to the Blogger Template

If you prefer to add the script directly to your template, follow these steps:

1. Log in to your Blogger account and open your blog.
2. Go to the Theme section.
3. Click on Edit HTML and locate the closing </body> tag.
4. Paste the script before the closing </body> tag.

Make sure to use this method if you prefer working with raw HTML code and don’t want to use the gadget method.

Save and Test

Once you’ve added and customized the script, save your changes. Visit your blog's page, and you should see the recent comments displayed with pagination. If you encounter any issues, make sure the code is properly placed and that the feed URL is correct.