javascript Facebook 页面插件 - 动态重新渲染/更改宽度（响应式/RWD）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30083986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook Page Plugin - rerender / change width dynamically (Responsive / RWD)
提问by Krzysztof Trzos
I'm using Facebook's "Page Plugin" widget. On Facebook's page, it is written:
我正在使用 Facebook 的“页面插件”小部件。在Facebook 的页面上，它写道：
If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.
如果你想在窗口大小调整时调整插件的宽度，你需要手动重新渲染插件。
How can I dynamically change this plugin's width without page refreshing (with, for example, Firefox responsive view- CTRL+M shortcut).
如何在不刷新页面的情况下动态更改此插件的宽度（例如，使用Firefox 响应视图- CTRL+M 快捷方式）。
And yeah, I have read THISpost, but none of these solutions tells how to rerender the plugin.
是的，我已经阅读了这篇文章，但这些解决方案都没有告诉如何重新渲染插件。
回答by jroi_web
For JavaScript/jQuery approach, you may want to listen to on window resize event and reload the Facebook Page Plugin Div container. Make sure that the FB Page plugin is wrapped around a parent div so we can use its size when we reload the div.
对于 JavaScript/jQuery 方法，您可能希望监听窗口大小调整事件并重新加载 Facebook 页面插件 Div 容器。确保 FB Page 插件包裹在父 div 周围，以便我们在重新加载 div 时可以使用它的大小。
<div id="pageContainer">
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="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>
</div>
$( window ).resize(function() {
var container_width = $('#pageContainer').width();
$('#pageContainer').html('<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="' + container_width + '" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="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>');
FB.XFBML.parse();
});
回答by Nicolás Guglielmi Manent
A solution for this problem is:
这个问题的解决方案是：
(function($){
var a = null;
$(window).resize(function(){
if(a != null) {
clearTimeout(a);
}
a = setTimeout(function(){
FB.XFBML.parse();
},1000)
})
})(jQuery)
回答by Victor Perov
Yep, facebook page plugin (and other their plugins) renders only on page load. And if this plugin is hided (or window after rendering was resized) you need to tell FB rerender his plugins. This works perfectly with calling FB.XFBML.parse() after showing/resizing.
是的，facebook 页面插件（和其他他们的插件）仅在页面加载时呈现。如果这个插件被隐藏（或渲染后的窗口被调整大小），你需要告诉 FB 重新渲染他的插件。这与在显示/调整大小后调用 FB.XFBML.parse() 完美配合。
You can do it like this:
你可以这样做：
in HTML:
在 HTML 中：
<div class="fb-page" data-href="{url}" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="{url}"><a href="{url}">{title}</a></blockquote></div></div>
in Javascript:
在 JavaScript 中：
function changeFBPagePlugin(width, height, url) {
if (!isNaN(width) && !isNaN(height)) {
$(".fb-page").attr("data-width", width).attr("data-height", height);
}
if (url) {
$(".fb-page").attr("data-href", url);
}
FB.XFBML.parse();
}
Just call for rerendering (if you want show plugin after hiding)
只需调用重新渲染（如果您想在隐藏后显示插件）
changeFBPagePlugin(355, 244);
or
或者
changeFBPagePlugin(355, 244, "https://facebook.com/PageNameHere");
if you want to change other FB page plugin
如果您想更改其他FB页面插件
回答by David Augustus
Solution is :
解决方案是：
FB.XFBML.parse();
Solved my problems with all hidden facebook plugins after appending "hidden" div's contents into a main div, using the menu from the jsfiddle above .
使用上面 jsfiddle 中的菜单将“隐藏”div 的内容附加到主 div 后，解决了我所有隐藏的 facebook 插件的问题。
Menu appending content from hidden divs into a main div
I was going use another menu, thats what i was going to do .
我打算使用另一个菜单，这就是我要做的。
I used FB.XFBML.parse();in my the funcion, before the return false;and it worked perfectly for page, comments, likes, all plugins are now parsed every time the menu is clicked .
我FB.XFBML.parse();在我的功能中使用过return false;，它非常适合页面，评论，喜欢，现在每次单击菜单时都会解析所有插件。
Thank you .
谢谢你 。
回答by Eddie Fann
Using code from the above answers, the below code works for me:
使用上述答案中的代码，以下代码对我有用：
<div id="fb-root"></div>
<!--
From https://developers.facebook.com/docs/plugins/page-plugin/
-->
<div id="Facebook-Widget">
<div class="fb-page" data-href="{url}" data-tabs="timeline"
data-small-header="false" data-adapt-container-width="true"
data-hide-cover="false" data-show-facepile="true">
<blockquote cite="{url}" class="fb-xfbml-parse-ignore"><a
href="{url}">{title}</a></blockquote>
</div>
</div>
<script type="text/javascript">
var Example =
{
foFuncTimeOut: null,
//----------------------------------------------------------------------------------------------------
initializeRoutines: function ()
{
// Facebook sidebar
// From https://developers.facebook.com/docs/plugins/page-plugin/
(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.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
},
// -------------------------------------------------------------------------------------------------------------------
setupFacebook: function ()
{
var loWidget = jQuery('#Facebook-Widget');
if (loWidget.length == 0)
{
return;
}
Example.resizeFacebook(loWidget);
jQuery(window).resize(function ()
{
Example.resizeFacebook(loWidget);
});
},
// -------------------------------------------------------------------------------------------------------------------
// From http://stackoverflow.com/questions/30083986/facebook-page-plugin-rerender-change-width-dynamically-responsive-rwd
resizeFacebook: function (toWidget)
{
if (Routines.foFuncTimeOut != null)
{
clearTimeout(Routines.foFuncTimeOut);
}
Routines.foFuncTimeOut = setTimeout(function ()
{
// Query the block above the Facebook widget.
var lnWidth = jQuery('#block-views-block-blog-management-blog-listing-block').width();
if (lnWidth < 180)
{
lnWidth = 180;
}
if (lnWidth > 500)
{
lnWidth = 500;
}
var lnHeight = (jQuery(window).width() >= 768) ? 1200 : 700;
toWidget.css('width', lnWidth + 'px');
toWidget.css('height', lnHeight + 'px');
var loFB = toWidget.find('.fb-page');
loFB.css('width', lnWidth + 'px');
loFB.css('height', lnHeight + 'px');
// data-width & data-height only accept whole numbers.
loFB.attr('data-width', Math.floor(lnWidth));
loFB.attr('data-height', Math.floor(lnHeight));
if (typeof FB !== 'undefined')
{
FB.XFBML.parse();
}
}, 1000);
},
//----------------------------------------------------------------------------------------------------
};
Example.initializeRoutines();
Example.setupFacebook();
</script>
