Responsive Facebook Comments CSS Hack Broken

Question

I was using:

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

To make Facebook Comments responsi

Answer 1

This issue is now fixed by Facebook (Comments Plugin Is Now Forcing Fixed Width)

You should use data-width="100%"

See the documentation: https://developers.facebook.com/docs/plugins/comments

Answer 2

Add data-width="100%" attribute to your fb-comments element. It will set the container to a fluid width.

Ex:

<div 
    class="fb-comments" 
    data-href="http://www.someurl.com/somepage/" 
    data-num-posts="10"
    data-width="100%"
></div>

This seems like a recent update from Facebook on their Facebook Comments Plugin

Answer 3

Hope this helps:

/* resize facebook comments */
(function(window){
    var dh = null;
    $(window).on("resize",function(){
        if ( dh ) {
            clearTimeout(dh);
        }
        dh = setTimeout(function(){
            var $fbc = $(".fb-comments");
            var $stc = $(".comments-container");
            dh = null;
            if ( $fbc.attr("data-width") != $stc.width() ) {
                $stc.css({height:$stc.height()});
                $fbc.attr("data-width", $stc.width());
                FB.XFBML.parse($stc[0],function(){
                    $stc.css({height:'auto'});
                });
            }
        },300);
    }).trigger("resize");
})(this);

Cheers!

Answer 4

The debounce solution from Ka. is good but this could be more straightforward and should memoize the nodes. Make sure you wrap your fb-comments in some container:

<div class="comments">
  <div class="fb-comments" data-href="..." data-numposts="5" data-colorscheme="light"></div>
</div>

Then (if using jQuery) setup a resize that debounces the number of requests. Also, make sure you cache the nodes you are checking to speed things up:

var $comments = null;
var $fbComments = null;
var resizeTimeout = null;

function resizeComments() {
  if (resizeTimeout) clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(function() {
    resizeTimeout = null;
    if (typeof FB === 'undefined') return;
    // The class of the wrapper element above is 'comments'
    $comments = $comments || $('.comments');
    $fbComments = $fbComments || $(".fb-comments");
    if ($comments.width() !== parseInt($fbComments.attr("data-width"), 10)) {
      $fbComments.attr("data-width", $comments.width());
      FB.XFBML.parse($comments[0]);
    }
  }, 100);
}

Then call this function on document ready and when the window resizes:

$(document).ready(function() {
  resizeComments();

  $(window).resize(function() {
    resizeComments();
  });  
});

Answer 5

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

works with the new 100% data-width.

Answer 6

I Think css hack can't solve our problem now, this javascript solution solved my problem:

 <div id="commentbox"></div>


<script type="text/javascript">    
        $(function () {
            $(window).bind("load", function () {
                var containerwidth = $('#commentbox').width();
                $('#picture_comment').html('<fb:comments ' +
                'href="http://yourlink"' +
                ' width="' + containerwidth + '" numposts="5" ' +
                'colorscheme="light"></fb:comments>');
                FB.XFBML.parse(document.getElementById('commentbox'));
            });
        });
    </script>

base on https://gist.github.com/dineshcooper/2111366