I'm in the process of creating a responsive layout with unsemantic, and I want to adjust the settings on a Facebook Like box when switching between desktop, tablet, and mobile views. Essentially, I would like the options to change so that faces and post feeds are no longer displayed when the browser size is reduced.
At the moment, I am loading two separate like boxes and using CSS to show/hide them based on the browser width. However, I suspect there must be a more efficient method (as the website is still in early stages of development and these are just rough drafts)...
<div class="grid-100 tablet-grid-50 hide-on-mobile">
<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"></div>
</div>
<div class="hide-on-desktop hide-on-tablet mobile-grid-100">
<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"></div>
</div>
I have set up jQuery to trigger an event whenever a breakpoint is reached, and my idea is to use this to modify the Like Box's settings and refresh it. I assume this is feasible, as the Facebook developer page adjusts its layout during configuration.
Therefore, my question is - is there a way to only use one Facebook Like box and alter its settings using JQuery when browser size events occur? If so, would this be a more effective approach?
(Please note, the script for changes may not run frequently since the browser size is likely fixed, but it could be triggered by transitioning from portrait to landscape mode on a tablet)