响应宽度 Facebook 页面插件

Question

Facebook 推出了一个新的页面插件来取代点赞框插件。

文档：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 box 插件一样为这个新的 Page 插件提供响应式行为？

Answer 1

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

如果配置低于 180px，它将强制执行最小宽度 180px
如果在 500px 上方配置，它将强制执行最大宽度 500px

选中自适应宽度，例如：

与 like-box 不同，如果配置错误，此插件会坚持边界值来强制执行其限制。

对于小屏幕/响应行为

在较小的屏幕上渲染时，在插件容器上强制执行所需 width，插件将尝试适应。
如果容器比配置的更细width.
[=56=，插件会自动以较小的宽度呈现（以适应较小的屏幕） ]
您可以在移动设备上缩小容器，只要达到 180px 的最小值，插件就会适合。

没有自适应宽度

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

Answer 2

当您将插件放置在细栏中（例如边栏）时，这不太适用。在中型屏幕上，这些宽度通常运行小于 280 像素。

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

这是我用来阻止插件脱离包装容器的代码。不像旧的 like box 会平铺，这个只是溢出，隐藏溢出的内容。

Answer 3

对于那些正在寻找尺寸小于 280 的 JS 解决方案的人

这是我的代码片段：

facebookScale = function () {
    var adjustWidth;
    adjustWidth = $('.facebook-likebox').width() / 280;
    return $('.fb-page').css({
      '-webkit-transform': 'scale(' + adjustWidth + ')',
      '-moz-transform': 'scale(' + adjustWidth + ')',
      'transform': 'scale(' + adjustWidth + ')'
    });
  }

$(function(){
    $('.fb-page').on('resize DOMSubtreeModified', facebookScale);
    $(window).on('resize', facebookScale);
  })

编辑。确保 css 中包含以下内容：

.fb-page{
  transform-origin: 0 0;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
}

Answer 4

As of Graph API 2.3 Facebook 为评论插件提供了类似于以下的代码：

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5">
</div>

添加一个data-width="100%"使其半响应如下：

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5"
    data-width="100%">
</div>

^{半响应，因为插件不会在页面调整大小时自行调整大小。大小取决于插件加载时的屏幕大小。}

Answer 5

要使新的 Facebook Page Plugin 在初始页面加载时响应，您需要删除 data-width 属性并添加

data-adapt-container-width="true"

这将使 Facebook 页面插件响应，但仅在初始页面呈现，最小宽度为 180 像素。

尽管有 Facebook 的警告，我仍在努力弄清楚如何让它真正动态响应（如果我找到答案，我会 post 更新）。

No Dynamic Resizing

The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

The plugin will determine its width on page load. It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

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

您可以按照 Io Ctaptceb 的建议，通过在浏览器调整大小时重新初始化小部件来使其动态响应，但是这样做您运行有很快耗尽内存的风险。

Yugal Jindle 有一个很好的答案，但我想澄清一下 我还没有找到使插件真正动态响应的方法。

Answer 6

这对我有用（宽度由 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 7

不要忘记 data-href 字段！对我来说，评论在没有它的情况下也能正常工作，但没有回应。当然还有 data-width='100%'

Answer 8

我把这个放在这里是为了那些和我有同样问题但在评论之间或任何其他 Whosebug 页面上找不到答案的人。

我添加了 Facebook Page Plugin 设置以适应容器宽度。

data-adapt-container-width="true"

但是，iframe 或 JavascriptSDK 元素中的一个或多个元素的宽度为 340px，导致页面插件无法适应容器宽度。虽然它的最小值应为 180px，最大值为 500px。

然而，Facebook 提供的代码缺少一些东西。

<div class="fb-page" data-href="https://www.facebook.com/Paras-Design-393209377418188" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>

通过手动添加 data-width="500"，页面插件按预期响应并适应容器宽度，最大宽度为 500 像素。

我希望这对遇到同样问题的人有所帮助。

Answer 9

我们通过将 Facebook 插件用作 IFRAME 克服了 Facebook 插件响应能力的一些限制，但是 bootstrap在渲染时使用一些 JavaScript 动态调整框架大小的 width/height SRC中的参数URL)填充容器元素。

如果容器大于 500px，为了避免右侧出现明显的间距，我们只需添加一个带有一些简单数学的缩放变换。

