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

Simply Use iFrame instead of fbml and change width to whatever required.

i.e.:(width:194px below)

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&amp;width=194px&amp;height=290px&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe> 

Thanks!

Answer 5

I have face the same problem to you. my solution is use jquery script to change width of like box in the like box ready time.

in head section

<script type="text/javascript">
function JS_wait(){
            // wait until like box script load
    if($("iframe[title='fb:like_box Facebook Social Plugin']").length == 0 && $("div[class='fb-like-box fb_iframe_widget'] span").length == 0){

        window.setTimeout(JS_wait, 100); 
    }else{
                    // wait 5 seconds to like box rendered.
        window.setTimeout(JS_ready, 5000); 
    }
}

function JS_ready() {

    // resize facebook like box to 200 px
    //alert("JS_ready");
    $("iframe[title='fb:like_box Facebook Social Plugin']").css('width','200px');
    $("iframe[title='fb:like_box Facebook Social Plugin']").attr('width','200');
    $("div[class='fb-like-box fb_iframe_widget'] span").css('width','200px');
};
</script>

and in document ready add

<script type="text/javascript">
$(document).ready(function() {
      JS_wait();
    });
</script>

Cheers this must help you.

Answer 6

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

Answer 7

After the fb:like-box add this script change the 244px to your width

FB.Event.subscribe('xfbml.render', function(response) {

 var el = document.querySelector(".fb_iframe_widget span");
 el.style.width='244px';
 el = document.querySelector(".fb_iframe_widget iframe");
 el.style.width='244px';
});

Answer 8

According to Facebook official like box page, The minimum width is 292px.

Still, there is a little project on github to make facebook like box responsive and adapt to your website layout.

Applying this along with setting the width of the container to any width you prefer will force the facebook like box to fill that container and adapt to its width, no more, no less:

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
  display: none;
}

/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

Answer 9

Here is what I used to fix it, this is not the exact same since I don't show faces, but just adapt it to your code, the important part is the div #fb-like-container that I added, it lets me use css selectors to change required code.

CSS:

<script>
#fb-like-container div.fb-like-box>span, 
#fb-like-container div.fb-like-box>span>iframe{
    width: 173px!important; 
}
</script>

HTML (data-width is not taken into account):

<div id="fb-like-container">
    <div class="fb-like-box" 
    data-href="http://www.facebook.com/christopherjonescomicart" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false">
     </div>
</div>