Sunday, February 26, 2012

Blogger widget: Recent comments by Readers


At the bottom of this page, you can see the live demo of the Recent Comments by Readers. It uses the Blogger Feed of the comments. (The URLs of Blogger Feed can be found here: http://support.google.com/blogger/bin/answer.py?hl=en&answer=97933.) I use the response in JSON format, so the URI is /feeds/comments/default?alt=json&callback=blogRecentComments12.

We need to implement a Javascript function blogRecentComments12(). This widget only shows the comments from the readers and hides the author's own comments. So in the function, we filter the name of the blog author. If you want to use the following code, you need to change the variable filteredAuthor12.

<script type="text/javascript">
var filteredAuthor12 = "YourName";
var numOfComments12 = 10;
</script>

<div style="text-transform:none;"><ul id="blogRecentCommentsElmt12"></ul></div>

<div style="font-size:80%;"><a href="http://www.toptip.ca">Recent Comments Widget</a></div>

<script type="text/javascript">

function blogRecentComments12(root)
{
   var elmt = document.getElementById("blogRecentCommentsElmt12");
   if (!elmt)
      return;

   var num = 0;

   var feed = root.feed;

   if (feed.entry.length > 0)
   {
      for (var i = 0; i < feed.entry.length; i++)
      {
         var entry = feed.entry[i];

         var title = entry.title.$t;

         title = title.replace(/&amp;/g, "&")
                         .replace(/&quot;/g, '"')
                         .replace(/&#39;/g, "'")
                         .replace(/&lt;/g, "<")
                         .replace(/&gt;/g, ">");

         var author = null;
         var authorUri = null;

         if (entry.author.length > 0)
         {
            author = entry.author[0].name.$t;
           
            if (entry.author[0].uri)
               authorUri = entry.author[0].uri.$t;

            if (author == filteredAuthor12)
               continue;
         }

         for (var j = 0; j < entry.link.length; j++)
         {
            if (entry.link[j].rel == "alternate")
            {
               var url = entry.link[j].href;

               if (url && url.length > 0 && title && title.length > 0)
               {
                  var liE = document.createElement("li");

                  var a1E = document.createElement("a");
                  a1E.href = url;
                  a1E.textContent = title;

                  liE.appendChild(a1E);

                  var txtE = document.createTextNode(" by ");
                  liE.appendChild(txtE);

                  if (author && author.length > 0)
                  {
                     var a2E = document.createElement("a");

                     if (authorUri)
                        a2E.href = authorUri;
                    
                     a2E.textContent = author;

                     liE.appendChild(a2E);
                  }

                  elmt.appendChild(liE);

                  num++;

                  if (num >= numOfComments12)
                     return;
               }

               break;
            }
         }
      }
   }
}

</script>

<br /><br />

<script src="/feeds/comments/default?alt=json&callback=blogRecentComments12">
</script>

No comments:

 
Get This <