IFRAME onload 事件在 SRC 最初为空时触发（当我们 bootstrap 它时），然后在我们设置 SRC 时它完成加载后再次触发，但如果 SRC 属性已经存在，我们只是简单地短路。

在我们的使用中，我们不会更改桌面使用的 Facebook 提要的宽度，而对于 handheld/tablet 视口，这些宽度是自然固定的（是的，我们捕获方向变化）但是如果你如果浏览器 window 尺寸发生变化，您希望您的代码不断调整，您可以重新编写代码作为自己的练习。

这是在 Chrome 和 Safari 中测试的，在桌面和 iOS/Android:

<script>
    function setupFBframe(frame) {

        if(frame.src) return; // already set up

        // get parent container dimensions to use in src attrib
        var container = frame.parentNode;

        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

        var src = 'https://www.facebook.com/plugins/page.php' +
                '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
                '&tabs=timeline' +
                '&width=' + containerWidth +
                '&height=' + containerHeight +
                '&small_header=true' +
                '&adapt_container_width=false' + /* doesn't seem to matter */
                '&hide_cover=true' +
                '&hide_cta=true' +
                '&show_facepile=false' +
                '&appId';

        frame.width = containerWidth;
        frame.height = containerHeight;
        frame.src = src;

        // scale up if container > 500px wide
        if(containerWidth) > 500) {
            var scale = (containerWidth / 500 );
            frame.style.transform = 'scale(' + scale + ')';
        }
    }
</script>
<style>
    #facebook_iframe {
        transform-origin: 0 0;
        -webkit-transform-origin: 0px 0px;
        -moz-transform-origin: 0px 0px;
    }
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

编辑：忘记了 transform-origin，不再需要调整 left/top 以适应比例。谢谢 Io Ctaptceb

Answer 10

我对 Twentyfortysix 的回答进行了一些改进，以便仅在调整大小完成后触发事件。

此外，我添加了检查 window 的宽度，因此它不会在 Android 上触发重新初始化。

(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_EN/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    jQuery(document).ready(function($) {
        var oldwidth = $(window).width();
        var timeout;

        var recalc = function() {
          clearTimeout(timeout);
          timeout = setTimeout(function() {
          var container_width = $('#fbcontainer').width();    
            $('#fbcontainer').html('<div class="fb-page" ' + 
            'data-href="YOUR FACEBOOK PAGE URL"' +
            ' data-width="' + container_width + '" data-height="750" 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="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>');
            if(typeof FB !== 'undefined') {
                FB.XFBML.parse( );  
            }  
          }, 100);  
        };

        recalc();

      $(window).bind("resize", function(){  
        if(oldwidth !== $(window).width()) {
            recalc();
            oldwidth = $(window).width();
        }
        }); 
    });

Answer 11

似乎 Facebook 页面插件在过去 5-7 年里根本没有改变 :) 它从一开始就没有响应，现在仍然没有，甚至新参数 Adapt to plugin container width 也不起作用或者我不明白它是如何工作的。

我正在寻找最可行的简单方法 PLUGIN SIZE 100% WIDTH，但似乎不可行。废话最好。设计师是如何解决这个问题的？

我找到了 2017 年 10 月这个时候的最佳决定：

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

这不会破坏响应式屏幕的屏幕尺寸宽度，但仍然看起来很丑，因为在一段时间内被切割并且不会拉伸...Facebook 根本不关心插件设计。原来如此。

Answer 12

我正在使用 Robert Smith 提出的解决方案，其中最大宽度而不是宽度：

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

此外，我正在使用 Yugal Jindle 的建议，所以我

data-width="555"

和

data-adapt-container-width="true"

现在我的页面好了！非常感谢！

Answer 13

大家好！

我的带现场演示的版本（原生JavaScript）：

1). Javascript代码在单独的文件中（最佳方案）：

Codepen

/* Vanilla JS */
function setupFBframe(frame) {
  var container = frame.parentNode;

  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;

  var src =
    "https://www.facebook.com/plugins/page.php" +
    "?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" +
    "&tabs=timeline" +
    "&width=" +
    containerWidth +
    "&height=" +
    containerHeight +
    "&small_header=false" +
    "&adapt_container_width=false" +
    "&hide_cover=true" +
    "&hide_cta=true" +
    "&show_facepile=true" +
    "&appId";

  frame.width = containerWidth;
  frame.height = containerHeight;
  frame.src = src;
}

/* begin Document Ready                                
############################################ */

