javascript - Facebook like box load event jquery

Question

I have code like this.

$(document).ready(function() {
    var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
    $('#main').children().height(highestCol);
});

But this doesn't work when I have Like box in some column. It seems this called before Facebook like box called.

How to fix this problem?

Basically I need to call this process after facebook loads Like box and Recommendations blocks (both).

Answer 1

To execute code after the facebook plugin has rendered, you can subscribe to xfbml.render. Here is my working code:

window.fbAsyncInit = function () {

    FB.init({ status: true, cookie: true, xfbml: true });

    FB.Event.subscribe("xfbml.render", function () {
        fbexecute();
    });
};

(function () {
    var e = document.createElement('script'); 
    e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
} ());

var fbexecute = function () {
    //-- re-calculate heights here
}