Tigran Tokmajyan Tigran Tokmajyan - 11 months ago 53
HTML Question

Facebook like box load event jquery

I have code like this.

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

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 Source

I think you can just put the like-button in a fix-height container.

For example:

<div style="height: 62px;">
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" stream="false" header="false"></fb:like-box>

Then you won't worried about exactly how height it will be.

Another possible solution. I suppose that you using the method of load facebook javascrpt sdk asynchronously. Then you can execute your code after FB.init()

<div id="fb-root"></div>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});

    if (jQuery.isFunction(window.fbexecute)) {
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +

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