facebook-social-plugins - 响应宽度 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% 时，除封面照片外，每个元素都以全宽度对齐。

是否可以为这个新的页面插件提供响应行为，就像使用“赞”框插件一样？

Answer 1

根据文档，Facebook 的新“ Page Plugin ”宽度范围为 180px 到 500px。

• 如果配置低于 180px，它将强制执行 180px 的最小宽度
• 如果配置高于 500px，则会强制最大宽度为 500px

选中自适应宽度，例如:

与 like-box 不同，该插件通过在配置错误时坚持边界值来强制执行其限制。

适用于小屏幕/响应行为

• 在较小的屏幕上渲染时，在插件容器上强制执行所需的宽度，插件会尝试适应。

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

• 您可以在移动设备上缩小容器，只要插件达到最小 180px 即可容纳。

没有自适应宽度

• 无论容器宽度如何，插件都会按照指定的宽度进行渲染