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?

Looks like Facebook now supports `data-width="100%"` . I believe you would still need JS for it to play nicely with window resizes. https://developers.facebook.com/docs/plugins/comments — stephen.hanson, Jul 09 '14 at 02:12

jonsuh · Answer 1 · 2014-07-16T20:48:37.077

92

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;

edited Jul 16 '14 at 20:48

answered Jul 16 '14 at 20:34

jonsuh

2,845
1
15
23

4

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. – Tomas Aug 01 '14 at 15:10
nice gj!! I need responsive facebook like box =( i try code, its not same, problem max width 500px. i need 978px https://developers.facebook.com/docs/plugins/page-plugin – KingRider Jul 07 '15 at 14:47
You're the holy savior ! – Zh4rsiest Oct 08 '15 at 10:59
Working perfectly! Thanks alot – Anonymous Oct 27 '15 at 14:02

score 10 · Answer 2 · answered Mar 05 '14 at 03:49

10

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.

answered Mar 05 '14 at 03:49

Timothy Huertas

103
5

Worked like a charm. I've just gotta wonder why Facebook is choosing to hinder their product like this... – Jody Heavener Mar 07 '14 at 19:04
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? – a1anm Mar 18 '14 at 17:31
3

@a1anm You should add the following function : $(document).ready(function(){ $(".fb-comments").attr("data-width", $("#comments").width()); } – Ka. Mar 19 '14 at 00:24
3

Or just `$(window).trigger('resize')` on page load to avoid repeating the function. – Jody Heavener Apr 21 '14 at 19:04

score 7 · Answer 3 · answered Jun 05 '14 at 11:07

7

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

answered Jun 05 '14 at 11:07

intCoffee

184
2
3

Ka. · Answer 4 · 2014-03-20T00:09:54.973

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>

This worked great for me. Had to change the #fb-comments-block to .comments-area (or whatever your container is) also. — a1anm, Mar 19 '14 at 10:51

score 5 · Answer 5 · edited Jun 20 '20 at 09:12

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 03 '14 at 17:08

Josh

91
1
2

Aarup.me · Answer 6 · 2014-04-10T14:53:51.230

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

score 2 · Answer 7 · answered Mar 29 '14 at 19:10

2

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

answered Mar 29 '14 at 19:10

Ardian Tokotua

21
2

score 1 · Answer 8 · answered Mar 05 '14 at 13:45

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)

score 1 · Answer 9 · answered Mar 21 '14 at 18:03

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

score 1 · Answer 10 · answered Mar 23 '14 at 15:12

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!

score 1 · Answer 11 · answered Apr 19 '14 at 19:03

1

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

Add this jQuery:

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

answered Apr 19 '14 at 19:03

Maruf Hasan Bulbul

462
4
14

score 0 · Answer 12 · answered Mar 31 '14 at 03:51

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.

jhummel · Answer 13 · 2014-04-08T19:26:14.433

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

score 0 · Answer 14 · answered May 09 '14 at 10:23

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>

score 0 · Answer 15 · answered May 11 '14 at 14:00

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

score 0 · Answer 16 · answered Jun 06 '14 at 04:25

0

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.

answered Jun 06 '14 at 04:25

vslice11

43
7

score 0 · Answer 17 · answered Jul 19 '14 at 12:46

0

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

works with the new 100% data-width.

answered Jul 19 '14 at 12:46

c5enlil

1

Responsive Facebook Comments CSS Hack Broken

17 Answers17

HTML

CSS

Linked