document.addEventListener('DOMContentLoaded', function() {
  var facebookIframe = document.querySelector('#facebook_iframe');
  setupFBframe(facebookIframe);
 
  /* begin Window Resize                                
  ############################################ */
  
  // Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
  (function() {
    window.addEventListener("resize", resizeThrottler, false);

    var resizeTimeout;

    function resizeThrottler() {
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();
        }, 66);
      }
    }

    function actualResizeHandler() {
      document.querySelector('#facebook_iframe').removeAttribute('src');
      setupFBframe(facebookIframe);
    }
  })();
  /* end Window Resize
  ############################################ */
});
/* end Document Ready                                
############################################ */

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
  font-family: 'Indie Flower', cursive;
}
.container {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content {
  overflow: hidden;
}

.left_sidebar {
  position: relative;
  float: left;
  width: 30%;
  max-width: 300px;
}

.main_content {
  position: relative;
  float: left;
  width: 70%;
  background-color: #DDEFF7;
}
/* ------- begin Widget Facebook -------------- */
.widget--facebook--container {
  padding: 10px;
  border: 1px solid #000;
}

.widget-facebook {
  height: 500px;
}

.widget-facebook .facebook_iframe {
  border: none;
}

/* ---------- end Widget Facebook---------------- */

/* ----------------- no need -------------------- */
.block {
  color: #fff;
  height: 300px;
  background-color: #00A7F7;
  border: 1px solid #005dff;
}

.block h3 {
  line-height: 300px;
  text-align: center;
}

<!-- Min. responsive 180px -->
<div class="container">
  <div class="content">
    <div class="left_sidebar">
      <aside class="block">
        <h3>Content</h3>
      </aside>
      <!-- begin Widget Facebook
    ========================================= -->
      <aside class="widget--facebook--container">
        <div class="widget-facebook">
          <iframe id="facebook_iframe" class="facebook_iframe"></iframe>
        </div>
      </aside>
      <!-- end Widget Facebook
      ========================================= -->
      <aside class="block">
        <h3>Content</h3>
      </aside>
    </div>
    <div class="main_content">
      <h1>Responsive width Facebook Page Plugin</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
    </div>
  </div>
</div>

2). Javascript代码写在HTML:

Codepen

@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
  font-family: 'Indie Flower', cursive;
}

.container {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.content {
  overflow: hidden;
}

.left_sidebar {
  position: relative;
  float: left;
  width: 30%;
  max-width: 300px;
}

.main_content {
  position: relative;
  float: left;
  width: 70%;
  background-color: #DDEFF7;
}


/* ------- begin Widget Facebook -------------- */

.widget--facebook--container {
  padding: 10px;
  border: 1px solid #000;
}

.widget-facebook {
  height: 500px;
}

.widget-facebook .facebook_iframe {
  border: none;
}


/* ---------- end Widget Facebook---------------- */


/* ----------------- no need -------------------- */

.block {
  color: #fff;
  height: 300px;
  background-color: #00A7F7;
  border: 1px solid #005dff;
}

.block h3 {
  line-height: 300px;
  text-align: center;
}

<!-- Vanilla JS -->
<!-- Min. responsive 180px -->
<div class="container">
  <div class="content">
    <div class="left_sidebar">
      <aside class="block">
        <h3>Content</h3>
      </aside>
      <!-- begin Widget Facebook
      ========================================= -->
      <aside class="widget--facebook--container">
        <div class="widget-facebook">
          <script>
            function setupFBframe(frame) {
              if (frame.src) return; // already set up

              var container = frame.parentNode;
              console.log(frame.parentNode);

              var containerWidth = container.offsetWidth;
              var containerHeight = container.offsetHeight;

              var src =
                "https://www.facebook.com/plugins/page.php" +
                "?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" +
                "&tabs=timeline" +
                "&width=" +
                containerWidth +
                "&height=" +
                containerHeight +
                "&small_header=false" +
                "&adapt_container_width=false" +
                "&hide_cover=true" +
                "&hide_cta=true" +
                "&show_facepile=true" +
                "&appId";

              frame.width = containerWidth;
              frame.height = containerHeight;
              frame.src = src;
            }

            var facebookIframe;

            /* begin Window Resize                                
            ############################################ */

            // Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
            (function() {
              window.addEventListener("resize", resizeThrottler, false);

              var resizeTimeout;

              function resizeThrottler() {
                if (!resizeTimeout) {
                  resizeTimeout = setTimeout(function() {
                    resizeTimeout = null;
                    actualResizeHandler();
                  }, 66);
                }
              }

              function actualResizeHandler() {
                document.querySelector('#facebook_iframe').removeAttribute('src');
                setupFBframe(facebookIframe);
              }
            })();
            /* end Window Resize
            ############################################ */
          </script>
          <iframe id="facebook_iframe" class="facebook_iframe" onload="facebookIframe = this; setupFBframe(facebookIframe)"></iframe>
        </div>
      </aside>
      <!-- end Widget Facebook
      ========================================= -->
      <aside class="block">
        <h3>Content</h3>
      </aside>
    </div>
    <div class="main_content">
      <h1>Responsive width Facebook Page Plugin</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
    </div>
  </div>
</div>

感谢storsoc！

祝大家一切顺利，祝大家有个愉快的一天！

Answer 14

这是 iframe 动态调整大小的包含方式，在调整大小事件中有一些延迟重新呈现：

function _facebook() {

    var parent = document.getElementById('facebook');
    var width = (window.innerWidth > 540) ? 500 : window.innerWidth - 40;
    if (parent.firstChild && parent.firstChild.width == width) { return; }
    var url = 'https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width='+width+'&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=YOUR_APP_ID';
    var i = document.createElement('iframe');
    i.src = url;
    i.width = width;
    i.height = 500;
    i.style = 'border:none;overflow:hidden';
    i.scrolling = "no";
    i.frameborder = "0";
    i.allowTransparency = "true";
    while (parent.firstChild) { parent.removeChild(parent.firstChild); }
    parent.appendChild(i);

}

_facebook();

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        _facebook();
    }, 250);
});

