响应宽度Facebook页面插件

Question

Facebook推出了一个新的页面插件来取代Like框插件.

文档:https://developers.facebook.com/docs/plugins/page-plugin/

我正在用这个新的插件替换Like Box插件.在一些网站上,我使用这个CSS代码使插件在元素内响应:

 .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;} 

用这个代码替换它不起作用:

 .fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;} 

我的页面插件代码如下所示(不提供数据宽度属性):

<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

看起来Facebook已经在iframe加载的DOM中添加了一个带有内联样式元素的div元素:

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

当我将此宽度调整为100%时,除了封面照片外,每个元素都以全宽对齐.

可以像使用Like框插件一样为这个新的Page插件提供响应式行为吗？

Answer 1

Facebook的新的" 页面插件 "宽度为180px到500px按文档.

• 如果在下面配置180px,它将强制执行最小宽度180px
• 如果配置在上面500px,它将强制执行最大宽度500px

选中自适应宽度后,例如:

与like-box不同,此插件通过在配置错误时坚持边界值来强制实施其限制.

适用于小屏幕/响应行为

• 在较小的屏幕上渲染时,width在插件容器上执行desiered 并且插件会尝试适应.

• 如果容器比配置的更薄,则插件会自动呈现较小的宽度(以适应较小的屏幕)width.

• 您可以在移动设备上缩小容器,只要插件达到最小值,插件就会适合180px.

没有自适应宽度

• 无论容器宽度如何,插件都将以指定的宽度呈现

Answer 2

当插件放在一个很薄的列中时,例如侧边栏,这样做效果不太好.在中等大小的屏幕上,这些屏幕的宽度通常小于280px.

.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

这是我用来阻止插件在包装容器外面破解的代码.与旧的盒子不同,这个盒子只是溢出,隐藏溢出的内容.

Answer 3

这适合我(宽度是由javascript和FB插件加载通过javascript强制)

<div id="fb-root"></div>
<script>(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.5&appId=443271375714375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

jQuery(document).ready(function($) {
  $(window).bind("load resize", function(){  
  setTimeout(function() {
  var container_width = $('#container').width();    
    $('#container').html('<div class="fb-page" ' + 
    'data-href="http://www.facebook.com/IniciativaAutoMat"' +
    ' data-width="' + container_width + '" data-tabs="timeline" 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="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
    FB.XFBML.parse( );    
  }, 100);  
}); 
});

</script>
<div id="container" style="width:100%;">  
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" 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="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>

Answer 4

要使新的Facebook页面插件在初始页面加载时做出响应,您需要删除该data-width属性,而是添加

data-adapt-container-width="true"

这将使Facebook页面插件响应,但仅限于初始页面渲染,最小宽度为180px.

我仍然试图弄清楚如何让它真正动态响应,尽管Facebook的警告(如果我找到答案,我会发布更新).

没有动态调整大小

Page插件使用响应式,流畅和静态布局.您可以使用媒体查询或其他方法来设置width父元素:

该插件将确定其width页面加载.页面加载后,它不会对框模型的更改作出反应.如果要width在窗口调整大小时调整插件,则需要手动重新插入插件.

资料来源:https://developers.facebook.com/docs/plugins/page-plugin

正如Io Ctaptceb建议的那样,你可以通过在浏览器调整大小上重新初始化小部件来使其动态响应,但通过这样做,你可能会很快耗尽内存.

Yugal Jindle有一个很好的答案,但我想澄清一点,我还没有找到一种方法来使插件真正动态响应.

Answer 5

接受的答案仅在第一次加载页面时适用于我，但在调整浏览器大小或我在移动设备中从横向更改为纵向后，Facebook 插件（版本 3.2）无法适应我的容器。对我来说，解决方案只是检查适应插件容器宽度，并添加一个侦听器以了解页面大小何时调整，然后删除 facebook iframe 并再次加载它。

window.addEventListener('resize', this.resize);
resize = () => {
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
    FB.XFBML.parse();
};

顺便说一下，我添加了一个超时以避免用户调整页面大小时多次刷新，但这是可选的

var FB_UPDATE_TIMEOUT = null;

window.addEventListener('resize', this.resize);
resize = () => {
    if(FB_UPDATE_TIMEOUT === null) {
        FB_UPDATE_TIMEOUT = window.setTimeout(function() {
            FB_UPDATE_TIMEOUT = null;
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
            FB.XFBML.parse();
        }, 100);
    }
};