How can I create a resizable "like" box?

Question

The likebox I created for nbglive.com is not resizable, no matter what method I use, and as such, it is causing great trouble as to how I can integrate it with our site without having it overlap the radio player.

Is it possible to get the like box to resize when the page is resized? I'm using twitter-bootstrap.

Answer 1

I am putting FB widgets (likebox and comments) into the Bootstrap's grid like this:

<div class="span4">
  <div style="text-align: center;">
    <div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
  </div>
</div>

where url is the variable containing web URL of the FB page.

with CSS:

div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {
  width: 100% !important;
}

Facebook loads its component asynchronously with styles set according to the width data attribute. I set it to some safe value: looks bad but does not overflow to other elements for different view-ports. My CSS overrides all the FB's width settings that are necessary to resize the widgets (I set 100%, so it adjusts to the containing div). It is not documented and possibly it will stop to work when FB changes their designs, so choose your default width (234px for me) wisely ;)

Example with LikeBox of at the bottom of the right-hand side panel and in the sidebar. Note the responsive behavior when you change the size of the browsers window.

Answer 2

Do your cording according to your CSS as below

<div class="comment-box">
      <div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>

</div><!--comment-box-->

cut and copy java-script as fb gives in headder

Answer 3

Here is an easy way:

    $(".fb-like-box").attr("data-width", $(document).width());