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.

Botchy

It seems to be working ok in that fiddle...? Have you thought of using opacity instead of display and "fade in" the social bar from 0 to 100?? – Winepress

for me, in firefox the fiddle doesn't work. will try opacity :) thanks – Botchy

Unrelated, but why does the facebook icon contain an iFrame with so much HTML in it? – Suzy

@hayk.mart - facebook always feels bloated to me. but it's a necessity – Botchy

@tdun - that seems to have worked. if you add an answer here with that solution, i'll give you the credit :) thanks – Botchy

Answer 1

Using the CSS opacity is a good option here.. something basic like this:

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

From there you can add transitions to make it look nice!

Winepress

CSS visibility is another option and is beneficial when you need the element to be transparent to mouse clicks etc. – Ave

or use opacity and change height from 0 to initial. That would also hide mouse clicks. – Commendatory

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

Whack

Great advice. You can also call FB.XFBML.parse(); just after you show an element containing the fb like button so it renders then. – Arm

Answer 3

We had the same problem and solved it by setting the initial width and height of the containing div to zero with CSS and then, when the trigger is activated, use jQuery to:

• set opacity to zero (to hide the div while it is expanded)
• set width and height (expand the div)
• animate opacity to 1 (fade in the div)

When fading out, no need to reset the width and height to zero. Just set to display:none after animating opacity to zero. Now that the Facebook button is loaded and has its dimensions set, it's not going to change.

Zusman

Answer 4

The opacity method works, however, the buttons are live on the page, just not visible.

So if you have the div with opacity 0 overlapping anything else you need to click on, you will click the hidden buttons by accident.

I was hoping this method would work, sadly for my site it doesn't due to this.

Richers

Answer 5

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"

Homemaker

Answer 6

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.

Demarche

Answer 7

Setting opacity to 0 is not a solution for me because it hides and overlaps anything you need to click-on and also jquery fadein function uses the css display property not opacity.

so the solution i've came up with is to display the container as block but out of the window left:-9999px, then i set a timer for 1s~2s (time needed for all social buttons to render) and change display to none and back to the original position :

#bnts_container
{
  left:-9999px;
  display:block;
}

$(window).load(function () {

  setTimeout(function () {
     $('#bnts_container').css("display", "none");
     $('#bnts_container').css("left", "50%");
    } , 2000);

});

Click on the +Share button here to test this solution.

Dew

Answer 8

Instead of setting display: none, try to hide it by using margin-top or z-index. Both of these won't break the FB like button.

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}

Eupepsia

Answer 9

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.

Nescience

Answer 10

I prefer to make it absolute within a container

  iframe{
     position: absolute !important;
     height: 500px !important;
  }

Sharecrop