Hiding SharePoint 2010 Blog Comments

The OOTB Blog provides commenting feature. One of my client asked me to remove the commenting feature from Blog.

Below is snapshot of OOTB SharePoint 2010 Blog:

If you have similar requirement then this post will help you. To hide comments, you have do following:

1. You have to remove Comments Listing web-part (that is easy!!!)
2. You have to remove Comments Form web-part (that is easy!!!)
3. Hiding comments links (this is one of the requirement from my client) using jQuery/javascript OR blog.xsl

Before writing javascript, I did some research/investigation that how comments are rendered. I found an blog.xsl located at /_layouts/XSL/blog.xsl

I don't want to touch the OOTB blog.xsl as it would apply to every site collection. So I decided to write javascript function to hide comments.

From above picture, you can see the div for comments link. I need to find that div and find the last SPAN which contains comments link.

I googled and found the javascript to get that elements by class. Once I got that div, I iterated and scan the word 'comments' and made that span hidden.

Below code will grab the div element for class 'ms-PostFooter'

function getElementsByClass(theClass) {
            var allPageTags = new Array();
            allPageTags = document.getElementsByTagName("*");

            var Elements = new Array();
            var n = 0;
            for (i = 0; i < allPageTags.length; i++) {
                if (allPageTags[i].className == theClass) {
                    Elements[n] = allPageTags[i];
                    n++;
                }
            }

            return Elements;
        }

If you pay attention to above html source code, you will find there are two divs for class = 'ms-PostFooter', so we need to skip the first one and work on second div.

function hideComments() {
 var desiredElements = getElementsByClass('ms-PostFooter');            
 if (desiredElements.length > 0) {  
  for (var i = 0; i < desiredElements.length; i++) {
   var desiredElement = desiredElements[i];   
   if (desiredElement.innerHTML.indexOf('Comment(s)', 0) >= 0) {    
    var spans = desiredElement.getElementsByTagName("SPAN");
    for (var j = 0; j < spans.length; j++) {
     if( (spans[j].innerHTML.indexOf('comment(s)', 0) >= 0) ||
       (spans[j].innerHTML.indexOf('Comment(s)', 0) >= 0) ) {
      spans[j].style.visibility = 'hidden';
     }
     
     if( spans[j].innerHTML.indexOf('Number of Comments', 0) >= 0 )  {
      spans[j].style.visibility = 'hidden';
     }
    }
   }
  }
 } 
}  

Now, you have got codes. Copy all javascript code to a file and place it to /_layouts/YourProjectName/Js/BlogCommentsHider.js Now add a content editor web-part on page and write below markup:

<script src="/_layouts/YourProjectName/Js/BlogCommentsHider.js" type="text/javascript"></script><script language="javascript">


_spBodyOnLoadFunctionNames.push("hideComments");</script>

That's it.