Facebook喜欢盒子加载事件jQuery
[英]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. 好像在Facebook之类的框之前调用过。
How to fix this problem? 如何解决这个问题？
Basically I need to call this process after facebook loads Like box and Recommendations blocks (both). 基本上，我需要在facebook加载Like box和Recommendations块（两者）之后调用此过程。
4 个解决方案
解决方案1
3 2013-10-10 12:14:50
To execute code after the facebook plugin has rendered, you can subscribe to xfbml.render. 要在渲染Facebook插件后执行代码，您可以订阅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
}
解决方案2
2 已采纳 2011-03-27 14:04:33
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. 我想您使用异步加载facebook javascrpt sdk的方法。 Then you can execute your code after FB.init() 然后，您可以在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);
}
解决方案3
0 2016-11-11 20:29:34
As per the FB.Event.subscribe , there is a loading event which will be triggered automatically when the page will finish rendering plugins 根据FB.Event.subscribe ，有一个加载事件，该事件将在页面完成渲染插件时自动触发
Step-1: In the HTML (put it where you want the social box to be shown): 步骤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>
Step-2: In the footer (just before ending the <body> tag): 步骤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>
解决方案4
-1 2013-06-20 03:02:00
$(document).ready(function()
{
var highestCol = Math.max($('#main').children().height(),$('#main').children().height());
$('#main').children().height(highestCol);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.