Facebook喜歡盒子加載事件jQuery

Question

我有這樣的代碼。

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

但這在某些列中有“喜歡”框時不起作用。 好像在Facebook之類的框之前調用過。

如何解決這個問題？

基本上，我需要在facebook加載Like box和Recommendations塊（兩者）之后調用此過程。

Answer 1

要在渲染Facebook插件后執行代碼，您可以訂閱xfbml.render。 這是我的工作代碼：

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
}

Answer 2

我認為您可以將“喜歡”按鈕放在固定高度的容器中。

例如：

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

這樣您就不必擔心它到底有多高了。

另一種可能的解決方案。 我想您使用異步加載facebook javascrpt sdk的方法。 然后，您可以在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);
}

Answer 3

根據FB.Event.subscribe ，有一個加載事件，該事件將在頁面完成渲染插件時自動觸發

步驟1：在HTML中（將其放置在您想要顯示社交框的位置）：

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

步驟2：在頁腳中（在結束<body>標記之前）：

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

Answer 4

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

Facebook喜歡盒子加載事件jQuery

問題描述

4 個解決方案

解決方案1
3 2013-10-10 12:14:50

解決方案2
2 已采納 2011-03-27 14:04:33

解決方案3
0 2016-11-11 20:29:34

解決方案4
-1 2013-06-20 03:02:00

Facebook喜歡盒子加載事件jQuery

問題描述

4 個解決方案

解決方案1 3 2013-10-10 12:14:50

解決方案2 2 已采納 2011-03-27 14:04:33

解決方案3 0 2016-11-11 20:29:34

解決方案4 -1 2013-06-20 03:02:00

解決方案1
3 2013-10-10 12:14:50

解決方案2
2 已采納 2011-03-27 14:04:33

解決方案3
0 2016-11-11 20:29:34

解決方案4
-1 2013-06-20 03:02:00