Responsive Facebook Comments CSS Hack Broken

问题:

I was using:

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

To make Facebook Comments responsive on my website. This was working fine and dandy just the other day. Today I look and they have changed their code. Is it possible to get this working again?

回答1:

Here's a new CSS-only solution. Did this for a project I'm working on today (July 16, 2014) and it works beautifully.

HTML

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

CSS

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

The trick are data-width: 100% and min-width: 100% !important; width: 100% !important;

回答2:

I got bit by this too. I put in a JS hack. Basically bind to the resize event of the window and redraw the comments widget when it fires (uses jquery if you want I can post without):

$(window).resize(function(){
 $(".fb-comments").attr("data-width", $(".comments").width());
 FB.XFBML.parse($(".comments")[0]);
});

In the example above .comments is the container that you want the width of the fb-comments to expand to. The downside of this is that when the window is resized the comments widget is reinitialized.

If you use underscore wrap the resize handler using debounce to keep it from firing to often.

回答3:

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

回答4:

Below is my solution. This script is just a workaround for this bug

Solution inspired by:

• above answers
• this link

Code below (just replace .comments-area with your own container class name)

<script>
    (function($,sr){
       // debouncing function from John Hann
       // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
      var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null;
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100);
          };
      }
      // smartresize 
      jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

    })(jQuery,'smartresize');


    $(document).ready(function(){
        if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
            $(".fb-comments").attr("data-width", $(".comments-area").width());
        }
        $(window).smartresize(function(){
            if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
                $(".fb-comments").attr("data-width", $(".comments-area").width());
                FB.XFBML.parse($(".comments-area")[0]);
            }
        });
    });
</script>

回答5:

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

回答6:

An adaptive pure CSS approach can be found here:

http://jsfiddle.net/bennyaarup/5gyp6/

HTML

I add FB comment code blocks in duplicate - amounting to the number of adaptive stages (data-width) I need. I add the extra class = .fb-1, .fb-2, .fb-3 etc... which I need in the CSS.

<div class="fb-comments fb-1" data-href="http://yourdomain.com" data-width="900" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-2" data-href="http://yourdomain.com" data-width="800" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-3" data-href="http://yourdomain.com" data-width="700" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-4" data-href="http://yourdomain.com" data-width="600" data-numposts="5" data-colorscheme="light"></div>

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

<div class="fb-comments fb-6" data-href="http://yourdomain.com" data-width="400" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-7" data-href="http://yourdomain.com" data-width="300" data-numposts="5" data-colorscheme="light"></div>

<div class="fb-comments fb-8" data-href="http://yourdomain.com" data-width="200" data-numposts="5" data-colorscheme="light"></div>

CSS

I style the adaptive stages using media queries and display:none to show the respective comment field

@media all and (min-width: 400px), (max-width: 300px) {

.fb-8{
display: none !important;
}
}

@media all and (min-width: 500px), (max-width: 400px) {

.fb-7{
display: none !important;
}
}


@media all and (min-width: 600px), (max-width: 500px) {

.fb-6 {
display: none !important;
}
}


@media all and (min-width: 700px), (max-width: 600px) {

.fb-5 {
display: none !important;
}
}

@media all and (min-width: 800px), (max-width: 700px) {

.fb-4 {
display: none !important;
}
}


@media all and (min-width: 900px), (max-width: 800px){

.fb-3 {
display: none !important;
}
}


@media all and (min-width: 1000px), (max-width: 900px){

.fb-2 {
display: none !important;
}
}


@media all and (max-width: 1000px) {

.fb-1 {
display: none !important;
}
}

It's a bit of a hack, but it works beautifully

回答7:

try using this code This might be a little different

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

回答8:

I had the same issue (implemented the responsive comments yesterday, today it didn't work anymore ).

I don't have enough points to vote but the above answer works. I am using the facebook plugin for wordpress. I also set a timeout when the page loads to get the right width immediately.

setTimeout(function(){
    $(".fb-comments").attr("data-width", $(".comments-area").width());
     FB.XFBML.parse($(".comments-area")[0]);
}, 1000)

回答9:

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

回答10:

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!

回答11:

Here is a small solution.. try it...

Add this jQuery:

$(document).ready(function(){
    $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
});

回答12:

Ok this is what I have so far based one Timothy's comment.

function resizeFbComment(){

  if (typeof FB === 'undefined')
    return;

  $(".fb-comments").attr("data-width", $(".fb-comments").width());

  FB.XFBML.parse($(".comments")[0]);

}

$(window)
  .load(resizeFbComment)
  .resize(resizeFbComment);

Obviously, this is a temporary hack. The windows resize should have a timeout.

回答13:

Adding to the answers here. You really should have a timeout so you're not refreshing the comments dozens of times per second. Also, it's really not great practice to continue crawling the DOM for the elements every time the function is fired, this should be a bit more efficient:

$(function() {
  // cache some selectors so we're not looking up divs over and
  // over and over on resize

  var facebook_comment_resize, 
    comment_resize_timeout,
    $window = $(window),
    $comments_container = $('#comments'),
    $comments = $('.fb-comments');

  var facebook_comment_resize = function() {
    // define a function to get the width of the comment container
    // then set the data-width attribute on the facebook comment div
    $comments.attr("data-width", $comments_container.width());

    // Reinitialize the comments so it can grab the new width from
    // the data element on the comment div
    FB.XFBML.parse($comments_container.get(0));
  }

  // Set a timeout that can clear itself, keeps the comments
  // from refreshing themselves dozens of times during resize
  $window.on('resize', function() {
    clearTimeout( comment_resize_timeout );
    comment_resize_timeout = setTimeout(facebook_comment_resize, 200);
  });

  // Set the initial width on load
  facebook_comment_resize();
});

回答14:

This is the only solution that has worked for me. (You need the FB root bit too) Original found here: http://jsfiddle.net/PZD54/4/

        <script>
        setTimeout(function(){
          resizeFacebookComments();
        }, 1000);
        $(window).on('resize', function(){
          resizeFacebookComments();
        });
        function resizeFacebookComments(){
          var src   = $('.fb-comments iframe').attr('src').split('width='),
          width = $('#comments').width();
          $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
        }
      </script>
      <div id="comments">
        <div class="fb-comments" data-href="http://www.url-here.com"></div>
      </div>

回答15:

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

回答16:

I tried data-width="100%" and worked for me, but when I resize the screen the container remains the same size, it doesn't change, I tried with Ripple plugin for chrome and it looks good but I have to tap or click twice to comment.

回答17:

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

works with the new 100% data-width.