【问题标题】:How to make facebook comment box width 100% and responsive?如何使 facebook 评论框宽度 100% 并响应?
【发布时间】:2014-04-10 04:41:36
【问题描述】:

同样的问题http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100 我尝试了所有答案,但它不再起作用了。看起来 Facebook 改变了一些东西。

【问题讨论】:

  • 我喜欢你的问题中的 2014...
  • 很好解释.. :D :D
  • :) 我尝试了stackoverflow.com/questions/10862256/… 的所有答案 :) 它不再起作用了:) 所以我添加了 2014 )
  • 我也想知道。它停止工作。

标签: jquery html css facebook


【解决方案1】:

Facebook 在 .pluginSkinLight > div 上添加了另一个宽度 550 像素

将此添加到您的 CSS .pluginSkinLight > div {width: 100% !important;}

【讨论】:

    【解决方案2】:

    这个 is 是一个 facebook 错误,请在此处查看: https://developers.facebook.com/x/bugs/256568534516879/

    唯一可用的解决方法就是使用 javascript。

    稍后编辑:错误修复:您必须写:data-width="100%"

    插件的宽度。像素值或文字 100% 流体宽度。评论插件的移动版本忽略了 宽度参数,而是具有 100% 的流体宽度。 https://developers.facebook.com/docs/plugins/comments

    【讨论】:

    • 错误已修复!只需添加 data-width="100%"
    • 奇怪 - 不适合我。如果我将 100% 用于流体,则 cmets 框根本不会出现。我不得不使用 javascript 来调整它的大小。
    • 我随机遇到这个问题,有时会以 100% 的速度加载,有时会非常窄.. 无法修复它
    【解决方案3】:

    我在此处发布了针对相同问题的解决方案:https://stackoverflow.com/a/22328835/2544386

    问题在于,在 iframe 中,Facebook 可以更改 CSS、类、添加固定宽度等。 但是,如果您通过在 HTML 中的标签被 Facebook 解析之前以一种智能的方式使用 JS,我相信如果 Facebook 最终更改某些内容,它确实会减少它再次被破坏的机会。

    【讨论】:

      【解决方案4】:

      一个简单的 JS 解决方法

      1) 将 id(本示例中为“fb_chat”)添加到 FB cmets div:

      <div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>

      2) 使用这个 JS 块(将 'chat_body' 替换为您的 cmets 父容器):

      <script type="text/javascript"> var fb_chat = document.getElementById('fb_chat'); var container_width = document.getElementById('chat_body').clientWidth * 0.985; var attr = document.createAttribute('data-width'); attr.nodeValue = container_width.toString(); fb_chat.attributes.setNamedItem(attr); </script>

      【讨论】:

        【解决方案5】:
         $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
                $(window).on('resize', function () {
                    resizeiframe();
                });
        
            function resizeiframe() {
                var src = $('.fb-comments iframe').attr('src').split('width='),
                    width = $(".fb-comments").parent().width();
        
                $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
            }
        

        Jquery 解决方法,

        来源:https://developers.facebook.com/x/bugs/256568534516879/ 评论者:Milap Bhojak

        【讨论】:

          【解决方案6】:

          facebook 更改了 fb-cmets 插件,现在您可以使用 data-width="100%"

          您不需要任何样式或 js 代码。

              <div class="fb-comments" data-href="http://example.com" 
          data-width="100%" data-numposts="5" data-colorscheme="light"></div>
          

          【讨论】:

            【解决方案7】:

            如果您正在寻找无需编程的最简单方法。没有并发症。

            您只需像往常一样(使用 facebook 的代码框),然后在浏览器上打开 Inspect Element(右键单击页面上的任何元素并选择此选项)并单击喜欢框 &lt;iframe&gt;&lt;/iframe&gt; 并复制它在您的代码上(仅 iframe!)。它的工作方式与其他代码完全相同。

            现在去掉iframe的宽度,或者在上面写width:100%

            就像这样:

            <iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>
            

            对我来说很好用。

            【讨论】:

              【解决方案8】:

              添加 data-width="100%" 确实使 cmets 具有 100% 的宽度,但仍然不像您期望的那样完全流畅。它们将填充一个容器,但仅在加载时才会在调整窗口大小时调整大小。为此,请将其添加到您的 CSS:

              .fb_iframe_widget_fluid span, iframe.fb_ltr { width: 100% !important; }

              【讨论】:

                【解决方案9】:

                参考https://developers.facebook.com/support/bugs/173395380238318/

                Facebook 评论插件,他们不断更新新内容,但有时会导致新错误。

                如此简单的 CSS 将解决宽度问题。

                /*Fb Comments Width Fix*/
                .fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
                            max-width: 100% !important;
                            width: 100% !important;
                 }
                

                注意:确保使用 !important。如果没有重要,它将无法正常工作。

                【讨论】:

                  【解决方案10】:

                  为了解决这个问题,从&lt;div class="fb-comments"... 中删除“数据宽度”

                  FB会自动放100%

                  或删除data-mobile="auto"

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 1970-01-01
                    • 2013-04-03
                    • 2018-10-28
                    • 1970-01-01
                    • 2012-03-09
                    • 1970-01-01
                    • 2011-11-18
                    • 1970-01-01
                    相关资源
                    最近更新 更多