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

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.

Answer 2

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.

Answer 3

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.

Answer 4

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!

Answer 5

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;
}

Answer 6

I prefer to make it absolute within a container

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