Take the 2-minute tour ×

I have a sidebar 200px wide and the Facebook Like button I have placed inside it is running outside the boundaries of the DIV. Are there any workarounds to get the Like box text to recognise the 200px mark and reflow onto new lines when needed?

I am working with this code: http://jsfiddle.net/tKkpm/2/

if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=437745402932329";
fjs.parentNode.insertBefore(js, fjs);

<div class="fb-like" data-href="http://www.facebook.com/google" data-send="false"
 width="200" data-show-faces="false"></div>
share|improve this question
"Minimum width: 225 pixels." Facebook Like Button documentation –  Marty McVry Jan 26 '13 at 16:47
Fair point - I have seen it narrower than 225px though, for instance on the right hand side on rowlands.co.uk –  Chris Jan 26 '13 at 16:50
They use an iframe. Although smaller widths aren't fully supported, it does seem to work! –  Marty McVry Jan 26 '13 at 16:54
Interesting - that seems to solve the issue! Thanks! –  Chris Jan 26 '13 at 16:57

2 Answers 2

up vote 2 down vote accepted

I'll put my comment as an answer...

The Facebook Like Button documentation states that the minimum width has to be 225 pixels.

The reason it can sometimes be less than that, is because you can use an iframe. Although smaller widths aren't fully supported, it does seem to work!

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fgoogle&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:35px;" allowTransparency="true"></iframe>

Please note that you will have to set the width in two different places!

share|improve this answer

The like box width is a problem. I have used overflow:hidden in CSS to make it work at the left sidebar at http://www.mineoppskrifter.no. The problem here is that the images are cut, but at least the width is ok.

#sidebar-left .fb-like-box  {
width: 187px !important;

Change #sidebar-left to the name of your div.

share|improve this answer

Your Answer


