CODEWITHSUNDEEP
htmlcssfacebook
oxuser
oxuser

Reputation: 1327

Limit size of HTML5 Facebook comment box

I'm trying to limit the vertical height of the Facebook comments from the code generated below but I don't know how to limit the vertical height of the comment box. (for width, the data-width parameter is provided by facebook). Does anyone know how I could do this?

<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="example.com" data-num-posts="2" data-width="500">    </div>
</body>
</html>

Thanks!

Upvotes: 3

Views: 4570

Answers (2)

jbnunn
jbnunn

Reputation: 6355

Unfortunately FB doesn't currently allow the IFRAME method, only the HTML5 and XFBML, so the solution I've used to get around this is to wrap the tag with another div with "overflow-y" set to scroll, like:

<div id="fb_comments">
    <fb:comments href="http://example.com/" num_posts="10" width="500"></fb:comments>
</div>

My styling for fb_comments is:

#fb_comments { height:400px; padding-bottom:20px; overflow-y: scroll; }

Upvotes: 5

Martin Risell Lilja
Martin Risell Lilja

Reputation: 652

It is not possible to set the height directly, if you want it to scroll you might want to put it inside an IFrame (Code can be found at developers.facebook.com, just select IFRAME instead of HTML5)

Otherwise you may change the data-num-posts to a lower, or higher value, to make it smaller or larger.

Upvotes: 0

Related Questions