Answer 15

和其他人一样，我发现插件可以（通过 JS）在容器收缩时收缩，但在扩展时不会增长。

问题是原来的FB.XFBML.parse()在文档树中创建了一组固定样式的子节点，之后的调用不会正确清除旧节点。如果您自己在代码中完成，一切都很好。

Facebook HTML（我只是在 Facebook 提供的内容中添加了 ID 元素，以避免任何选择器事故）：

<div id="divFacebookFeed" class="fb-page" data-href="..." ...>
    <blockquote id="bqNoFeed" cite="(your URL)" class="fb-xfbml-parse-ignore">
        <a href="(your URL)">Your Site</a>
    </blockquote>
</div>

...JQuery 将小部件的大小调整为 500px 并保留内部后备元素的代码：

var bq = $('#bqNoFeed').detach();
var fbdiv = $('#divFacebookFeed');

fbdiv.attr('data-width', 500);
fbdiv.empty();
fbdiv.append(bq);
FB.XFBML.parse();

Answer 16

接受的答案仅在第一次加载该页面时对我有效，但在调整浏览器大小或我在移动设备上从横向更改为纵向后，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);
    }
};

Answer 17

经过一段时间的努力，我想我找到了一个非常简单的解决方案。

受到Robin Wilson的启发，我做了这个简单的JS函数（原来的调整宽度和高度，我的只是调整宽度）：

 function changeFBPagePlugin() {
    var container_width = Number($('.fb-container').width()).toFixed(0);
    if (!isNaN(container_width)) {
        $(".fb-page").attr("data-width", container_width);
    }
    if (typeof FB !== 'undefined') {
        FB.XFBML.parse();
    }
};

它检查包装的当前宽度 div，然后将值放入 fb-page div。魔术是通过 FB.XFBML 对象完成的，它是 Facebook SDK 的一部分，当您通过 window.fbAsyncInit

初始化 fb 页面本身时，它就可用

我将我的函数绑定到 html 主体的 onLoad 和 onResize:

<body onload="changeFBPagePlugin()" onresize="changeFBPagePlugin()">

在页面上，我将我的 fb-page 插件包裹在另一个 div 中用作参考：

<div class="fb-container"> 
    <div class="fb-page" ...stuff you need for FB page plugin... </div>
</div>

最后，包装器的简单 CSS 确保它延伸到可用的 space:

.fb-container {
    width: 95%;
    margin: 0px auto;
}

将所有这些放在一起，结果似乎非常令人满意。希望这会对某人有所帮助，尽管很久以前就发布了这个问题。

响应宽度 Facebook 页面插件

Responsive width Facebook Page Plugin

facebook-social-plugins