响应宽度Facebook页面插件

时间：2015-04-03 09:10:29

标签： facebook-social-plugins

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插件提供响应行为吗？

17 个答案:

答案 0 :(得分：40)

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

  • 如果在180px下方配置，则会强制执行180px
    • 的最小宽度
  • 如果在500px之上配置，则会强制执行500px
    • 的最大宽度

选中自适应宽度，例如：

enter image description here

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

适用于小屏幕/响应行为

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

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

  • 您可以在移动设备上缩小容器，只要插件符合180px的最小值，插件就会适合。

没有自适应宽度

enter image description here

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

答案 1 :(得分：28)

当您将插件放置在精简列（例如侧栏）中时，这并不能很好地工作。在中型屏幕上，这些屏幕的宽度通常小于280px。

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

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

答案 2 :(得分：12)

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

答案 3 :(得分：9)

要使新的Facebook Page Plugin对初始页面加载做出响应，您需要删除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有一个很好的答案，但我想澄清一下我还没有找到一种方法让插件真正动态响应。

答案 4 :(得分：4)

我把它放在那些与我有同样问题并且无法在评论之间或任何其他stackoverflow页面上找到答案的地方。

我添加了Facebook Page Plugin，其设置会将其调整为容器宽度。

data-adapt-container-width="true"

但是，iframe或Javascript SDK元素中的一个或多个元素的宽度为340px，这使得Page Plugin无法适应容器宽度。虽然它应该至少有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"，页面插件按预期响应并适应容器宽度，最大宽度为500px。

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

答案 5 :(得分：3)

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

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

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

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

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

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

答案 6 :(得分：3)

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

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

答案 7 :(得分：3)

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

的人

这是我的代码snippit：

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

答案 8 :(得分：2)

我正在使用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"

现在我的页面还可以！谢谢你！

答案 9 :(得分：1)

我对Twentyfortysix做了一些回答，只是在调整大小后才触发事件。

此外，我添加了对窗口宽度的检查，因此不会触发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();
        }
        }); 
    });

答案 10 :(得分：1)

似乎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根本不关心插件设计。这是事实。

答案 11 :(得分：0)

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

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

答案 12 :(得分：0)

与其他人一样，我发现可以在容器收缩时使插件（通过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();

答案 13 :(得分：0)

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

Demo

答案 14 :(得分：0)

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

受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可以确保其在可用空间上延伸：

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

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

答案 15 :(得分：-1)

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

答案 16 :(得分：-2)

大家好！

我的版本带有现场演示（原生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 ！

祝大家一切顺利！

相关问题
最新问题