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).

dude, you are giving the same thing twice to `Math.max` and setting the same thing to itself, in essence it feels like `height = max(height, height)`, which on itself, makes no sense to me... am I missing something here? — sharat87, Mar 27 '11 at 12:59
oh. really. it is not important at this moment. Important is to call function when Likebox and Recommendations are fully loaded. — Tigran Tokmajyan, Mar 27 '11 at 13:22

score 3 · Answer 1 · answered Oct 10 '13 at 12:14

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
}

The solution posted by Edison did not work. The facebook plugins were not rendered yet when fbexecute was called. This pointed me into the right direction: http://stackoverflow.com/questions/7297619/how-to-load-a-function-method-after-facebook-social-plugin-is-has-finished-loade — Tillito, Oct 10 '13 at 12:15

Edison Chuang · Accepted Answer · 2011-03-27T14:15:51.207

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>
</div>

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>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});

    if (jQuery.isFunction(window.fbexecute)) {
        window.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);
  }());
</script>

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

This solution did not work in my case. I will post my solution. — Tillito, Oct 10 '13 at 12:12

score 0 · Answer 3 · answered Nov 11 '16 at 20:29

As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins

Step-1: In the HTML (put it where you want the social box to be shown):

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>

Step-2: In the footer (just before ending the <body> tag):

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function(){
    //FB.init({ status: false, cookie: true, xfbml: true });
    FB.Event.subscribe("xfbml.render", function(){
        columnHeightFixer();
    });
};
(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/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

function columnHeightFixer(){
    //...Height Fixing Code...
}
</script>

score -1 · Answer 4 · edited Jun 20 '13 at 03:23

-1

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

edited Jun 20 '13 at 03:23

David

15,894
22
55
66

answered Jun 20 '13 at 03:02

haley

1

1

That is not the solution: the facebook like box does not exist yet when document.ready is called. Thus you can not calculate the height here. – Tillito Oct 10 '13 at 11:48

Facebook like box load event jquery

4 Answers4

Linked