1

http://developers.facebook.com/docs/reference/plugins/comments/

This is how I generate the comments area after including the Facebook javascript SDK on the page:

<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>

As you can see facebook sets the width of the comments area based on this data attribute you give it:

data-width="600"

In this case I am telling facebook I want the area to be 600 pixels. But I am currenly building a responsive site and need the comments section to fit the width of the screen 100%. Doing none of these works:

data-width="100"
data-width="100%"

Is there any way to get a fluid width for facebook comments?

  • what will happend if you won't use `data-width` at all and set width in stylesheet? – miszczu Apr 11 '13 at 15:21
  • @miszczu I tried changing it with css but can't figure it out. –  Apr 11 '13 at 15:28
  • do you have to use `data-width` to get comments? Can you style it in css file? If yes, I will give you css code for that. – miszczu Apr 11 '13 at 15:30
  • @miszczu no you don't need that attribute for the comments to appear. –  Apr 11 '13 at 15:32
  • Ok the second answer on this question worked for me: http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width –  Apr 11 '13 at 15:47

2 Answers2

5

Try this code:

<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>
Alex Shd
  • 81
  • 2
  • 9
1

First size is for devices smaller then 1200px and bigger then 979px. The only problem is with IE sometimes, but you can use something like that: width: 1200px\9; - IE 8 and above

This sample is from bootstrap, which I'm using very often. To use it you need less win version. But this code works in aby browser (except old IE).

.fb-comments { width: 490px; /* or width: 50%; */ }

/* Large desktop */
@media (min-width: 1200px) {
    .fb-comments { width: 600px; /* or width: 50%; */ }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .fb-comments { width: 400px; /* or width: 50%; */ }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .fb-comments { width: 30px; /* or width: 50%; */ }
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .fb-comments { width: 200px; /* or width: 50%; */ }
}

Also try to use percentage, not pixels, even with padding, for example:

.fb-comments { width: 90%; height: auto; padding: 0 5%; }
miszczu
  • 1,179
  • 4
  • 19
  • 39