如何使 Facebook 评论小部件具有流畅的宽度？

Posted 2023-02-21

技术标签:

【中文标题】如何使 Facebook 评论小部件具有流畅的宽度？【英文标题】：How to make Facebook comments widget a fluid width? 【发布时间】：2011-11-18 20:02:51 【问题描述】：

是否可以使 Facebook 的 cmets 小部件具有流体宽度？他们的documentation 显示了fb:comments xfbml 或 iframe 的宽度字段，指定为：

width - 插件的宽度，以像素为单位。建议的最小宽度：400 像素。

所以也许这是不可能的......

【问题讨论】：

请参阅下面@blues-driven 的评论以获取 Facebook 解决方案***.com/a/23697427/84162 【参考方案1】：

艾伦，您的解决方案正在运行，但看起来 facebook 更新了他们的插件并打破了风格。我使用通用选择器让它再次工作：

.fb-comments, .fb-comments * 
    width:100% !important;

【讨论】：

这个对我有用，在这个问题上选择的答案没有。这应该会继续工作，因为它以 div、嵌套 span 和 iframe 以及 FaceBook 将来可能添加的任何其他元素为目标，并覆盖了内联样式属性。【参考方案2】：

我找到了使用 css 的解决方案。灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/

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

【讨论】：

漂亮！工作完美！ @在。你应该认真接受这个答案。 =) 为确保此 CSS 正常工作，不得指定宽度（data-width 属性）。移动 cmets 怎么样。 CSS 在台式机上运行良好，但在 iPhone 或 Facebook 自动切换回移动 cmets 的手机上却不行我还必须添加.fb_iframe_widget > span[style]。这对我有用 -> .fb-cmets, .fb-cmets iframe[style], .fb-cmets span[style] width: 100% !important;【参考方案3】：

可能是 FB 的下一个变化，这次效果更好：


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  width: 100% !important;

【讨论】：

我们是 2013 年 2 月 22 日，这是唯一一个适用于当前版本的 fb:cmets。截至 2014 年 2 月 6 日仍然有效。【参考方案4】：

截至 2014 年 3 月，没有任何 CSS 解决方案对我有用。似乎 Facebook 已更改插件，现在在 iFrame 内的容器上设置宽度，您无法用 CSS 覆盖。

经过一番挖掘，我注意到 cmets 的宽度实际上是由 iframe src width=XXX 的最后一个参数控制的。考虑到这一点，我是这样解决的：

// ON PAGE LOAD
setTimeout(function()
  resizeFacebookComments();
, 1000);

// ON PAGE RESIZE
$(window).on('resize', function()
  resizeFacebookComments();
);

function resizeFacebookComments()
  var src   = $('.fb-comments iframe').attr('src').split('width='),
      width = $('#container').width();

  $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);

#container 是您希望 cmets 插件拉伸以适应容器的宽度。将其更改为您需要的任何内容，此代码应该适合您。

我正在使用超时，因为加载 iframe 后我无法触发它。对此的任何帮助将不胜感激，但超时可以完成工作。

编辑：此解决方案会导致后退按钮中断。我现在正在尝试这个解决方案，它似乎更好：https://***.com/a/22257586/394788

【讨论】：

好东西。这是 FB 上的错误报告：developers.facebook.com/x/bugs/256568534516879 非常好的解决方案！而不是 $('#container').width();我把 $('.fb-cmets iframe').parent().width() 让它更加动态！【参考方案5】：

我认为我有一个解决方案，可以对 Ryan 3 月 5 日的回答有所改进。

您可以执行以下操作，而不是延迟后重新加载 Facebook iframe。

插入一个常规的 Facebook cmets 标签，但在类中附加一个额外的位，这样 Facebook 就不会检测到它，但你可以。

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

然后添加一些 JS 来选择这个 div，用所需的宽度修改它，然后触发 Facebook 的解析器。

var foundFBComs = false;

$('.fb-comments-unloaded').each(function()

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

);

if (foundFBComs && typeof FB !== 'undefined') 
    FB.XFBML.parse();

【讨论】：

更喜欢这个答案，不依赖每个月都会变化的 CSS，而且比设置超时和重新加载元素要快很多。真的很喜欢这个解决方案。直观，并让 FB 在加载插件时通过提供正确的宽度来完成工作。测试并在 2014 年 3 月 27 日开始工作。很棒的解决方案，完全符合您的期望。感谢 Gav 的回答！ @gav 我不是 WP 专家，所以我现在迷路了“插入常规 Facebook cmets 标签”你的意思是什么？我应该在哪里插入这个标签？ @ReynierPM 如果您访问 Facebook 的文档页面：developers.facebook.com/docs/plugins/comments 并单击“获取代码”，您会看到他们为您提供类似

&lt;div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"&gt;&lt;/div&gt;

的内容 - 这是我的 cmets 标签米指。您应该将它插入您希望 cmets 插件出现在您的页面中的任何位置。【参考方案6】：

Facebook 已解决此问题。您现在可以添加data-width="100%" 或将宽度选项设置为100% 并酌情删除任何疯狂的js hack！

【讨论】：

这仅适用于 350 像素及以上。因此，例如在 iPhone SE 上，您无法进行响应式嵌入，而必须使用水平滚动【参考方案7】：

