Making the Facebook Like Box responsive

Facebook Like Box – awesome. Fixed pixel width in 2014 – fail. Fixed – 🙂

I provide websites for a number of small businesses and they all make use of Facebook, so using the Facebook Like Box to show their Facebook feed on their website is a no brainer. The problem is that out of the box the Facebook Like Box is an explicitly defined pixel width and I have created their sites to be responsive.

After a lot of searching, and a lot of trial and error, I found a very simple way to achieve this using the following CSS.

#fb-root {
  display: none;
}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

I looked at all sorts of other ways of doing this (including some WordPress plugins and some very complex javascript) but nothing else worked. Sometimes the simplest solutions are the best.

You can see an example of this in action at http://priscillajones.com.au/