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

Question

我对这个有点困惑.我有一个文章列表,其中包含链接到完整文章的片段.当您将鼠标悬停在每个模糊区域上时,会在包含社交分享按钮(FB,Twitter和G + 1)的模糊区域底部显示一个条形图.

http://jsfiddle.net/6Ukmb/

请注意,格式已在jsfiddle示例中被删除,并且G + 1不起作用 - 对此问题并不重要.

我的问题是FB like按钮没有正确加载.在Chrome中,一切都按预期工作.在FF或IE中,FB按钮加载"隐藏",我无法让它们出现.

如果当页面仍在加载时,鼠标位于其中一个文章按钮上,则该文章的FB按钮可以正常加载.如果在FB完成加载时隐藏悬停效果,则不会出现爱情或金钱.

我把它拆开了,发现如果我display: none;从中取出css content-box .story-hover,它会很好地加载.当然,这也意味着隐藏的面板加载可见,直到有人将鼠标悬停在它们上面隐藏,这是行不通的.

我无法弄清楚如何解决这个问题.此外,由于FB类按钮的数量,在我的开发构建中它稍慢,因此延迟display:none直到页面加载结束也不起作用.

Answer 1

我使用的另一种方法是在显示容器之前不渲染fb like按钮,这可以通过使用来实现

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

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

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

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

从那里你可以添加过渡,使它看起来不错!

Answer 3

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

• 将不透明度设置为零(在展开时隐藏div)
• 设置宽度和高度(展开div)
• 将不透明度设置为1(淡入div)

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

Answer 4

不透明度方法有效,但按钮在页面上是实时的,只是不可见.

因此,如果您将不透明度为0的div与您需要单击的任何其他内容重叠,则会偶然单击隐藏的按钮.

我希望这种方法可行,遗憾的是我的网站并不是因为这个.

Answer 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中的数据