我通常希望避免使用通用选择器以获得更好的性能。您应该能够得到与

相同的结果

.fb-comments, .fb-comments span, .fb-comments iframe width: 100% !important;

如果您检查 facebook 选择器，可能会得到更多改进...

【讨论】：

【参考方案8】：

在初始化 facebook 插件之前插入此代码，您将拥有流畅的 fb cmets :):):)

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() 
resizeFacebookComments();
);

function resizeFacebookComments() 
var src = $('.fb-comments iframe').attr('src').split('width='),
    width = $(".fb-comments").parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);

【讨论】：

简单而有效，facebook 引入的 100% 宽度仅适用于初始大小，并且不会不断调整，因此如果您有一个流畅的布局，用户会重新调整它溢出的窗口大小或看起来很小。这段代码很好地解决了这个问题。【参考方案9】：

看起来 facebook 更新了他们的文档。你现在可以使用 data- 或

https://developers.facebook.com/docs/plugins/comments/

【讨论】：

刚刚在我的 html 中完成。像没有 CSS 要求的魅力一样工作。复制和粘贴。【参考方案10】：

我还不能发表评论，因为我的声誉还不够高，但截至 2014 年 12 月 21 日有解决方案

为了在 CSS 中工作：

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  width: 100% !important;

您必须在 FB 插件代码中将 data- 部分设置为 100%，即

<div class="fb-comments" data-href="your site here" data- data-numposts="5" data-colorscheme="light"></div>

流体运动的工作示例：http:www.unitedbiker.org

希望这对大家有所帮助，想法是将 iframe 样式覆盖为父元素的 100%，并将实际的 FB 插件设置为 iframe 的 100%。这是我的工作。

【讨论】：

【参考方案11】：

这对我有用，但我需要添加 span 标签才能正常工作：

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

【讨论】：

【参考方案12】：

我认为这对每个人都有效。为我工作，2013 年 12 月 26 日，http://eddie11.com/dj-eddie-talks/

#fbSEOComments, 
#fbSEOComments span,
#fbSEOComments div,
#fbSEOComments iframe,
#fbSEOComments iframe[style],
#fbSEOComments .fb_iframe_widget,
#fbSEOComments .fb_iframe_widget span,
#fbSEOComments .fb_iframe_widget iframe

    width: 100% !important;

以下方法都不适合我，但我还是把它留在那里了。

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,

【讨论】：

【参考方案13】：

我知道这是个老问题，但这可能对某人有帮助。

您可以使用以下代码使您的 cmets 流畅

.fb-cmets, .fb-cmets iframe[style], .fb-like-box, .fb-like-box iframe[style] width: 100% !important; .fb-cmets 跨度，.fb-cmets iframe 跨度 [样式]，.fb-like-box 跨度，.fb-like-box iframe 跨度 [样式] 宽度：100% ！重要；

可以查看这里的代码，因为这里的pre函数删除了一些东西。我是新来的。问候

Facebook Comments Fluid

【讨论】：

【参考方案14】：

花了一些时间调查这个问题。尽管 FB 建议以像素为单位指定绝对宽度，但如果您将其设置为“100%”，它看起来就可以工作。请注意下面的数据宽度。

<div class="fb-comments" data- data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>

是的，这很简单，没有 onresize 回调没有 iframe src 修改。

【讨论】：

这是最好的解决方案【参考方案15】：

在解决这个问题很长一段时间后，我发现了一个花絮，它应该可以帮助您确定此页面上的哪些 CSS 技巧将有助于您的特定网站/版本/年份的 facebook 评论插件。在浏览器中查看您的网站并检查 facebook 评论插件周围的元素。你应该找到你添加的一个 sn-p，现在被 facebook 的 javascript 小部件修饰，看起来像这样：

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

注意以下部分：

class="<whatever class your version is using>"

这是您要使用的类 - 因此在我上面的示例中，您需要添加以下样式：

<style>
    .fb_iframe_widget,
    .fb_iframe_widget iframe[style],
    .fb_iframe_widget span[style],
    .fb_iframe_widget *  
        width: 100% !important;
    
</style>

【讨论】：

【参考方案16】：

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

【讨论】：

【参考方案17】：

如果您的 Facebook 评论插件的代码看起来像 (XFBML)：

<fb:comments href="URL_HERE" numposts="5" colorscheme="light"></fb:comments>

那么下面的 CSS 应该可以完成工作：

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe 
     width: 100% !important;

【讨论】：

【参考方案18】：

这是唯一对我有用的东西！

$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() 
resizeFacebookComments();
);

function resizeFacebookComments() 
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $(".fb-comments").`enter code here`parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);

【讨论】：

【参考方案19】：

无需覆盖css，使用data-width="100%"

<div class="fb-comments" data- data-href="yourURL"></div>

【讨论】：

以上是关于如何使 Facebook 评论小部件具有流畅的宽度？的主要内容，如果未能解决你的问题，请参考以下文章

如何设置宽度等于android上的另一个小部件

使容器小部件垂直填充父级

更改按钮文本时如何自动更改 QPushButton 宽度和 QMenuBar 角小部件宽度？

如何在给定宽度的小部件中移动文本

如何使 Gridstack.js 小部件垂直响应？

如何使小部件在颤动中相互浮动[关闭]