title: Facebook Like Box Responsive Options
body: <p>I'm putting together a responsive layout using unsemantic, and I'd like to change the options on a Facebook Like box when the view switches to/from desktop/tablet/mobile.  That is, when the browser switches to a smaller layout, I want to change the options to no longer display faces or a post feed.</p>
  
  <p>I'm currently loading two like boxes in and showing/hiding one depending on the browser width using css, but this can't be the most efficient way (the site is still in early development, so these are just for sketches at the moment)...</p>
  
  <pre><code>&lt;div class="grid-100 tablet-grid-50 hide-on-mobile"&gt;
      &lt;div class="fb-like-box" data-href="https://www.facebook.com/myurl" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="false"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="hide-on-desktop hide-on-tablet mobile-grid-100"&gt;
      &lt;div class="fb-like-box" data-href="https://www.facebook.com/myurl" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="false" data-show-border="false"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've got jquery triggering an event whenever a breakpoint is hit, and I was thinking that I could use this to change the Like Box's options and refresh it.  I'm guessing it's possible, since the Facebook developer's page changes its layout as you configure it.</p>
  
  <p>So, the question - is there any way to only have one Facebook like box and change its options using JQuery as browser size events are triggered?  And if so, would it be a better way?</p>
  
  <p>(Note, obviously a change script won't be executed that much since the browser is likely to be fixed, but it might be triggered from a portrait->landscape on a tablet)</p>