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 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?

Ova

Looks like Facebook now supports data-width="100%" . I believe you would still need JS for it to play nicely with window resizes. developers.facebook.com/docs/plugins/comments – Exaggeration

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

Scholl

Give some credit... this is the best working answer here and it doesn't require javascript that makes it render the comments again... which takes a few seconds sometimes and is really annoying. – Nicotine

nice gj!! I need responsive facebook like box =( i try code, its not same, problem max width 500px. i need 978px developers.facebook.com/docs/plugins/page-plugin – Anguine

You're the holy savior ! – Toothy

Answer 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.

Lynxeyed

Worked like a charm. I've just gotta wonder why Facebook is choosing to hinder their product like this... – Pauperism

I tried this but have a problem. The comments box only resizes if I resize the screen. It doesn't resize on the initial load of the page. Any ideas? – Cyler

@Cyler You should add the following function : $(document).ready(function(){ $(".fb-comments").attr("data-width", $("#comments").width()); } – Ridgley

Or just $(window).trigger('resize') on page load to avoid repeating the function. – Pauperism

Answer 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

Introversion

Answer 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>

Ridgley

This worked great for me. Had to change the #fb-comments-block to .comments-area (or whatever your container is) also. – Cyler

Answer 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

Aric

Answer 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

Laster

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

Angele

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

Furunculosis

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

Scrofula

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

Pestilent

Answer 11

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

Add this jQuery:

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

Mousey

Answer 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.

Holinshed

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

Bayonne

Answer 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>

Damales

Answer 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

Carnallite

Answer 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.

Chrysoberyl

Answer 17

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

works with the new 100% data-width.

Immoral