的HTML

Question

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

<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的bug有点熟悉，但是如果有人为facebook这样的按钮做任何工作，我就很蠢。

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

Answer 2

这个CSS为我解决了

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

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

Answer 4

我在Firefox上遇到了同样的问题（v.29.0.1），结果是AdBlock plus（v.2.6）阻止了Like和Share按钮的渲染。

Answer 5

你可以尝试这样调用类似的按钮：

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

如果您仍然遇到问题，请告诉我。

Answer 6

留下答案因为我还不能留下评论......

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>

代码显示用户将鼠标悬停在ul元素上时的下拉列表control_menu。我们使用此代码来处理延迟解析：

$(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，然后仅解析该元素的内容。

我希望能节省一些时间。

Answer 7

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

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

Answer 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中）或根据css的其余部分嵌套.aural类。如果它不起作用，我建议尝试更改默认布局，以便它不会覆盖.aural或nest .aural，并作为最后的手段使用！important ..

Answer 9

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

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

Answer 10

我的解决方案完全不同于以上任何一种。

我的页面中有一个角色动画，其中一个元素的id =＆＃34; body＆＃34; （这是完全合理的）然而这似乎杀死了FB剧本。

一旦我重新命名我的身份，这份分享就开始了;我只能假设存在某种冲突，因为id的ed元素可以作为全局变量引用。

我通过删除元素的常规过程发现了这一点，直到事情有效，所以我很确定这是这个。

Facebook喜欢按钮没有出现在Firefox中

10 个答案:

的HTML

CSS：

的jQuery：