是否可以为Facebook的社交插件设置可变宽度?


72

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

使用媒体查询,我将插件设置为隐藏在低分辨率浏览器(移动设备等)上。但是,在台式机浏览器上,当将浏览器窗口的大小调整为较小,但又不至于隐藏插件时,它们就会脱离布局。

可以为Facebook社交插件设置可变宽度吗?

Answers:


35

正确的工作答案是我在这里找到的所有问题的结合。Mikel的答案是一个好的开始:

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


对我来说也很完美!谢谢 !!是否有可能在类似共享的插件上反映出这种情况?

1
如果您将类名从“ fb-comments”更改为“ fb-page”,则此方法可在页面插件上使用。进行上述CSS:.fb-page, .fb-page iframe[style], .fb-page span { width: 100% !important; }
亚伯拉罕·布鲁克斯,2015年

使用此代码,插件的整个包装器元素都可以响应,但内容本身不是响应内容,如果调整页面大小,它将被裁剪。猜猜我遗漏了一些非常明显的东西,但是我又该如何补充Iframe液体的内容呢?
Gruber

Facebook建议重新渲染内容,但是我不确定该如何做。FB.XFBML.parse()很近,但是看起来很草率。
blast_hardcheese

实际上,可能已经想出了一种解决方法,可以写出一个真正的答案
blast_hardcheese

62

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

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

1
这不再起作用。Facebook现在在iframe中设置div的宽度。
杰登·劳森

很高兴知道...谢谢!下次我会尝试更新答案。
Jubair 2014年

2
我将其与data-width =“ 100%”结合在一起。并像魅力一样工作。
Asanka Indrajith 2014年

请不要在2013年不起作用的“已接受答案”不再是已接受答案。当前接受的答案确实有效...
patrick

56

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

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

11
大提示,谢谢!我发现我必须使用它才能使它工作。}
终于

1
必须添加.fb-comments > span到我的对象中,因为跨度FB添加在内部具有通过style属性设置的宽度。
埃里克·艾伦

6
.fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }为我工作。
2013年

10
这已不再是解决方案,Facebook改变了渲染iframe的方式,现在他们在内部设置宽度,因此您可以将iframe的宽度设为100%,而不是内容。
AlexLopezIT 2014年

1
同意AlexLopezIT。Facebook在iframe中设置ID的宽度,其名称以“ feeback_”开头,您不能更改。这是我见过的解决方案还与最接近的链接:stackoverflow.com/questions/22491401/...
杰登劳森

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。


这不再起作用。Facebook现在在iframe中设置div的宽度。
杰登·劳森

这对我有效,但是我将.fb-like更改为.fb-like-box,因为我的容器是.fb-like-box。
Juni Brosas 2014年

7

尽管这是一个古老的问题,但现在这已成为Google对“响应式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;
}

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


可惜这仍然是静止的。迄今为止最好的答案,因为当Facebook更改插件时,这仍然有用。但是,如果没有额外的CSS,它就不会动态扩展...我结合了您的解决方案,添加了.fb-comments,.fb-comments iframe [style] 、. fb-comments span {width:100%!important ;}在CSS中的响应速度非常快!我应该相应地编辑此答案吗?
帕特里克

5

如果您由于移动嗅探Facebook而使用官方的wordpress facebook插件,请执行此操作。

当检测到移动设备用户代理时,移动版本将自动显示。您可以通过将mobile参数设置为false来关闭此行为。请注意:移动版本会忽略width参数,而具有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上进行设置,那将是很好的。


考虑到div现在在iframe中具有设置的宽度,这是否可以与新的facebook代码一起使用?
杰登·劳森



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


过去可能曾经奏效,但是Facebook更新了他们的代码,因此不再可行。
杰登·劳森

嗯 这个问题来自2年前的Jayden。
2014年

2

我已经使用这个简单的脚本来工作了(请参阅链接中的代码)。

https://gist.github.com/2111366

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

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


2

有关此调整大小的内容的重要说明:如果Facebook注释脚本检测到您在移动设备上,则会中断此操作。但是,如果使<fb:comments>标记包含属性值,mobile="false"那么(目前)Facebook的脚本将尊重您的CSS。


