title: facebook page plugin doesn't adapt to bootstrap's column
body: <p>I'm trying to put a facebook page plugin inside bootsrap's grid. So facebook have their plugin adapt to the container width, but not dynamically. It means the plugin is rendered one time when the page is loaded and does not resize on window re-size. Any offer how to solve that? </p>
  
  <p>simple example can be seen with this code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
  &lt;/script&gt;
  
  
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;&lt;?php echo $page-&gt;title; ?&gt;&lt;/title&gt;
  
  
  
          &lt;!--adding useful tools--&gt;
          &lt;!--jquery--&gt;
          &lt;script src="//code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
          &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
          &lt;!--bootstrap stuff--&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;  
          &lt;!-- Latest compiled and minified JavaScript --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
  
  
  
  &lt;body&gt;
  
  &lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;
      (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/fr_FR/sdk.js#xfbml=1&amp;version=v2.4";
          fjs.parentNode.insertBefore(js, fjs);
      }
  (document, 'script', 'facebook-jssdk'));
  &lt;/script&gt;
  
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
  
  
          &lt;!--facebook app box--&gt;
          &lt;div class="col-sm-4" style="background-color:pink;"&gt;
                  &lt;div style='margin:20px'&gt;
                      &lt;div class="fb-page" data-href="https://www.facebook.com/BambolaPuppetShow?fref=ts" 
                      data-width="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" 
                      data-show-facepile="true" data-show-posts="true" data-height='600'&gt;
                          &lt;div class="fb-xfbml-parse-ignore"&gt;
                              &lt;blockquote cite="https://www.facebook.com/BambolaPuppetShow?fref=ts"&gt;
                                  &lt;a href="https://www.facebook.com/BambolaPuppetShow?fref=ts"&gt;‎באמבולה - תיאטרון בובות לילדים‎ &lt;/a&gt;
                              &lt;/blockquote&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-8"&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;!--schadual box--&gt;
                  &lt;div class="col-sm-6" style="background-color:red;"&gt;
                      shows
                  &lt;/div&gt;
  
                  &lt;!--general info box--&gt;
                  &lt;div class="col-sm-6" style="background-color:blue;"&gt;
  
                      &lt;div&gt;
                          other content
                      &lt;/div&gt;
  
                      &lt;div id='main_page_text'&gt;
                          some more content
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
  
                  &lt;div class="col-sm-12" style="background-color:green;"&gt;
                      banner
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>