How to dynamically resize Facebook comments plugin using JavaScript?

Question

My DIV of showing the Facebook comments plugin (e.g. .fb-comments) is fixed by CSS, consider that if I cannot modify that CSS, is it possible to resize the comments plugin using pure JS solution after all comments are loaded?

 <div style='background-color:red;height:200px;' 
       class="fb-comments" data-href="http://example.com" 
       data-num-posts="10"></div>

Demo: http://jsfiddle.net/8MyV3/1/

why can't you use css? http://stackoverflow.com/questions/6500424/is-it-possible-to-set-a-fluid-width-for-facebooks-social-plugins — btevfik, Mar 29 '13 at 11:19

score 2 · Answer 1 · answered Mar 29 '13 at 14:09

It is very much possible.

The .fb-comments class is set via CSS, but you can still use the !important flag to overwrite it.

Lets get to it:

First you need to overwrite some CSS:

.fb-comments, .fb-comments * {
    width:100% !important;
}

Then you can place your facebook comments widget in its own container

<div class="fb_container">
        <div class="fb-comments" data-href="http://example.com" data-num-posts="10"></div>
</div>

Optional - Style it with CSS however you want:
```
.fb_container{
   width: 200px;
}
```
And then you can change it programatically with JS:
```
 $(".fb_container").css("width","200px");
```

Here's a working jsFiddle example

score 1 · Answer 2 · answered Aug 03 '13 at 16:13

1

This code should do the trick:

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

That will make ".fb-comments" 200px wide.

answered Aug 03 '13 at 16:13

score 0 · Answer 3 · answered Aug 02 '16 at 20:31

0

Need to update three elements to make fully resized.

$('.fb-comments').attr('data-width', '200');
$('.fb-comments span').css('width', '200');
$('.fb-comments span iframe').css('width', '200');

answered Aug 02 '16 at 20:31

user2326737

211
1
4
16

How to dynamically resize Facebook comments plugin using JavaScript?

3 Answers3