Responsive Facebook Like Box in WordPress

If you’re reading this, you probably have a Facebook Like Box (or news feed) widget displayed on your WordPress site. It’s a great way to keep your site updated without having to change actual page content. For busy entrepreneurs & small businesses, this is a great way to keep your site fresh with minimal effort, as it’s often easier to update a Facebook status than it is a website (although WordPress does make it pretty easy, don’t they?).

This code is several years old. Because Facebook has updated how it displays the Like Box on your site, this technique may no longer work. Unfortunately, I’m not aware of any way to make it 100% responsive.

The Facebook Like Box requires a width & height values, and they must be in pixels. This poses a problem for those looking to create a responsive Facebook Like Box. Luckily, with just a small piece of code, you can make your Facebook Like Box responsive.

Default Facebook Like Box Code

The instructions will differ slightly, depending on which theme or plugin you are using to add the Like Box widget to your site. I’ll provide sample code for one of the most popular ways to add the widget: using Jetpack.

In the image above, you’ll notice the <div> that contains the Like Box. It has a class of widget_facebook_likebox. Also take note to the <iframe> element. It has a set width & height being applied, in pixels.

Responsive Facebook Like Box Code

Let’s use a little CSS to override the width & height of the <iframe>. We’re going to apply a width of 100% to the <iframe>, which will make it respond to any screen size.

Add the following code to your theme’s stylesheet (style.css), or in a custom stylesheet. We like to use the Custom CSS module in Jetpack, and add our code there.

/* Responsive Facebook Like Box */
.widget_facebook_likebox iframe {
	width: 100% !important;
}

The !important declaration is key in overriding the inline styles that Facebook adds to the <iframe>.

If you want to prevent the feed from stretching to fill the entire container, which could mean a pretty large width, you could use max-width instead of width. Using max-width, you’ll get the following two scenarios:

• If you want your Like Box to be 400px wide, and there is only enough room for 300px, it will shrink down to 300px and fit nicely.
• If you want it to be 400px wide, and your containing element is 800px, it will be exactly 400px.

You could also override the height, if you so desire. Just add another line to your CSS, right below the width.

Responsive Code for Others Plugins & Widgets

If you aren’t using Jetpack’s Facebook Like Box widget, the process is very similar. Just find the containing element that has the <iframe> inside of it, and replace .widget_facebook_likebox with the class or id of your containing element.

If you use a different widget or plugin, and have implemented the code, please let us know in the comments so we can update this post with more code examples. Thanks.

Demo Screencast