Search code examples
facebookresponsive-designfacebook-likebox

Remove Facebook Likebox on smaller screen / mobile devices


Is there a method to not display and important not load the Facebook Likebox on devices with a certain screen size (for example: not on smartphones) or certain data connection (not wifi), the likebox slows down the website significantly.

So the method display:none; is no option.


Solution

  • Currently there's no way to (reliably) query for data connection type.

    May I suggest a different approach? perhaps you could load the likebox on demand using javascript, the way techcrunch.com or enter.co do it. Those sites load the social buttons only when you hover over some placeholder images.

    This way, you optimize not only for mobile screens but for all devices. If you still want, you could check the viewport size before loading the buttons, or use display:none inside a media query so the placeholder images are not shown –and the buttons can't be loaded.