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

【问题标题】：Is it possible to set a fluid width for Facebook's social plugins?是否可以为 Facebook 的社交插件设置流动宽度？
【发布时间】：2011-09-23 22:22:50
【问题描述】：

我正在围绕“响应式设计”概念开发一个网站，但 facebook 社交插件是静态宽度，并且在调整大小时会“破坏”布局。

使用媒体查询，我已将插件设置为在低分辨率浏览器（移动设备等）上隐藏。然而，在桌面浏览器上，当浏览器窗口变小，但又没有小到隐藏插件时，它们会脱离布局。

有什么方法可以为 Facebook 社交插件设置流动宽度？

【问题讨论】：

标签： facebook-social-plugins responsive-design

【解决方案1】：

这些方法都不起作用，但使用这个想法，以下方法对我有用：

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

【讨论】：

这不再有效。 Facebook 现在在 iframe 中设置 div 的宽度。
很高兴知道...谢谢！下次有机会我会尝试更新我的答案。
我将它与 data-width="100%" 结合起来。并且像魅力一样工作。
请注意，2013 年不起作用的“已接受答案”不再是已接受的答案。当前接受的答案确实有效...

【解决方案2】：

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

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

【讨论】：

很好的提示，谢谢！我发现我必须使用它来使其工作 .fb-cmets, .fb-cmets > span[style], .fb_iframe_widget iframe[style] { width: 100% !important; }
必须添加.fb-comments > span 到我的，因为跨度FB添加在里面有一个通过样式属性设置的宽度。
.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; } 为我工作。
这不再是一个解决方案，Facebook 已经改变了他们渲染 iframe 的方式，现在他们在里面设置了宽度，所以你可以让 iframe 100% 宽度，而不是内容。
同意 AlexLopezIT。 Facebook 在 iframe 中设置名称以“feeback_”开头的 ID 的宽度，您无法更改。这是我见过的最接近解决方案的链接：stackoverflow.com/questions/22491401/…

【解决方案3】：

正确的工作答案是我在这里找到的东西的组合。 Mikel 的回答是一个好的开始：

Facebook Developers Platform link

这说：

我们已对此进行了修复。从现在开始，您可以指定宽度为 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-cmets”更改为“fb-page”：

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

（感谢 Black_Stormy 的加入！）

【讨论】：

对我来说也很完美！谢谢！！是否也可以在点赞插件上反映这些内容？
这适用于页面插件，前提是您将类名从“fb-cmets”更改为“fb-page”。制作上述css：.fb-page, .fb-page iframe[style], .fb-page span { width: 100% !important; }
使用此代码，插件的整个 wrapper 元素是响应式的，但内容本身不是响应式的，如果调整页面大小，它将被裁剪。猜猜我遗漏了一些非常明显的东西，但我怎样才能制作Iframe 流体的内容？
Facebook 建议重新呈现内容，但我不知道该怎么做。 FB.XFBML.parse() 很接近，但看起来非常草率。
其实，可能已经想出了一个变通办法，写一个真实的答案

【解决方案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。

【讨论】：

这不再有效。 Facebook 现在在 iframe 中设置 div 的宽度。
这对我有用，但我已将 .fb-like 更改为 .fb-like-box，因为我的容器是 .fb-like-box。

【解决方案5】：

虽然这是一个老问题，但它现在是“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;
}

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

【讨论】：

很遗憾这仍然是静态的。到目前为止最好的答案，因为当 Facebook 更改插件时这仍然很有用。但是如果没有额外的 CSS，这不会动态扩展......我有一个你的解决方案的组合，添加了 .fb-cmets、.fb-cmets iframe[style]、.fb-cmets span {width: 100% !important ;} 在 CSS 中，这使它响应良好！我应该相应地编辑这个答案吗？

【解决方案6】：

如果您使用官方的 wordpress facebook 插件，因为移动端嗅探 facebook 做。

移动版会在移动设备出现时自动显示检测到用户代理。您可以通过设置移动参数为假。请注意：手机版忽略宽度参数，而是具有 100% 的流体宽度，以便在纵向/横向切换情况下调整大小。你可能需要为您的移动网站调整 CSS 以利用这一点行为。如果愿意，您仍然可以通过容器元素。 http://developers.facebook.com/docs/reference/plugins/comments/

您需要在第 35 行更改 facebook/social-plugins/fb-cmets.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 上设置一个设置，那就太好了。

【讨论】：

考虑到 div 现在在 iframe 内设置了宽度，这是否适用于新的 facebook 代码？

【解决方案7】：

它肯定只适用于在样式中添加.fb-comments span。

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

【讨论】：

不再。见上面的 cmets。

【解决方案8】：

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

我在这里的 cmets 中发现了 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;
}

【讨论】：

这也不再有效。 Facebook 现在在 iframe 中设置 div 的宽度。

【解决方案9】：

看起来这篇文章不是很老，但答案对我不起作用。我不得不将它添加到我的样式表中......

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

【讨论】：

这在过去可能有效，但 facebook 已经更新了他们的代码，所以这不再有效。
是的。这个问题来自 2 年前的杰登。

【解决方案10】：

我已经使用这个简单的脚本完成了这项工作（请参阅链接中的代码）。

