Facebook like box widget not recognizing data-width attribute?

Question

I just noticed today that the data-width attribute for the Facebook Like Box widget does not appear to be working. It looks like it is reverting to the default width. An example of what I'm talking about can be seen on http://blog.christopherjonesart.com.

Here is the code I'm using (it's pretty standard):

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart"    data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>

I am experiencing this issue on several websites. It is doing it in Chrome, Firefox, Safari and Internet Explorer. I have not recently updated Wordpress or made any changes to my css.

Help? It looks really crummy like this. :-(

Answer 1

Expanding on user2477225's answer, it might have problems with custom positioning that you set (relative or absolute somewhere on the page), so what I did was:

.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

Seems to be working so far.

Edit: For IE 8 (and lower), please use this instead:

.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

I like to be as specific as possible in my selectors, but after checking this issue some more, I see no technical reason to use the > selector here.

Answer 2

i think we should tell fb to fix their dumb script, now fb like box must be at least 292 px in width.

They state clearly on https://developers.facebook.com/docs/reference/plugins/like-box/

The minimum supported plugin width is 292 pixels.

Answer 3

I fixed the width with a little CSS hack but it is only temporary. My hack is this:

.fb-like-box iframe {
     width: your_width_in_px !important;
}

Answer 4

Use the iframe settings, in my site using the iframe settings with a likebox of 236px width and it overrules the 292px width. Brainless thinking of FB, every site needs a sidebar of 292px width???? yeye