refresh div containing facebook like button

Question

My like button code goes as follows:

<div class="like-btn">                                                                       

<fb:like href="http://www.example-url.com" layout="box_count" show_faces="true" width="450" action="like" colorscheme="light" ></fb:like>

</div>

My problem is that, I do not want the comment box to be displayed after clicking like. I'm using XFBML version of Like Button for tracking purpose, so comment box is inevitable.
I have multiple like buttons in the page with variable href's.
I have read all the questions/solutions regarding removing the comment box in this scenario, but none of them work. I'm hoping that Refreshing the contents of <div class="like-btn"> would help.

Could someone please help me figure out how I should tackle this problem?

Here is my attempt so far:

//copying content of the div since the href is retrieved via php and is variable
var content = $('.like-btn').html();
$('.like-btn').empty();
$('.like-btn').html(content);

UPDATE

The approach shown in the accepted answer works perfectly for the default like button (XFBML/HTML5) but not for the box-count styled.

Answer 1

With the way you are currently using it, try adding this to the page:

<style type="text/css">
.like-btn {
    height: 25px;
    overflow: hidden;
}
</style>

If that doesn't work, use the HTML5 Code for displaying the FB Like Button instead, something like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<style type="text/css">
.fb-like{
    height: 25px;
    overflow: hidden;
}
</style>

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="450" data-show-faces="false" data-send="true"></div>

We set the height of .fb-like to 25 pixels and overflow: hidden, which will prevent the comment box from popping up completely!

You can see it working here: http://devs.dream-portal.net/dp11/index.php

UPDATED

For the box-count style, you can use the iframe version for the box-count and no comment box gets displayed (atleast not to me):

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&amp;width=450&amp;height=65&amp;colorscheme=light&amp;layout=box_count&amp;action=like&amp;show_faces=true&amp;send=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

RE-UPDATED

You can also review the Top Answer on this stackoverflow question here with 114 up votes: Facebook Like Button - how to disable Comment pop up?

Try that and maybe it will work... not sure.

Answer 2

You can get the comment box class via code analysis and apply Solomon Closson's CSS answer to remove it from page display.

Something like:

<style type="text/css">
    .like-btn-comment-box { display: none !important; }
</style>

Where .like-btn-comment-box is the comment box class