我正在围绕“响应式设计”概念开发一个网站，但是 facebook 社交插件是静态宽度，并且在调整大小时会“破坏”布局。
使用媒体查询，我将插件设置为隐藏在低分辨率浏览器（移动设备等）上。然而，在桌面浏览器上，当浏览器窗口变小，但又没有小到隐藏插件时，它们会脱离布局。
有什么方法可以为 Facebook 社交插件设置流体宽度？
问问题
95144 次
29 回答
62
这些方法都不起作用，但使用这个想法，以下对我有用：
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
于 2012-04-21T03:02:48.837 回答
56
我找到了使用 css 的解决方案。灵感来自这篇文章 http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
于 2011-10-17T11:08:44.513 回答
36
正确的工作答案是我在这里找到的东西的组合。Mikel 的回答是一个好的开始：
这说：
我们已经对此进行了修复。从现在开始，您可以将宽度指定为 100%（例如 data-width="100%"）以获得流畅的布局。文档也更新了：https ://developers.facebook.com/docs/plugins/comments 感谢您的耐心等待。
但是...这将加载插件在加载时可用的宽度。当您调整页面大小时，它将保持与加载页面时相同的宽度。要解决这个问题 - 并制作 Facebook 社交插件的真正响应版本 - 在您的 CSS 中添加以下内容：
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
这将导致插件在调整窗口大小时调整到可用空间。
如果您希望此代码适用于页面插件，请将类名“fb-comments”更改为“fb-page”：
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
（感谢添加 Black_Stormy！）
于 2014-09-24T12:25:55.820 回答
9
我设法通过使用以下代码使其工作：
.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
width: 100% !important;
}
因为在我的 html 文件中我有这个：
<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true" data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>
提示：您应该根据 div 类更改您的 css。
于 2012-04-21T22:58:00.507 回答
7
虽然这是一个老问题，但它现在是“facebook 评论插件响应”的最高 Google 结果，因此它仍然具有相关性。
不再需要其他答案中的解决方法，因为 FB 最近（2014 年 5 月）已在其末尾修复了此问题。
来自https://developers.facebook.com/x/bugs/256568534516879/：
我们已经对此进行了修复。从现在开始，您可以将宽度指定为 100%（例如 data-width="100%"）以获得流畅的布局。文档也更新了：https ://developers.facebook.com/docs/plugins/comments 感谢您的耐心等待。
所以现在您可以将您的 HTML 更新为例如
<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>
并且不需要任何额外的 CSS 解决方法。
编辑：这将创建插件以使其宽度适应加载时的可用空间。当您调整浏览器窗口的大小时，插件将保持初始宽度。要使其真正响应，请将其添加到您的 CSS 中：
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
这将导致插件在调整浏览器大小时适应当前可用空间
于 2014-06-08T10:32:57.530 回答
5
如果您使用官方的 wordpress facebook 插件，因为移动嗅探 facebook 做。
当检测到移动设备用户代理时，移动版本将自动显示。您可以通过将 mobile 参数设置为 false 来关闭此行为。请注意：移动版忽略了宽度参数，取而代之的是 100% 的流动宽度，以便在纵向/横向切换情况下很好地调整大小。您可能需要为您的移动网站调整 CSS 以利用此行为。如果愿意，您仍然可以通过容器元素控制宽度。 http://developers.facebook.com/docs/reference/plugins/comments/
您需要在第 35 行更改 facebook/social-plugins/fb-comments.php。
<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>
这将允许您使用以下样式设置样式。
.fb-social-plugin {
width:98%!important;
}
.fb_iframe_widget span {
width:100%!important;
}
.fb-comments iframe[style] {width: 100% !important;}
如果他们可以修复他们的移动版本或在他们的插件 GUI 上设置一个设置，那就太好了。
于 2012-06-19T03:09:42.843 回答
5
它肯定只是为了增加.fb-comments span风格。
.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
于 2013-07-27T13:00:28.023 回答
4
接受的答案对我不起作用。
我在这里的评论中发现了 Craig Bailey 的这个：
http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress
这是完全流畅的（在 osx ff & safari，ios6 中测试）。
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
于 2012-11-18T00:55:49.490 回答
3
看起来这篇文章不是很旧，但答案对我不起作用。我不得不将它添加到我的样式表中......
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
.fb_iframe_widget 和 .fb_iframe_widget[style] 似乎都很重要。
于 2012-02-29T02:11:35.983 回答
2
我已经使用这个简单的脚本来完成这项工作（请参阅链接中的代码）。
https://gist.github.com/2111366
您必须对信息进行一些更改，以便使用您的 Facebook 应用程序 ID 和页面 URL。
此解决方案使用 jQuery，因此您必须了解它是如何工作的，但是一旦您获得脚本来执行您的响应式设计，您的响应式设计将在页面加载或调整页面大小时起作用。
于 2012-03-22T22:39:45.563 回答
2
关于此调整大小的重要说明：如果 Facebook 评论脚本检测到您在移动设备上，它会破坏这一点。但是，如果您让<fb:comments>标签包含属性值mobile="false"，那么（目前）Facebook 的脚本将尊重您的 CSS。
于 2012-06-04T03:32:24.023 回答
2
对于那些喜欢将HTML5代码用于 Facebook 插件（如Activity Feed或Like Box ）的人：
/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.fb_iframe_widget span[style], .fb_ltr[style] {
width:420px !important;
}
}
- 不适用于注释或基于百分比的宽度；如果您需要纯粹的流动性，请坚持使用 iframe 代码。
- H/T 向Alan发送此页面顶部的 css-tricks 链接。（：
于 2012-08-28T07:16:18.890 回答
2
只需将其放在您的 CSS 文件或带有样式标签的 html 代码中！
<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]{width: 100% !important;}
</style>
于 2013-11-26T11:35:12.717 回答
2
截至 2015 年 9 月，用我自己的解决方案加入不知情的群众：
Facebook 为fb-page名为 的小部件提供了一个选项adapt-container-width，它（根据文档）应该跟踪父级的宽度（最大宽度为500px）。使用 重新渲染时FB.XFBML.parse()，尽管您在实际小部件本身上设置了什么，小部件似乎卡在父容器宽度的一个奇怪值上。目前，这已经足够好了：
- 使用 FB 的代码生成器创建元素（在本页顶部）
- 将事件绑定到
window的resize方法，（可选地使用_.debounce合理的限制来防止浏览器因中间请求而过载 等待 Facebook 公开更多的小部件 API，这样我们才能看到到底发生了什么
<div class="fb-page" data-adapt-container-width="false" <!-- This bit's the important part --> data-href="https://www.facebook.com/yourpage" data-show-posts="true" data-small-header="true" data-width="100%" > <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote> </div> </div>
结合以下javascript：
// FB Resize
$(window).bind('resize', _.debounce(function() {
if (window.FB && FB.XFBML && FB.XFBML.parse) {
var el = $('.fb-page');
var width = el.parent().width();
el.attr('data-width', width);
FB.XFBML.parse();
}
}, 1000)); // Debounce until 1000ms have passed
于 2015-09-06T20:04:44.677 回答
1
这是 JQuery，可能是您问题答案的一部分。我正在使用类似按钮的 HTML5 版本：
<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>
“div.main-content”元素是我的设计中必须适合的like按钮元素。调整大小一直有效，直到 div 变得如此之小，以至于 div.fb-like 中的数据布局属性需要从“标准”更改为占用更少水平空间的替代方案。我是新来的，所以我不确定这是否是使类似按钮具有响应性的最优雅的解决方案。我想从更擅长这个主题的人那里看到这个问题的答案。
$(window).resize(function() {
var computed_width = $('div.main-content').width();
$('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height: 24px; width: ' + computed_width + 'px');
});
于 2011-09-19T07:48:55.850 回答
1
使用检查元素查看正在生成的代码。在某些情况下，例如 Wordpress Facebook 插件，它们使用不同的“id”，一旦您发现正在使用的 id 添加
#fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
这并不总是能解决我学习的问题。虽然您可以更改颜色和一些尺寸使其具有响应性，但仍然非常有问题。它似乎不喜欢百分比，也看不到它所在的盒子的大小，所以这不起作用。我正在玩@media 查询以根据浏览器窗口的大小调整它的大小。
如果它能识别宽度会很好，但@media 似乎是唯一的方法。
于 2012-03-08T22:50:18.417 回答
1
Facebook 对评论插件的输出标记进行了一些更改。我正在使用 HTML5 版本。从上面共享的内容中修改的 CSS 起到了作用。
.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
于 2012-04-18T03:53:03.577 回答
1
这是一些 jquery，它应该在对输出标记的更改中保持不变，因为它使用正则表达式仅重写宽度，而单独留下样式标记的其余部分。
您需要指定正确的容器 ID 或选择器，替换我的示例：#footer-last。iframe 根据容器宽度的变化调整大小，需要将其设置为响应式。
// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
于 2012-05-28T23:54:20.460 回答
1
我不知道评论，但是对于链接框，您所要做的就是直接从 Facebook 使用 iframe 选项并以百分比切换像素宽度，它会根据它所在的列。
于 2012-06-16T23:54:50.270 回答
1
这是一个小解决方法，它将 HTML5 Facebook LikeBox 插件附加到具有响应高度或宽度的 DOM 中。
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
于 2012-11-03T15:57:56.033 回答
1
这是一个使用 jQuery 的完整示例，带有响应宽度和加载图像。代码中注释了 Alan 和 Jubair 的 CSS 代码。
这在 Android 网络视图中运行良好
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100%;/* !important; To get the control with JQuery*/
}
</style>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
channelUrl : '//domain.com/channelUrl.php',
status : true,
cookie : true,
xfbml : true
});
//Event fired when the plugin has been completely loaded
FB.Event.subscribe('xfbml.render',
function(response) {
//alert('You liked the URL: ' + response);
var w = (typeof window.innerWidth != 'undefined')?
window.innerWidth
:(typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) ?
document.documentElement.clientWidth
: document.getElementsByTagName('body')[0].clientWidth;
w *= .950; //95% for best fit on mobile screens
//RESIZE
$(".fb-comments").css("width",w);
$(".fb-comments > span").css("width",w);
//Some days ago the next line would be sufficient
$(".fb_ltr").css("width",w);
//Now the modify of the span width is necessary to do the work
$("#div_loading_gif").remove();
}
);
};
//cargando SDK Asíncronamente
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="div_loading_gif" style="width:100%; height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >
</div>
<!--Usando jquery modificar el style de el div de clase fb_ltr
cambiar el ancho por el de la pantalla-->
<div class="fb-comments"
style="padding:0 auto;"
data-href="http://domain.com/comments.html"
data-width="100px"
data-num-posts="5"
data-mobile="false"
>
</div>
</body>
于 2013-01-27T19:20:01.910 回答
0
我认为max-width比width这种情况更好，它对我有用：
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
于 2013-12-02T21:41:20.417 回答
0
这对我有用
/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
display: inline !important;
}
.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
width: 100% !important;
}
于 2014-01-16T12:50:52.450 回答
0
我刚刚尝试过这个，现在看起来有一个具有固定宽度的<div>内部iframe，这意味着您现在实际上需要style使用 javascript 删除标签以使其流畅。
编辑：您无法使用 JS 访问 iframe 内容，因为它来自另一个域
于 2014-03-13T16:08:24.630 回答
0
使用“fb-container”类创建一个空的 div，您希望 facebook like 框（或其他社交插件，普遍适用），然后添加以下 jQuery：
$(document).ready(function(){
$('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});
ps您可以将PARENT DIV替换为您希望评论框匹配的任何其他元素，并将WWW.YOURSITEHERE.COM替换为您的站点
于 2014-03-31T07:08:20.787 回答
0
这对我有用：
$('.fb-comments').attr('data-width', '100%');
于 2014-05-22T14:13:39.067 回答
0
我使用一点 jQuery 让它工作，并在页面加载和窗口大小调整时设置“data-width”属性。我在使用所有 CSS 方法时遇到的问题是，一些注释和按钮隐藏在容器边缘之外或溢出。
这是我的 0.02 美元，希望对您有所帮助。此外，只需将 #content 选择器设置为您希望评论框匹配的任何内容，例如容器 div ...
jQuery(文档).ready(函数() {
//check for device width and reformat facebook comments
function fbCommentWidth() {
jQuery('.fb-comments').attr('data-width',jQuery('#content').width());
}
//run on resize, and reparse FB comments box
jQuery(window).on('resize',function() {
fbCommentWidth();
FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();
});
于 2014-08-01T14:59:25.190 回答
0
这就是它的工作原理：只需添加这个 data-width="100%" 这是一个示例：
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
于 2014-08-08T16:54:44.127 回答
0
这是我最终得到的结果：
(function() {
window.addEventListener('load', updateWidth);
window.addEventListener('resize', debounce(function () {
updateWidth();
if (window.FB && FB.XFBML && FB.XFBML.parse) {
FB.XFBML.parse();
}
}, 1000));
function updateWidth() {
$('.fb-like, .fb-comments').each(function () {
var el = $(this);
var width = el.parent().width();
el.attr('data-width', width);
})
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
})();
于 2018-05-16T11:37:49.510 回答