【问题标题】：Facebook Like Button Not Showing Up In FirefoxFacebook Like 按钮未出现在 Firefox 中
【发布时间】：2011-07-28 01:33:00
【问题描述】：

我正在为我的喜欢按钮使用以下代码

<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>

有些用户遇到了点赞按钮没有显示的问题。在 3.6.17 中注明，但在其他版本中观察到。我对 firefox iframe 错误有点熟悉，但如果有人对 facebook like 按钮有任何解决方法，我很好奇。

【问题讨论】：

标签： facebook firefox iframe facebook-like

【解决方案1】：

使用 javascript 呈现的类似按钮（<div class="fb-like"/> 和 <fb:like/>）如果最初是隐藏的（display:none），则会得到 height=0。

要解决此问题，请在显示容器后使用 javascript 创建元素，然后运行：

FB.XFBML.parse();

例子：

result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();

【讨论】：

完美、简单的解决方案

【解决方案2】：

这个 CSS 为我解决了这个问题

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}

【讨论】：

【解决方案3】：

这仍然是一个问题，可以在这里看到（也包含修复）： http://codepen.io/wiledal/pen/cGnyq

如果 div 在解析时隐藏，Firefox 不会绘制 Facebook 样。在上面的示例中，我在不同时间后延迟了 div 的显示。您可以看到 500 毫秒后显示的点赞按钮不会在 Firefox 中呈现。

我解决了一个问题，它不会在喜欢后切断评论对话框，只需使用 min-height 和 min-width 而不是之前建议的设置值。

.fb-like span, .fb-like iframe {
  min-width: 100px !important;
  min-height: 20px !important;
}

【讨论】：

【解决方案4】：

我只在 Firefox (v.29.0.1) 上遇到了同样的问题，结果是 AdBlock plus (v.2.6) 阻止了“赞”和“分享”按钮的呈现。

【讨论】：

请注意，如果使用您自己的图像，共享按钮仍然可以工作（显示），并调用函数执行 window.open 到https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&sdk=joey&u=....

【解决方案5】：

你可以尝试像这样调用like按钮吗：

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&amp;xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>

如果您仍然发现问题，请告诉我。

【讨论】：

【解决方案6】：

留下一个答案，因为我还不能离开 cmets...

Oli 不错的 CSS hack 最初看起来很有效：

.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}

但它剪掉了当我们实际点击赞按钮时试图弹出的评论框。

Per 的延迟解析解决方案似乎可以胜任；这里有更多细节。在我们的例子中，我们在下拉菜单中有一个赞按钮，看起来像：

<ul>
  <li class="control_menu">
    <span>menu name</span>
    <ul style="display: none;">
       <li><div class="fb-like-inactive" data-href=...></li>
       ...
    </ul>
  </li>
  ...
</ul>

当用户将鼠标悬停在control_menu 元素上时，代码会显示下拉ul。我们使用这段代码来处理延迟解析：

$(document).ready(function() {
  $('.fb-like-inactive').closest('.control_menu').hover(function() {
    var inactive = $(this).find('.fb-like-inactive');
    if (inactive.length && (typeof FB != 'undefined')) {
      inactive.removeClass('fb-like-inactive').addClass('fb-like');
      FB.XFBML.parse(this);
    }
  });
});

它找到fb-like-inactive 按钮，然后查找树以找到包含control_menu 元素，然后将事件附加到control_menu 元素以检测用户何时将鼠标悬停在它们上方。当它检测到特定菜单元素的悬停时，它会在该元素中查找类似按钮的非活动按钮，将它们标记为正常fb-like，然后仅解析该元素的内容。

我希望这可以节省一些时间。

【讨论】：

【解决方案7】：

我只花了一个小时在这方面，在更基本的层面上，您需要知道在本地测试您的页面时 Facebook 按钮不会呈现。

这似乎很明显，但只有在从网络服务器呈现时才会起作用。

【讨论】：

【解决方案8】：

Per 的解决方案基于 fb 按钮的 XFBML 版本，我不确定如何使用“html5 版本”执行此操作，或者是否真的有可能，但我找到了一个不会剪辑的 CSS/JS 解决方案内容，所以这里是：

html

<button class="like-button">I like this stuff</button>

<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>

CSS：

html body .aural {
    position: absolute;
    font-size: 0;
    left: -9999px;
}

jQuery:

$('body').on("click", '.like-button', function(e) {
    var $socialShare = $('.social-share');
    $socialShare.css({'font-size':'1em'});
    var sw = $socialShare.width();
    $socialShare.animate({left: sw-80}, 400);
});

您可能必须使用 !important 规则（在 css 和 js 中）或嵌套 .aural 类，具体取决于 css 的其余部分。如果它不起作用，我建议尝试更改默认布局，使其不会覆盖 .aural 或嵌套 .aural 并作为最后的手段使用 !important..

【讨论】：

【解决方案9】：

我遇到了同样的问题，但罪魁祸首是在 about:config 中将跟踪保护设置为 true。

这个提示最初让我想到了这个想法： Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster

【讨论】：

【解决方案10】：

我的解决方案与上述任何一个都完全不同。

我的页面中有一个角色动画，其中一个元素具有 id="body"（这是完全合理的），但这似乎杀死了 FB 脚本。

当我重命名我的 id 后，共享又开始工作了；我只能假设存在某种冲突，因为 id'ed 元素可以作为全局变量引用。

我通过删除元素直到一切正常的通常过程发现了这一点，所以我很确定是这个。

【讨论】：