响应宽度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的新“Page Plugin”宽度范围从180px到500px，根据文档。

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

选中自适应宽度后，例如：

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

适用于小屏幕/响应行为

• 在较小的屏幕上渲染时，在插件容器上强制执行所需的qazxsw poi，插件会尝试适应。
• 如果容器比配置的width更薄，则插件会自动呈现较小的宽度（以适应较小的屏幕）。
• 您可以在移动设备上缩小容器，只要它符合width的最小值，插件就会适合。

没有自适应宽度

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

Answer 2

我提炼了Twentyfortysix的一些答案，只在调整大小完成后触发事件。

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

data-adapt-container-width="true"

Answer 3

似乎Facebook页面插件在过去的5 - 7年里根本没有变化:)它从开始没有响应，现在仍然没有，甚至新的参数

(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();
        }
        }); 
    });

不起作用或我不明白它是如何工作的。

我正在寻找最简单的方法来做qazxsw大便，而且它似乎不可行。胡说八道是最好的。设计师如何解决这个问题？

我找到了2017年10月的最佳决定：

Adapt to plugin container width

这让我们不会破坏响应式屏幕的屏幕尺寸宽度，但仍然看起来很难看，因为在一段时间内不会拉伸... Facebook根本不关心插件设计。这是事实。

Answer 4

这是iframe包含方式的动态调整大小，在resize事件上有一些延迟重新渲染：

PLUGIN SIZE 100% WIDTH

Answer 5

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

问题是原始的

.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 HTML（我只是将ID元素添加到Facebook提供的内容中，以避免任何选择器事故）：

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);
});

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

FB.XFBML.parse()

Answer 6

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

<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>

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

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

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

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();
};

Answer 7

不要忘记data-href字段！对我来说，评论没有它，但没有响应。当然data-width ='100％'

Answer 8

大家好！

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

1）。单独文件中的Javascript代码（最佳解决方案）：

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);
    }
};

Demo

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                       				   		
############################################ */

2）。 Javascript代码是用HTML编写的：

@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>

Codepen

谢谢storsoc！

祝大家一切顺利，祝你有个美好的一天！

Answer 9

当插件放在一个很薄的列中时，例如侧边栏，这不会很好。在中等大小的屏幕上，这些屏幕的宽度通常小于280px。

180px

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

Answer 10

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

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

Answer 11

要使新的

<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>

对初始页面加载做出响应，您需要删除Facebook Page Plugin属性，而是添加

data-width

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

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

没有动态调整大小

Page插件使用响应式，流畅和静态布局。您可以使用媒体查询或其他方法来设置父元素的data-adapt-container-width="true" ，但是：

该插件将在页面加载时确定其width。页面加载后，它不会对框模型的更改作出反应。如果你想在窗口大小调整上调整插件的width，你需要手动重新渲染插件。

资料来源：width

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

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

Answer 12

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

我添加了https://developers.facebook.com/docs/plugins/page-plugin设置，将其调整为容器宽度。

Facebook Page Plugin

但是，iframe或Javascript SDK元素中的一个或多个元素的宽度为340px，这使得Page Plugin无法适应容器宽度。虽然它应该至少180px，最大500px。

Facebook提供的代码却遗漏了一些东西。

data-adapt-container-width="true"

通过手动添加<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> ，页面插件按预期响应并适应容器宽度，最大宽度为500px。

我希望这有助于任何人遇到同样的问题。

Answer 13

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

这是我的代码片段：

data-width="500"

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

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);
  })

Answer 14

从Graph API 2.3开始，Facebook为评论插件提供类似于以下内容的代码：

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

添加

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

使其半响应如下：

data-width="100%"

---

^{Semi-responsive because, the plugin doesn't resize itself on page resize. The size depends on the size of the screen when the plugin loads.}

Answer 15

我们通过将其作为IFRAME使用它来克服了Facebook插件的响应性的一些限制，但是在渲染时使用一些动态调整框架（以及SRC URL中的宽度/高度参数）的JavaScript来引导以填充容器元素。

如果容器大于500px，为了避免在右侧有明显的排水沟，我们只需添加一个带有一些简单数学的比例变换。

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

在我们的使用中，我们不会更改用于桌面使用的Facebook Feed的宽度，对于手持设备/平板电脑视口，这些宽度本质上是固定的（是的，我们陷入方向更改）但是如果您希望您的连续调整，如果浏览器窗口尺寸发生变化，您可以将代码重新激活为自己的练习。

这是在桌面和iOS / Android上使用Chrome和Safari进行测试的：

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

编辑：忘记变换原点，删除需要调整左/顶部以适应规模。谢谢Io Ctaptceb

Answer 16

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

<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>

另外，我正在使用Yugal Jindle的提议，所以我也是

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

和

data-width="555"

现在我的页面还可以！非常感谢！