使 Facebook 插件具有响应性答案

【问题标题】：Make Facebook plugin responsive使 Facebook 插件具有响应性
【发布时间】：2016-02-21 09:46:13
【问题描述】：

所以我正在使用新的 Facebook 插件（页面插件）并且很难让它在窗口大小调整时做出响应。

我设置了 data-adapt-container-width="true" 选项，但只有在页面加载/重新加载时才会触发。

请查看我的 JSFiddle：http://jsfiddle.net/29zgc790/（在 exporer 中尝试，如果不起作用，请尝试我的 plunker：http://plnkr.co/edit/IPnjpJUXxkO4WTLFTTW0?p=preview）我已将插件的起始宽度设置为最大（500px），但我想触发当容器（窗口）变得比那个特定时间的插件小时重新加载插件。

我正在考虑类似的事情：

$(window).resize(function () {
    //Do the reload of plugin
});

希望你们有一个解决方案的想法，可以指导我以正确的方式。

【问题讨论】：

标签： javascript jquery css facebook

【解决方案1】：

嵌入生成的 iframe：

获取父级宽度并将其设置到 iframe 和 iframe 的 src 属性中

$(window).resize(function() {
  //Do the reload of plugin
  var new_width = $("#facebook").parent().width();
  $("#facebook").css("width", new_width);
  var url = $('#facebook').attr('src').split("&width=");
  url = url[0] + '&width=' + new_width;
  $('#facebook').attr('src', url);
});

【讨论】：

你试过exploerer中的小提琴吗？我尝试了您的代码，它适用于重新加载 iframe，但未重新发送 sn-p 信息，这意味着容器不会调整大小。
Plunker 工作.. 我建议创建一个外部文件。您的页面将加载包含所有 facebook 代码的 iframe，并在调整大小时重新加载该页面，以便您需要的所有代码。
上帝的观点，但如果我需要在每个 reszis 加载“两页”时，我发现页面很重的风险。
好吧，您可以在 javascript 上执行此操作，并使其持续响应而无需任何重新加载.. 或删除并重新添加重新加载时所需的所有脚本.. 或检查是否有 fb 开发人员要制作它没有这些只是触发facebook脚本中的功能:)
只使用 iframe。您只需将链接编辑到 iframe src 中。设置样式宽度开始，它响应获取父元素宽度。 plnkr.co/edit/FtWEOnoltTrKmFQo7HlF?p=preview

【解决方案2】：

所以在阅读了 facebook web sdk 的文档后，我发现了这个重新加载 iframe 的小功能。

FB.XFBML.parse();

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

这解决了我的问题，但 @LucaGiardina 也有一个很好的解决方案，但我认为如果存在内置函数，使用内置函数总是一种上帝的做法。

【讨论】：

【解决方案3】：

经过几天的尝试，我想出了一个可行的解决方案！我实际上注册只是为了分享它:)

在此处复制页面插件的 iframe 代码： Facebook Page Plugin（转到“获取代码”，然后单击刚刚打开的窗口顶部的“iFrame”。）
将代码粘贴到您的 html 内的 div 类 fb-column，然后删除 width 和 src 属性（粘贴 src 属性的值 - 长链接 - 其他地方，你需要稍后）

将此代码添加到您的主 .js 文件中（计算框大小和调用函数的功劳转到 Mugo Web

function resizeFBPlugin() {
  //calculate parent box width
  var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
  // set the src and replace the actual width with the calculated width. 
  document.getElementById("fb-column").src = //paster link from iFrame here. Be sure to keep everything as it is, only replace the number after &width= with container_width
  // it should look something like this: 'https://www.facebook.com....&width='+container_width+'&height=......';
  // NOTE: take note of the use of apostrophes and + signs
  //set the width of the iframe
  document.getElementById("fb-column").width = container_width;
};

// call the function on resize and on window load

$(window).on('resize', function() {
setTimeout(function(){resizeFBPlugin()}, 500);
});

$(window).on('load', function() {
setTimeout(function(){resizeFBPlugin()}, 1500);
});

就是这样！您现在拥有一个完全响应的 Facebook 页面插件（当然，在最小 180 像素和最大 500 像素的宽度内。

顺便说一句，Twitter 插件运行良好。我不知道为什么 Facebook 决定不解决这个问题……我想他们没有钱给合适的开发人员 :)

【讨论】：

您好，您不需要计算任何容器大小，因为插件会占用父级的整个空间。你需要做的是当有一个带有 FB.XFBML.parse(); 的 window.resize 时重新加载插件；
为此，您需要使用 JavaScript SDK 方法嵌入插件。我试过了，但它不起作用。容器太小或插件比容器大。在这个工作解决方案中，我使用 iFrame 嵌入方法，其中容器的宽度在 iFrame 的 src 中指定。这就是为什么您需要计算父容器的宽度并使用该变量的输出。
这很好用，只是你忘了提到 iframe 应该被赋予 fb-column 的 id（以及具有该类的容器 div）因此 getElementById("fb-column") 部分.
您在每个resize 事件上调用setTimeout，如果您拖动以调整页面大小并且您永远不会清除先前的超时，最终将调用resize 数十次。您需要为超时 ID 安装一个全局变量，例如var resizeTimeout = setTimeout(..); 和 resize 事件处理程序你会做 clearTimeout(resizeTimeout); resizeTimeout = setTimeout(..);

【解决方案4】：

我已经找到了一些解决方案，但我认为至少对我来说最好的解决方案是将 fb-comment-wrapper 的父标签设置为某种响应式，然后使用 facebook 内置的 css 数据宽度：

<div class="fb-comment-wrapper">
   <div class="fb-comments" data-href="{{request.build_absolute_uri}}" 
   data-numposts="3" data-width="100%">
   </div>
</div`>

【讨论】：