Facebook like box load event jquery_问答_开发者

开发者 https://www.devze.com 2023-02-19 21:05 出处：网络

I have code like this. $(document).ready(function() { var highestCol = Math.max($(\'#main\').children().height(),$(\'#main\').children().height());

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 i开发者_JAVA技巧n 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).

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
}

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);
}

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>

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