Question

如果其中一个容器在页面加载时为display:none，并且稍后在display:block处显示，则不会显示“赞”按钮插件。

仅在Firefox（我的15.0.1版）中检测到问题。

我该怎么办？

Answer 1

当你使元素可见时，你应该将你的fb插件添加到dom

IE

<div id="showfb">mouseoverme</div>
<div style="display:none" id="facebutton"></div>

<script>
      var fbbutton = document.getElementById("facebutton");
      document.getElementById("showfb").onmouseover = function(){
          // first visible
          fbbutton.style.display='block';
          // then add fb html5
          fbbutton.innerHTML = '<div class="fb-like" ......... ></div>';
      };
</script>

另选择，尝试

width:0;height:0;overflow:hidden

而不是

display:none

和

width:auto;height:auto;overflow:visible

而不是

display:block

Answer 2

我不知道这个错误的原因是什么（FB或FF），但是我通过默认情况下在FF中显示我的元素来解决这个问题：

@-moz-document url-prefix() {#exe-article-social-tools { display: block; }}

Answer 3

https://developers.facebook.com/docs/reference/javascript/

fb-root标签

JavaScript SDK要求fb-root元素出现在页面中。不得使用display：none或visibility：hidden隐藏fb-root元素，否则SDK的某些部分将无法在Internet Explorer中正常工作。

Answer 4

花了我一整天的时间来弄明白，但是使用“测试用户”登录Facebook会让“赞”按钮看不见。在我的情况下，我总是使用我的测试用户在Firefox上登录，同时使用Chrome中的常规Facebook用户注销/登录（我最初认为这是浏览器问题）。

然而，解决方案就像登录测试用户一样简单。

在FB文档中指出，并非所有功能都为测试用户启用（类似按钮就是其中一个功能），但我认为它至少会被渲染。无论如何，我希望这有助于某人。

Answer 5

我的页面上有许多不同的隐形div，隐藏了fb-like个按钮。当显示div中的一个时，其中不会出现fb-like按钮。对我来说解决方案是每次看不见的div时手动重新启动FB.init。 FB是一个全局函数，被添加到您的窗口对象中，因为您通过类似http://connect.facebook.net/en_US/all.js的URL调用远程facebook api。因此，由于这个远程脚本附加到您的DOM，您可以运行类似

的内容

FB.init({
        appId      : '346094915460000', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
    });

Answer 6

您可以动态地将按钮html5代码添加到DOM中，然后再次运行FB解析器以生成类似按钮：

fbbutton.innerHTML = '<div class="fb-like" ... ></div>';
FB.XFBML.parse();

如何在“display：none”上下文中创建Like按钮？

6 个答案: