响应宽度Facebook页面插件
Facebook推出了一个新的页面插件来取代Like框插件。
文档： https ： //developers.facebook.com/docs/plugins/page-plugin/
我用这个新的插件replace了Like Box插件。 在一些网站上，我使用这个CSS代码来使插件在一个元素中响应：
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;} replace这个代码doet不工作：
.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％时，除封面照片外，每个元素都以全宽alignment。
有可能给这个新的页面插件一个响应行为就像Like框插件？
根据文档，Facebook的新“ 页面插件 ”宽度范围从180px到500px 。
- 如果configuration为低于
180px，则会强制实现180px的最小宽度 - 如果configuration为
500px以上，则会强制实现500px的最大宽度
自适应宽度
与like-box不同的是，如果configuration错误，该插件会通过坚持边界值来强制实施其限制。
对于小屏幕/响应行为
-
在较小的屏幕上渲染时，在插件容器上强制desiered
width和插件将尝试适应。 -
如果容器比configuration的
width更薄，则插件会自动呈现更小的宽度（以适应更小的屏幕）。 -
您可以在移动设备上缩小容器，只要插件至less能够容纳
180px，插件就可以适应。
没有自适应宽度
- 插件将以指定的宽度呈现，而不考虑容器的宽度
如果将插件放置在细列中，例如边栏，则这种方法效果不佳。 在中型屏幕上，这些宽度通常小于280像素。
.fb-page, .fb-page span, .fb-page span iframe[style] { width: 100% !important; }
这是我用来阻止外包装容器外的插件的代码。 不像旧的像盒子，这只是溢出，隐藏溢出的内容。
这适用于我（宽度是通过JavaScript加载的JavaScript和FB插件强制）
<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页面插件能够在初始页面加载时做出响应，您需要删除data-width属性，然后添加
data-adapt-container-width="true"
这将使Facebook页面插件响应，但只在最初的页面呈现 ，最小宽度为180px。
我仍然试图找出如何使其真正dynamic响应，尽pipeFacebook的警告（如果我find答案，我会发布更新）。
没有dynamicresize
Page插件可与响应式，stream畅和静态布局配合使用。 您可以使用媒体查询或其他方法来设置父元素的
width，但是：该插件将确定页面加载时的
width。 在页面加载之后，它不会对盒子模型做出反应。 如果您想在窗口大小上调整插件width，则需要手动重新插入插件。
来源： https ： //developers.facebook.com/docs/plugins/page-plugin
正如Io Ctaptceb所build议的那样，您可以通过在浏览器大小上重新初始化窗口小部件来使其dynamic响应，但是这样做会导致您很快耗尽内存。
Yugal Jindle有一个很好的答案，但我想澄清， 我还没有find一种方法来使插件真正dynamic响应 。
对于那些正在寻找尺寸小于280的JS解决scheme的人来说
这里是我的代码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; }
从graphicsAPI 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>
半响应，因为插件不调整页面大小本身。 大小取决于插件加载时屏幕的大小。
我在这里为那些与我有同样问题，并找不到他们的答案之间的评论或任何其他stackoverflow页面的问题。
我添加了Facebook页面插件的设置，将其调整到容器宽度。
data-adapt-container-width="true"
但是，iframe或Javascript SDK元素中的一个或多个元素被赋予了340px的宽度，使得Page Plugin不能适应容器的宽度。 虽然它应该有至less180px，最大500px。
但Facebook提供的代码缺less一些东西。
<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" ，Page Plugin按预期进行响应，并将容器宽度调整为500px的最大宽度。
我希望这可以帮助任何人遇到同样的问题。
我们已经克服了Facebook插件作为IFRAME的响应性的一些限制，但是在渲染的时候用一些dynamic调整框架（以及SRC URL中的宽度/高度参数）的JavaScript来填充容器元素。
如果容器大于500像素，为了避免在右边有一个明显的排水沟，我们简单地添加一个简单的math规模变换。
当SRC最初是空的（当我们引导它时），然后在我们设置SRC时加载完成之后，IFRAME onload事件触发，但是如果SRC属性已经存在，我们简单地短路。
在我们的使用中，我们不改变桌面使用的Facebook feed的宽度，对于手持/平板电脑视口，这些宽度是固定的（是的，我们陷阱方向的改变），但是如果你想让你不断调整，如果浏览器窗口大小发生变化，您可以重新启动代码作为练习。
Chrome和Safari在桌面和iOS / Android上进行了testing：
<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
我细化了Twentyfortysix的答案，只是在resize后才触发事件。
另外我加了检查窗口的宽度，所以不会触发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(); } }); });
看起来，Facebook的页面插件在过去的5 – 7年内根本没有变化:)从开始到现在还没有响应，甚至是新的参数Adapt to plugin container width不起作用，或者我不了解它是如何工作的。
我正在寻找最有可能的简单方法来做PLUGIN SIZE 100% WIDTH ，而且看起来不是可能的。 这是最好的废话。 devise师如何解决这个问题？
我发现这个时候的最好的决定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根本不关心插件devise。 这是事实。
我正在使用罗伯特·史密斯提出的解决scheme，用最大宽度代替宽度：
.fb-page, .fb-page span, .fb-page span iframe[style] { max-width: 100% !important; }
另外，我使用的是Yugal Jindle的build议，所以我已经
data-width="555"
和
data-adapt-container-width="true"
现在我的网页是好的！ 万分感谢！
不要忘记data-href字段！ 对我来说，评论是没有它的工作，但没有反应。 当然，数据宽度='100％'
大家好！
我的版本与现场演示（原生JavaScript）：
1）。 Javascript代码在一个单独的文件（最好的解决scheme）：
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>
