有没有可能为 Facebook 的社交插件设置一个流动的宽度？

小开

这是 JQuery，可能是您问题的部分答案。我使用的是 HTML5版本的 like 按钮:

<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 类中的 data-outs 属性需要从“ standard”更改为一个占用更少水平空间的替代方案。我在这方面是新手，所以我不确定这是否是最优雅的解决方案，使喜欢按钮响应。我希望看到一个在这个问题上更专业的人来回答这个问题。

$(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');
});

小开

我发现了一个使用 css 的解决方案，灵感来自于这篇文章 Http://css-tricks.com/2708-override-inline-styles-with-css/

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

小开

看起来这个帖子不是很老，但是这个答案对我不起作用。我不得不把它添加到我的样式表中..。

#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 ]似乎都很重要。

小开

使用 view 元素查看正在生成什么代码。在某些情况下，比如 Wordpress Facebook 插件，它们使用不同的“ id”，一旦你发现这个 id 被用来添加

 #fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}

这并不总是在学习中起作用。虽然你可以改变颜色和一些大小，使其响应仍然是非常错误的。它似乎不喜欢百分比，并没有看到它的盒子的大小，所以这不工作。我玩弄@media 查询，根据浏览器窗口的大小来调整它的大小。

如果它能识别宽度就好了，但@media 似乎是唯一的方法。

小开

我已经使用这个简单的脚本(参见链接中的代码)使其工作。

Https://gist.github.com/2111366

您必须对信息进行一些更改，以便使用您的 Facebook 应用程序 ID 和页面 URL。

这个解决方案使用 jQuery，因此您必须了解它是如何工作的，但是一旦您得到了执行响应设计的脚本，您的响应设计将在页面加载或调整页面大小时起作用。

小开

Facebook 对评论插件的输出标记做了一些修改。我使用的是 HTML5版本。这个修改了上面共享的 CSS 的技巧。

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

小开

这些方法都不管用，但是使用这个想法，下面的方法对我很有效:

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

小开

我通过使用下面的代码设法使它工作:

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

小开

下面是一些 jquery，它应该在输出标记的更改之间保持不变，因为它使用正则表达式仅重写宽度，而不使用 style 标记的其余部分。

您需要指定正确的容器 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);

小开

关于调整大小的注意事项: 如果 Facebook 的评论脚本检测到你使用的是移动设备，它会破坏这一点。但是，如果您使 <fb:comments>标签包含属性值 mobile="false"，那么(现在) Facebook 的脚本将尊重您的 CSS。

小开

我不知道这些评论是怎么回事，但是在链接框中，你所要做的就是直接使用来自 Facebook 的 iframe 选项，并用一个百分比来调整像素的宽度，它会根据所在列的宽度而变化。

小开

如果你正在使用官方的 wordpress facebook 插件由于移动嗅探 facebook 做。

移动版本将自动显示时，一个移动设备用户代理被检测到。您可以通过设置移动参数设置为 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;}

如果他们能够修复他们的移动版本或者在他们的插件图形用户界面上添加一个设置，那就太好了。

小开

对于那些喜欢使用 HTML5代码的 Facebook 插件，如活动饲料或就像博克斯:

/******* 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 代码。
在这个页面顶部的 css 技巧链接的 H/T 到艾伦。(:

小开

这里有一个小工作，附加 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>");
});

小开

接受的答案对我来说不起作用。

我在这里的评论中找到了克雷格 · 贝利(Craig Bailey)的这篇文章:

Http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress

这是完全流体(测试在 osxff & safari，ios6)。

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

小开

下面是一个完整的示例，使用 jQuery，带有响应宽度和加载图像。代码中注释了 Alan 和 Jubair 的 CSS 代码。

这在 Android 的 webview 中运行良好

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

小开

它肯定会工作只是为了增加 .fb-comments span的风格。

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

小开

只要把这要么在您的 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>

档号: http://dwij.co.in/making-facebook-comments-responsive

小开

我认为在这种情况下，max-width比 width更好，它对我有效:

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

小开

这对我有用

/* 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;
}

小开

我刚刚尝试了这一点，它似乎有一个 <div>内的 iframe有一个固定的宽度，这意味着你现在实际上需要删除与 javascript 的 style标签，使其流动。

编辑: 您无法使用 JS 访问 iframe 内容，因为它来自另一个域

小开

创建一个空 div，其中你希望 facebook like box (或者其他社交插件，普遍适用)使用类“ fb-Container”，然后添加以下 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>');
});

另外，你可以用任何你想让评论框与你的网站匹配和 www.yoursitehere.com 的元素来替换 PARENT DIV

小开

这对我有用:

 $('.fb-comments').attr('data-width', '100%');

小开

虽然这是一个老问题，但这是现在谷歌“ facebook 评论插件响应”的最高搜索结果，所以它仍然是相关的。

其他答案中的变通方法不再需要了，因为 FB 最近(2014年5月)在他们的最后修正了这一点。

来自 https://developers.facebook.com/x/bugs/256568534516879/:

我们已经为此推出了一个修复程序。从现在开始，您可以指定宽度 (例如，数据宽度 = “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;
}

当你调整浏览器大小时，这将使插件适应当前可用的空间

小开

我使用了一个小 jQuery，并在页面加载和窗口调整时设置了“ data-width”属性。我在使用所有 CSS 方法时遇到的问题是，一些注释和按钮隐藏在容器的边距之外或溢出。

这是我的0.02美元，希望能帮上忙。另外，只需将 # content 选择器设置为您希望注释框匹配的任何内容，例如容器 div..。

Ready (function (){

//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();

});

小开

这就是它的工作原理: 只需添加这个 data-width = “100%” 这里有一个例子:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>

小开

最佳答案

正确的工作答案是我在这里发现的一些事情的组合。米克尔的答案是一个良好的开端:

Facebook 开发者平台链接

上面写着:

我们已经为此推出了一个修复程序。从现在开始，您可以指定宽度 (例如，数据宽度 = “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!)

小开

2015年9月，我带着自己对这个问题的解决方案加入了不知情的群众:

Facebook 为名为 adapt-container-width的 fb-page小部件提供了一个选项，该小部件(根据医生)应该跟踪父部件的宽度(最大宽度为 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>

combined with the following 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

小开

以下是我的结论:

(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);
};
}
})();