https://gist.github.com/2111366

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

此解决方案使用 jQuery，因此您必须了解其工作原理，但一旦您获得脚本来执行您的响应式设计，您的响应式设计将在页面加载或调整页面大小时工作。

【讨论】：

【解决方案11】：

关于此调整大小的重要说明：如果 Facebook 评论脚本检测到您在移动设备上，它会破坏这一点。但是，如果您使 <fb:comments> 标签包含属性值 mobile="false"，那么（目前）Facebook 的脚本将尊重您的 CSS。

【讨论】：

【解决方案12】：

对于那些喜欢使用 Facebook 插件的 HTML5 代码的人，例如 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;
    }
}

不适用于 cmets 或基于百分比的宽度；如果您需要纯粹的流动性，请坚持使用 iframe 代码。
H/T 到 Alan 获取本页顶部的 css-tricks 链接。（：

【讨论】：

【解决方案13】：

只需将其放在您的 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

【讨论】：

【解决方案14】：

截至 2015 年 9 月，用我自己的解决方案加入不知情的群众：

Facebook 为名为@987654324@ 的fb-page 小部件提供了一个选项，该小部件（根据docs）应该跟踪父级的宽度（最大宽度为500px）。当使用FB.XFBML.parse() 重新渲染时，小部件似乎卡在父容器宽度的一个奇怪值上，尽管您在实际小部件本身上设置了什么。目前，这已经足够好了：

使用 FB 的代码生成器创建元素（在 this page 的顶部）
将事件绑定到 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

【讨论】：

【解决方案15】：

这是 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”元素是我的设计中必须适合点赞按钮的元素。调整大小一直有效，直到 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');
});

【讨论】：

【解决方案16】：

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

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

这并不总是能解决我学习的问题。虽然您可以更改颜色和一些尺寸使其具有响应性，但仍然非常有问题。它似乎不喜欢百分比，也看不到它所在的盒子的大小，所以这不起作用。我正在玩@media 查询以根据浏览器窗口的大小调整它的大小。

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

【讨论】：

【解决方案17】：

Facebook 对 cmets 插件的输出标记进行了一些更改。我正在使用 HTML5 版本。从上面共享的内容中修改后的 CSS 起到了作用。

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

【讨论】：

【解决方案18】：

这里有一些 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);

【讨论】：

【解决方案19】：

我不了解 cmets，但使用链接框，您只需使用 Facebook 直接提供的 iframe 选项，并以百分比为单位切换宽度，它会根据它所在列的宽度。

【讨论】：

想知道这是否是一项新功能？我稍后会测试。谢谢！

【解决方案20】：

这是一个将 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>");
        });

【讨论】：

【解决方案21】：

这是一个使用 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>

【讨论】：

【解决方案22】：

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

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

【讨论】：

【解决方案23】：

这对我有用

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

【讨论】：

【解决方案24】：

我刚刚尝试过，现在iframe 中似乎有一个具有固定宽度的<div>，这意味着您现在实际上需要使用javascript 删除style 标记以使其流畅。

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

【讨论】：

认为这是现在唯一的方法stackoverflow.com/a/22328835/2553149
同意@blues_driven - 这个链接是完美的。
这是 Facebook 问题developers.facebook.com/x/bugs/256568534516879
这个问题已经被facebook修复了，你现在可以设置宽度选项为100%或者添加data-width="100%

【解决方案25】：

使用“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>');
});

附言您可以将 PARENT DIV 替换为您希望评论框匹配的任何其他元素，并将 WWW.YOURSITEHERE.COM 替换为您的网站

【讨论】：

不确定是否适用于 cmets 框，因为 fb 在其 iframe 内硬编码像素宽度，无法更改。
@JaydenLawson -> 此处的实时示例（如果您调整大小然后刷新以获取新宽度）：whisperingforest.org/#/quote/40
第一次尝试时未加载 fb cmets 框，这很奇怪。它在刷新时加载。这是我在调整窗口大小时看到的：screencast.com/t/0Jrrw8EWZ。它不会在进一步刷新时加载。我明白你的意思，这似乎是一个很好的解决方案。您只需要在调整窗口大小时刷新整个 cmets 框。
@JaydenLawson -> 检查答案，我用今天在客户网站上工作时发现的新解决方案进行了编辑。现在它的工作更顺畅，而不是试图中断 Facebook 的负载。它现在加载它，并将数据宽度标记设置为所选 div 的宽度。

【解决方案26】：

这对我有用：

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

【讨论】：

【解决方案27】：

我使用一点 jQuery 让它工作，并在页面加载和窗口大小调整时设置“数据宽度”属性。我在使用所有 CSS 方法时遇到的问题是一些 cmets 和按钮隐藏在容器边缘之外或溢出。

这是我的 0.02 美元，希望对您有所帮助。此外，只需将 #content 选择器设置为您希望评论框匹配的任何内容，例如容器 div...

jQuery(document).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();

});

【讨论】：

【解决方案28】：

这就是它的工作原理：只需添加这个 data-width="100%" 这是一个例子：

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

【讨论】：

【解决方案29】：

这是我最终得到的结果：

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

【讨论】：