4

I've just noticed a change in one of my websites html layout.

Everything looked messy and after searching i found out that the cause was that the Facebook Like Box (which min width seems to have changed to 292px) was insisde a 250px container.

https://developers.facebook.com/docs/reference/plugins/like-box/

I've had the like-box there for years widh a width=220px and it's kind of awckard that Facebook changed this "legacy" behavior. The box had its place on my site and now i need to figure out where to put it.

With my current website layout it's impossible to move the facebook like box in a different place; so i had to remove if for now.

Any ideas why Facebook did this and if there's any workaround?

Thanks,

Dan

Dan Dinu
  • 32,492
  • 24
  • 78
  • 114
  • 3
    The note in the docs about the minimum supported width has been there since 2011; looks like a recent change means this is now technically enforced too - you could file a bug report but i suspect it'll be 'wont fix' or 'by design' – Igy Jun 13 '13 at 18:18
  • See also http://facebook.stackoverflow.com/questions/17056656/facebook-like-box-widget-not-recognizing-data-width-attribute – Pat Willener Jun 17 '13 at 08:11

2 Answers2

7

I don't know why Facebook has done it, but you can easily set your own width using CSS:

.fb-like-box span, .fb-like-box iframe {
    width: 220px !important;
}
niutech
  • 28,923
  • 15
  • 96
  • 106
0

There is a data-width attribute of the div to manage the width.

The below code is working absolutely fine.

<div class="fb-like-box" data-width='260' data-href="https://www.facebook.com/FacebookDevelopers" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Debakant Mohanty
  • 805
  • 1
  • 10
  • 19