21

The same question http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100 I tried all the answers, but it doesn't work anymore. Looks like Facebook changed some stuff a little bit.

mukesh krishnan
  • 353
  • 1
  • 6
  • 20
whitesiroi
  • 2,725
  • 4
  • 30
  • 64

10 Answers10

38

This is was a facebook bug, check it out here: https://developers.facebook.com/x/bugs/256568534516879/

The only available workaround is just using javascript.

Later edit: Bug fixed: You have to write: data-width="100%"

The width of the plugin. Either a pixel value or the literal 100% for fluid width. The mobile version of the Comments plugin ignores the width parameter, and instead has a fluid width of 100%. https://developers.facebook.com/docs/plugins/comments

Romeo Onisim
  • 604
  • 4
  • 10
11

With reference to https://developers.facebook.com/support/bugs/173395380238318/

Facebook comment plugin, they keep on updating new stuff but sometimes it ends up to a new bug.

So simple CSS will resolve the width issues.

/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
            max-width: 100% !important;
            width: 100% !important;
 }

Note: Make sure you use !important. Without important, it will not work as excepted.

mukesh krishnan
  • 353
  • 1
  • 6
  • 20
3
 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
        $(window).on('resize', function () {
            resizeiframe();
        });

    function resizeiframe() {
        var src = $('.fb-comments iframe').attr('src').split('width='),
            width = $(".fb-comments").parent().width();

        $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
    }

Jquery Workaround,

Source : https://developers.facebook.com/x/bugs/256568534516879/ Comment by : Milap Bhojak

Dasith
  • 1,085
  • 10
  • 16
1

Facebook added another width 550px on .pluginSkinLight > div

add this to your css .pluginSkinLight > div {width: 100% !important;}

Anton R
  • 519
  • 1
  • 6
  • 14
1

I have posted a solution in response to the same question here: https://stackoverflow.com/a/22328835/2544386

The issue is that within the iframe, Facebook can change the CSS, classes, add fixed widths etc. But if you use JS in a smart way by manipulating the tag in your HTML before it is parsed by Facebook, I believe it really reduces the chances of it being broken again if Facebook change something at their end.

Community
  • 1
  • 1
Gav
  • 431
  • 5
  • 12
1

facebook changed fb-comments plug in and now you can use data-width="100%"

you dont need any of style or js code. 

    <div class="fb-comments" data-href="http://example.com" 
data-width="100%" data-numposts="5" data-colorscheme="light"></div>
vitralyoz
  • 570
  • 7
  • 14
1

If you are looking for the simplest way without programming. No complications.

You just do it like always (with the facebook's code box), then open Inspect Element on the browser (right-click any element on the page and select this option) and click on the like box <iframe></iframe> and copy it on your code (only the iframe!). It works exactly like the other code.

Now remove the width of the iframe, or write width:100% on it.

Just like this:

<iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>

It works fine for me.

bey23
  • 313
  • 4
  • 16
0

A simple JS workaround

1) Add id ("fb_chat" in this sample) to the FB comments div:

<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>

2) Use this JS block (replace 'chat_body' to your comments parent container):

<script type="text/javascript"> var fb_chat = document.getElementById('fb_chat'); var container_width = document.getElementById('chat_body').clientWidth * 0.985; var attr = document.createAttribute('data-width'); attr.nodeValue = container_width.toString(); fb_chat.attributes.setNamedItem(attr); </script>

varsize
  • 1
  • 1
0

Adding data-width="100%" does make the comments 100% width, but still not exactly fluid like you would expect. They will fill a container, but only on load and will not resize when the window is resized. In order to do that add this to your css:

.fb_iframe_widget_fluid span, iframe.fb_ltr { width: 100% !important; }

drspaceman
  • 51
  • 1
0

For solve this problem remove "data-width" from <div class="fb-comments"...

FB automaticly will put 100%

or delete data-mobile="auto"

Vitalicus
  • 1,188
  • 13
  • 15