How to Make the Facebook Like Box Responsive

  • Tom Kenny

One problem I came into when developing the Origin WordPress theme was integrating the Facebook like box into the sidebar and making it responsive. As it uses an iFrame, it has to have a set pixel width and that means it won’t behave how we want it to as it can’t grow or shrink. Turns out, there’s an easy solution with a bit of CSS and a div to enclose the iFrame.

To see it in action take a look at the Origin demo (which you can buy here). Resize your browser or have a look at it on a mobile device such as iPhone or iPad to see it magically adjust size!

See the demo
Get the WordPress theme

Step 1

The HTML

All we have to do is wrap the Facebook like box code in a div like so:

<div class="facebook">
	<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php echo $facebookID ?>&amp;width=700&amp;height=185&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" style="overflow:hidden; width:700px; height:185px;"></iframe>
</div>

Notice that the width is set at 700 pixels to be about the same size as the largest width it will increase to. In the case of Origin, about the width of the iPad’s display in portrait view of 768 pixels (with some padding).

Step 2

The CSS

Overflow is simply hidden in the CSS and in this case a border has been applied to illustrate a boundary and that’s it! By doing so, the actual content is wider than the div but doesn’t ever appear that way when viewing it.

.facebook { overflow: hidden; border: 1px solid #d5d5d5; }

As simple as that! As you can see, it’s not fully responsive in the truest meaning of the word but it creates an extremely solid illusion and does the job nicely.

Buy the Origin WordPress theme here.