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