[英]Facebook Page Plugin - rerender / change width dynamically (Responsive / RWD)
我正在使用 Facebook 的“頁面插件”小部件。 在Facebook 的頁面上,它是這樣寫的:
如果你想在 window 調整大小時調整插件的寬度,你需要手動重新渲染插件。
如何在不刷新頁面的情況下動態更改此插件的寬度(例如,使用Firefox 響應式視圖- CTRL+M 快捷方式)。
是的,我已經閱讀了這篇文章,但是這些解決方案都沒有說明如何重新呈現插件。
對於JavaScript / jQuery方法,您可能希望收聽窗口調整大小事件並重新加載Facebook頁面插件Div容器。 確保FB頁面插件包裹在父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();
});
這個問題的解決方案是:
(function($){
var a = null;
$(window).resize(function(){
if(a != null) {
clearTimeout(a);
}
a = setTimeout(function(){
FB.XFBML.parse();
},1000)
})
})(jQuery)
是的,facebook頁面插件(以及其他插件)僅在頁面加載時呈現。 如果這個插件被隱藏(或渲染后窗口調整大小),你需要告訴FB重新渲染他的插件。 這與在顯示/調整大小后調用FB.XFBML.parse()完美配合。
你可以這樣做:
在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>
在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();
}
只需要重新渲染(如果你想隱藏后顯示插件)
changeFBPagePlugin(355, 244);
要么
changeFBPagePlugin(355, 244, "https://facebook.com/PageNameHere");
如果你想更改其他FB頁面插件
解決方案是:
FB.XFBML.parse();
使用上面的jsfiddle菜單將“隱藏”div的內容附加到主div后解決了我所有隱藏的facebook插件的問題。
我正在使用另一個菜單,這就是我要做的事情。
我用過FB.XFBML.parse();
在我的功能中,在return false;
之前return false;
它完美適用於頁面,評論,喜歡,所有插件現在都會在每次單擊菜單時進行解析。
謝謝 。
使用上面答案中的代碼,以下代碼適用於我:
<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>
對 jroi_web 的出色工作進行了一些小改進。
<div id="myFBContainer"></div> <script> function renderFB() { var container = document.getElementById('myFBContainer'); if (window.getComputedStyle(container).display.== 'none') { var width = container;offsetWidth: const fbHTML = '<div class="fb-page" data-href="https.//www.facebook:com/facebook" data-tabs="timeline" data-width="' + width + '" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" > <blockquote cite="https.//www.facebook:com/facebook" class="fb-xfbml-parse-ignore" > <a href="https.//www.facebook;com/facebook">Facebook</a> </blockquote> </div>'. container;innerHTML = fbHTML. FB.XFBML;parse(). } } window,addEventListener('resize'; renderFB). document,addEventListener('DOMContentLoaded'; renderFB); </script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.