Facebook Like buttons not displaying when loaded hidden

Question

I\'m a bit stuck with this one. I have an article list with snippets that link off to the full article. when you hover over each blurb a bar appears at the bottom of the blu

Answer 1

This is not an answer, this is a comment! Hopefully I'll come back and work on it and turn it into an answer.

Dealing with the same problem. Firefox + hidden container. Only difference is I'm using an onclick slideDown/slideUp to unhide/hide, but I think that's irrelevant.

Stripped down, my html looks like so:

<div id="fb_like_button" class="hide">
   <div class="fb-like" data-action="recommend" ...></div>
</div>

I've noticed that the difference between hidden and unhidden container, that is, removing my 'hide' class from div#fb_like_button, the <span> and <iframe> that facebook places inside div.fb-like changes style attributes width and height.

So, when the page is rendered (again, heavily stripped down html)

unhidden:

<div id="fb_like_button" class="">
   <div class="fb-like" data-action="recommend" ...>
     <span style="height: 61px; width: 97px;">
       <iframe style="height: 61px; width: 97px;">

hidden:

<div id="fb_like_button" class="hide">
  <div class="fb-like" data-action="recommend" ...>
    <span style="height: 0px; width: 0px;">
      <iframe style="height: 0px; width: 0px;">

Playing with width and height style using firefox developer tools after a complete rendering allowed me to hack the like button back to visible.

No solution yet, but I'll keep updating as I find more info. I'm going to try very hard not to add additional javascript that sets these style attributes back, but rather decode wtf facebook is doing. Just hope this helps someone.

Answer 2

An alternative that I used was to not render the fb like button until the container is displayed this can be acheived by using

window.fbAsyncInit = function () {
    FB.init({
        xfbml:false  // Will stop the fb like button from rendering automatically
    });
};

Then to render the like button you can use

FB.XFBML.parse(); // This will render all tags on the page

or the following is a Jquery example on how to render all XFBML within an element

FB.XFBML.parse($('#step2')[0]); 

or plain javascript

FB.XFBML.parse(document.getElementById("step2"));

Answer 3

Each browser works differently on jsfiddle. If you try loading the code on a test html file that you can craft. It might still work. Just not on js fiddle.. Sometimes jquery does not override css code in css files or tags.. So thus if its done that way. Its possibly stuck hidden.

I have seen it happen randomly when I work on my fiddles across computers / and browsers.

Answer 4

Use this CSS:

.fb_iframe_widget span,
iframe.fb_iframe_widget_lift,
.fb_iframe_widget iframe {
    width:80px !important;
    height:20px !important;
    position:relative;
}

The technic behind: You overwrite the datas from facebook with your CSS by using "!important"