Facebook like box load event jquery

问题

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

回答1:

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

回答2:

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
}

回答3:

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>

回答4:

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

来源：https://stackoverflow.com/questions/5449193/facebook-like-box-load-event-jquery

标签

javascript

jquery

html

fbml