2

对于那些喜欢将HTML5代码用于Facebook插件(例如活动FeedLike 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链接。(:

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>

参考:http : //dwij.co.in/making-facebook-comments-sensitive


2

截至2015年9月,将不知情的群众与我自己的解决方案结合在一起:

Facebook为fb-page名为的窗口小部件提供了一个选项,该窗口小部件adapt-container-width(根据docs)应跟踪父对象的宽度(最大宽度为500px)。当使用进行重新渲染时FB.XFBML.parse(),尽管您在实际的窗口小部件本身上进行了设置,但窗口小部件似乎卡在了父容器宽度的一个奇怪值上。现在,这已经足够好了:

  1. 使用FB的代码生成器创建元素(在此页面顶部)
  2. 将事件绑定到windowresize方法((可选)使用_.debounce合理的限制,以防止浏览器因中间请求而过载
  3. 等待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

1

这是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”元素是“赞”按钮必须适合我的设计的元素。调整大小直到div变得如此小,以至于需要将div.fb-like中的data-layout属性从“标准”更改为占用较少水平空间的替代项。我是新来的,所以我不确定这是否是使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');
});

1

使用inspect元素查看正在生成的代码。在某些情况下,例如Wordpress Facebook插件,它们使用不同的“ ID”,一旦您发现正在使用的ID,就添加

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

这并不总是能使我学到窍门。虽然您可以更改颜色和进行调整以使其具有响应性的大小设置仍然非常容易。它似乎不喜欢百分比,也看不到它所在盒子的大小,因此无法正常工作。我在玩@media查询来调整它的大小,具体取决于浏览器窗口的大小。

如果它能识别宽度,那会很好,但是@media似乎是唯一的方法。


1

Facebook对注释插件输出的标记进行了一些更改。我正在使用HTML5版本。从上面共享的内容中对CSS进行了修改,从而达到了目的。

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

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

1

我不知道这些评论,但是通过链接框,您所要做的就是直接使用来自Facebook的iframe选项,并以百分比形式切换以像素为单位的宽度,它会根据它所在的列。


想知道这是否是一项新功能?我稍后再测试。谢谢!
Chaddeus 2012年

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

1

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


0

我认为max-widthwidth这种情况更好,它对我有用:

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

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

0

我只是尝试这样做,似乎现在有<div>iframe具有固定的宽度,这意味着你现在居然需要移除style标签使用JavaScript,使之流体。

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


1
认为这是唯一的方法,现在stackoverflow.com/a/22328835/2553149
blues_driven 2014年

同意@blues_driven-该链接是完美的。
杰登·劳森


1
这个问题现已由facebook修复,您现在可以将width选项设置为100%或添加data-width="100%
blues_driven 2014年

0

创建一个空的div,在其中您要使用类'fb-container'将facebook like box用作(或其他社交插件,可以通用),然后添加以下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替换为您的网站


不确定该评论框是否适用,因为fb在其iframe内硬编码了像素宽度,无法更改。
杰登·劳森2014年

@JaydenLawson - >活生生的例子在这里(如果调整则刷新以获取新的宽度):whisperingforest.org/#/quote/40
pashOCONNOR

第一次尝试时未加载fb评论框,这很奇怪。它虽然刷新加载。这是我调整窗口大小时看到的内容:screencast.com/t/0Jrrw8EWZ。它不会在进一步刷新时加载。我明白了你的意思,但这似乎是一个很好的解决方案。您只需要在调整窗口大小时刷新整个注释框即可。
杰登·劳森

1
@JaydenLawson->检查答案,我用今天在客户站点上工作时发现的新解决方案进行了编辑。它现在工作起来更加顺畅,而不是试图中断facebook的加载。 width标签设置为选定的div宽度。
pashOCONNOR 2014年


0

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

这是我的$ 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();

});


0

这就是它的工作方式:只需添加此data-width =“ 100%”这是一个示例:

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

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);
        };
    }
})();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.