Facebook Like buttons not displaying when loaded hidden

问题

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.

回答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!

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

回答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.

回答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.

回答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"

回答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.

回答7:

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

回答8:

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.

回答9:

I prefer to make it absolute within a container

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

回答10:

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.

来源：https://stackoverflow.com/questions/12291017/facebook-like-buttons-not-displaying-when-loaded-hidden

标签

jquery

html

css

facebook-like