How to make Facebook comments widget a fluid width

2019-01-21 09:23发布

Is it possible to make Facebook's comments widget a fluid width? Their documentation shows a width field for the fb:comments xfbml or iframe which is specified as:

  • width - the width of the plugin in pixels. Minimum recommended width: 400px.

So maybe it's not possible...

19条回答
Summer. ? 凉城
2楼-- · 2019-01-21 09:37

Alan your solution was working however it looks like facebook updated their plugin and broke the style. I got it working again using the universal selector:

.fb-comments, .fb-comments * {
    width:100% !important;
}
查看更多
Animai°情兽
3楼-- · 2019-01-21 09:37

Probably next change from FB and this time this works better:


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}
查看更多
一纸荒年 Trace。
4楼-- · 2019-01-21 09:38

After grappling with this for quite some time I found a tidbit that should help you to figure out which of the CSS tricks on this page will help for your particular site/version/year of facebook's comment plugin. Look at your site in a browser and inspect the elements around the facebook comment plugin. You should find a snippet that you added and is now embellished by facebook's javascript widget that looks something like this:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

take note of the part that says:

class="<whatever class your version is using>"

this is the class you want to use - so in my example above, you would want to add the following styles:

<style>
    .fb_iframe_widget,
    .fb_iframe_widget iframe[style],
    .fb_iframe_widget span[style],
    .fb_iframe_widget *  {
        width: 100% !important;
    }
</style>
查看更多
贪生不怕死
5楼-- · 2019-01-21 09:40

insert this code before initialize facebook plugin and you will have fluid fb comments :):):)

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
    width = $(".fb-comments").parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
查看更多
做自己的国王
6楼-- · 2019-01-21 09:41

I can't comment yet because my reputations not yet high enough, however there is a solution to this as of Dec 21, 2014

for this to work in CSS:

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

you MUST have the data-width="" section set to 100% within the FB plugin code i.e

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

working example with fluid motion: http:www.unitedbiker.org

Hope this helps everyone out, the idea is to override the iframe style to be 100% of the parent element, and to set the actual FB plugin to 100% of the iframe. This was my work around.

查看更多
Viruses.
7楼-- · 2019-01-21 09:43

I think this will work for everyone. Works for me Dec 26, 2013 at http://eddie11.com/dj-eddie-talks/

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

None of the below worked for me but I left it there anyway.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,
查看更多
登录 后发表回答