In my design I'm moving the Like button to the footer at small screen sizes. In Chrome this works dandy by having multiple calls to the widget. In other browsers, the visible Like button hides properly, but the other one doesn't load on resize.
http://jsfiddle.net/isherwood/kc3r2
@media (max-width: 400px) {
#header .fb-like {display: none;}
#footer .fb-like {display: block;}
}
<div id="header">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div id="footer">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
Try using
visiblity
instead ofdisplay
: