CODEWITHSUNDEEP
javascriptjqueryhtmlcssfacebook
Feđa
Feđa

Reputation: 49

Hide div if facebook comments are 0

I'm using Facebook social plugin and everything works fine. I want to hide the div of my "chat bubble"

chat bubble

if

<span class="fb-comments-count" data-href="[article URL]"></span>

is zero for each article loaded on my homepage and ofcourse keep the not zero ones. Also additional information, I'm using a "show more" button to load other articles using ajax as well.

I already tried using http://graph.facebook.com/ to get the information whether the address contains comments and it worked, but because I needed to ping http://graph.facebook.com/ for each article, my page loading times was abysmal so I removed that.

Upvotes: 0

Views: 294

Answers (2)

Alok Patel
Alok Patel

Reputation: 8022

Create a function iterate over span having "fb-comments-count" class. And find if the text of this span is zero or not. If it's zero, get the parent of this class(Article DIV) and hide the bubble DIV using hide() method.

https://api.jquery.com/each/
//for iterating .fb-comments-count

http://api.jquery.com/text/
//for getting get count from span

https://api.jquery.com/parent/
//to get the parent DIV by class or ID of span

http://api.jquery.com/hide/
//to hide the perticular div by class or ID.

Call this function every time you fetch the articles using AJAX.

e.g.

function yourCustomFunction() {
    $('span.fb-comments-count').each(function(index) {
         var count=$(this).text();
         if(count==0) {
              var parentDiv=$(this).parent('article.yourParentDivClass');

              parentDiv.find('.bubbleDiv').hide();
         }
    });
}

Upvotes: 1

Jainil
Jainil

Reputation: 1496

The span is given the class 'fb_comments_count_zero' if there are no comments, so you can set that class to be display:none in your styleshet

Upvotes: 0

Related Questions