Facebook Like 按钮在加载隐藏时不显示答案

【问题标题】：Facebook Like buttons not displaying when loaded hiddenFacebook Like 按钮在加载隐藏时不显示
【发布时间】：2012-09-05 23:13:52
【问题描述】：

我对这个有点坚持。我有一个链接到完整文章的带有 sn-ps 的文章列表。当您将鼠标悬停在每个简介上时，简介底部会出现一个栏，其中包含社交分享按钮（FB、Twitter 和 G+1）。

http://jsfiddle.net/6Ukmb/

请注意，jsfiddle 示例中的格式已被删除，G+1 不起作用 - 对这个问题并不重要。

我的问题是 FB 之类的按钮无法正确加载。在 Chrome 中，一切都按预期工作。在 FF 或 IE 中，FB 按钮加载“隐藏”，我无法让它们出现。

如果页面仍在加载时，您的鼠标悬停在某个文章按钮上，则该文章的 FB 按钮可以正常加载。如果FB加载完成后悬停效果隐藏，则不会出现爱情或金钱。

我把它拆开，发现如果我从 content-box .story-hover 中删除 css display: none;，它加载正常。当然，这也意味着隐藏的面板会加载可见，直到有人将鼠标悬停在它们上方才能隐藏，这是行不通的。

我不知道如何解决这个问题。此外，由于类似 FB 的按钮数量较多，我的开发版本会慢一些，因此将 display:none 延迟到页面加载结束也不起作用。

【问题讨论】：

在那个小提琴中似乎工作正常......？您是否想过使用opacity 代替display 并将社交栏从0“淡入”到100？？
对我来说，在 Firefox 中小提琴不起作用。会尝试opacity :) 谢谢
不相关，但为什么 facebook 图标包含一个 iFrame，其中包含 so 很多 HTML？
@hayk.mart - facebook 总是让我觉得臃肿。但这是必须的
@tdun - 这似乎奏效了。如果您使用该解决方案在此处添加答案，我会给您功劳:) 谢谢

标签： jquery html css facebook-like

【解决方案1】：

我使用的另一种方法是在显示容器之前不呈现类似 fb 的按钮，这可以通过使用来实现

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

然后渲染你可以使用的like按钮

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

或者以下是一个关于如何在一个元素中渲染所有 XFBML 的 Jquery 示例

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

或纯javascript

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

【讨论】：

很好的建议。您也可以在显示包含 fb like 按钮的元素之后调用FB.XFBML.parse();，以便随后呈现。

【解决方案2】：

在这里使用 CSS opacity 是一个不错的选择。像这样的基本内容：

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

您可以从那里添加过渡以使其看起来更漂亮！

【讨论】：

CSS visibility 是另一种选择，当您需要元素对鼠标单击等透明时很有用。
很棒的提示！谢谢。
或使用不透明度并将高度从 0 更改为初始值。这也会隐藏鼠标点击。

【解决方案3】：

我们遇到了同样的问题，并通过使用 CSS 将包含 div 的初始宽度和高度设置为零来解决它，然后，当触发器被激活时，使用 jQuery 来：

将不透明度设置为零（以在 div 展开时隐藏它）
设置宽度和高度（展开 div）
将不透明度设置为 1（在 div 中淡入）

淡出时，无需将宽度和高度重置为零。将不透明度设置为零后，只需设置为 display:none 即可。现在 Facebook 按钮已加载并设置了尺寸，它不会改变。

【讨论】：

【解决方案4】：

opacity 方法有效，但是按钮在页面上是活动的，只是不可见。

因此，如果您的不透明度为 0 的 div 与您需要点击的任何其他内容重叠，您将不小心点击隐藏的按钮。

我希望这种方法能奏效，遗憾的是我的网站不是因为这个。

【讨论】：

【解决方案5】：

使用这个 CSS：

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

背后的技术：使用“！important”用CSS覆盖来自facebook的数据

【讨论】：

【解决方案6】：

这不是答案，这是评论！希望我能回来继续努力，并将其转化为答案。

处理同样的问题。 Firefox + 隐藏容器。唯一的区别是我使用 onclick slideDown/slideUp 来取消隐藏/隐藏，但我认为这无关紧要。

精简后，我的 html 看起来像这样：

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

我注意到隐藏容器和非隐藏容器之间的区别，即从 div#fb_like_button 中删除我的“隐藏”类，facebook 放置在 div.fb 中的 <span> 和 <iframe> 更改样式属性宽度和高度。

所以，当页面被渲染时（同样，大量剥离 html）

未隐藏：

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

隐藏：

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

在完成渲染后使用 Firefox 开发者工具使用宽度和高度样式让我可以将“赞”按钮恢复为可见状态。

尚无解决方案，但我会在找到更多信息后不断更新。我将非常努力地不添加额外的 javascript 来设置这些样式属性，而是解码 wtf facebook 正在做的事情。只是希望这对某人有所帮助。

【讨论】：

【解决方案7】：

不要设置 display: none，而是尝试使用 margin-top 或 z-index 隐藏它。这两个都不会破坏 FB like 按钮。

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

【讨论】：

【解决方案8】：

将不透明度设置为 0 对我来说不是一个解决方案，因为它会隐藏和重叠您需要单击的任何内容，并且 jquery 淡入淡出功能使用 css 显示属性而不是不透明度。

所以我想出的解决方案是将容器显示为块但在窗口左侧：-9999px，然后我将计时器设置为 1s~2s（所有社交按钮呈现所需的时间）并更改显示为无并返回原始位置：

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

$(window).load(function () {

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

});

点击+分享按钮here来测试这个解决方案。

【讨论】：

【解决方案9】：

每个浏览器在 jsfiddle 上的工作方式都不同。如果您尝试将代码加载到您可以制作的测试 html 文件中。它可能仍然有效。只是不在 js fiddle 上。有时 jquery 不会覆盖 css 文件或标签中的 css 代码。所以如果这样做的话。它可能被隐藏起来了。

当我在计算机/浏览器上使用小提琴时，我已经看到它随机发生。

【讨论】：

【解决方案10】：

我更喜欢在容器中使其绝对化

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

【讨论】：