是否可以为Facebook的社交插件设置流畅的宽度？

Question

我正在围绕"响应式设计"概念开发一个网站,但facebook社交插件是静态宽度,并在重新调整大小时"打破"布局.

使用媒体查询,我已将插件设置为隐藏在低分辨率浏览器(移动设备等)上.但是,在桌面浏览器上,当浏览器窗口的大小较小,但不是很小以隐藏插件时,它们会突破布局.

有什么办法为Facebook社交插件设置一个流畅的宽度？

Answer 1

这些方法都不起作用,但使用这个想法,以下工作对我有用:

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

Answer 2

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

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

Answer 3

正确的工作答案是我在这里找到的东西的组合.米克尔的答案是一个好的开始:

Facebook开发者平台链接

这说:

我们已经解决了这个问题.从现在开始,您可以将宽度指定为100%(例如data-width ="100%")以获得流畅的布局.文档也会更新:https://developers.facebook.com/docs/plugins/comments 感谢您的耐心等待.

但是......这将加载插件在加载时可用的宽度.当您调整页面大小时,它将保持与加载页面时的宽度相同.要解决此问题 - 并制作Facebook Social Plugin的真实响应版本 - 在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的加入!)

Answer 4

我设法通过使用此代码使其工作:

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

Answer 5

虽然这是一个老问题,但现在这是"facebook评论插件响应"的谷歌搜索结果,所以它仍然是相关的.

其他答案中的解决方法不再需要了,因为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;
}

这将导致插件在调整浏览器大小时适应当前可用的空间

Answer 6

如果你使用官方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上设置设置,那就太好了.

Answer 7

它绝对适合添加.fb-comments span风格.

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