How to make facebook comment box width 100%?

前端 未结 9 537
逝去的感伤
逝去的感伤 2021-01-18 00:27

i am using this code to put a facebook comment box to my page,



        
相关标签:
9条回答
  • 2021-01-18 00:45

    well i think i managed to solve it, i analysed the comment box and saw that the fb-comments div is containing a span with the width of 470px by default, and inside this span i found an iframe of the same width, so the solution is to change the span and iframe width on window resize using jquery like this:

    $(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});});
    

    so now on window resize the whole comment box is taking the container width (by other means it is 100% width).

    0 讨论(0)
  • 2021-01-18 00:53
    setTimeout(function run() {
        if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0)
            setTimeout(run, 1000);
        else
            $('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%";
    }, 1000);
    
    0 讨论(0)
  • 2021-01-18 00:54

    You can do this by adding CSS class in style sheet of your HTML page as:

    .fb-comments, .fb-comments span, .fb-comments iframe { width: 100% !important; }
    
    0 讨论(0)
  • 2021-01-18 00:54
    .fb_iframe_widget,
    .fb_iframe_widget > span,
    .fb_iframe_widget iframe {
        width: 100% !important;
    }
    

    This worked for me

    0 讨论(0)
  • 2021-01-18 00:59

    zeeshan your solution seems outdated and it looks like facebook updated their plugin and that broke the style.

    Probably this works better for me as of now and I believe that this style will again broke when facebook update the way their plugins work.

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

    I encourage other contributors to add the more recent solution to this question when time comes.

    0 讨论(0)
  • 2021-01-18 00:59

    I try the other solutions and none works for me.

    Reading the fb documentation i found that width 100% is already supported adding the attribut data-width="100%" to the tag:

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

    It's working right now and according to it's documentation en mobile devices this setting is set automatically.

    0 讨论(0)
提交回复
热议问题