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 blurb that contaains social sharing buttons (FB, Twitter & G+1).

http://jsfiddle.net/6Ukmb/

Note that the formatting has been stripped down in the jsfiddle example, and G+1 isn't working - not important to this question.

My problem is with the FB like button not loading correctly. In Chrome, everything works as expected. In FF or IE the FB buttons load 'hidden' and I can't get them to appear.

If when the page is still loading your mouse is over one of the article buttons, the FB button for that article loads fine. If the hover effect is hidden when FB finishes loading, it will not appear for love nor money.

I've picked it apart and found that if I remove the css display: none; from content-box .story-hover, it loads fine. Of course that also means that the hidden panels load visible until someone hovers over them to hide, which won't work.

I can't figure out how to solve this one. Also, because of the volume of FB like buttons, it is a little slower on my dev build, so delaying the display:none until end of page load won't work either.

Answer 1

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"));