Question

I’m using jQuery to equalize some of the column heights on a page. The problem is, I have Facebook comments loading on a page, and they load by the time my code to equalize column heights is done. So I’m wondering if there is anyway to pass a callback to the Facebook comments (or if there is a more elegant way of doing this, I’m all ears).

Answer 1

I’ve run into this problem on my own as well. Here is how I’ve managed to handle the problem. Keep in mind equalizeColumns is my custom function, yours may be named something else.

<script>
$(window).load(function(){
  FB.Event.subscribe("xfbml.render", function(response){equalizeColumns()});
  FB.Event.subscribe("comment.create", function(response){equalizeColumns()});
  FB.Event.subscribe("comment.remove", function(response){equalizeColumns()});
  FB.Event.subscribe("edge.create", function(response){equalizeColumns()});
  FB.Event.subscribe("edge.remove", function(response){equalizeColumns()});
});</script>

As you can see in the example above, binding to the FB.Event.subscribe should give you what you need. In particular, the xfbml.render hook is essentially the onload event. Unfortunately, I’ve only had minor success with the other hooks (which you will need if someone posts a comment, removes a comment, “Likes” a post, or “Unlikes” a post – respectively).

If you add a setTimeout call to the equalizeColumns call, you may have more success.