Question

我有一个类似Facebook的按钮，使用ajax加载。该按钮有效，但奇怪的是在Firefox中它没有出现。

<fb:like href="@Model.Url" show_faces="true" height="30" width="400" ></fb:like>

在Firefox中，生成的html带有height = 0px。为什么？

<span style="height: 0px; width: 400px;">
<iframe id="f2b3cbcbf388e" class="fb_ltr " scrolling="no" name="f3cdf7e205a545e" style="border: medium none; overflow: hidden; height: 0px; width: 400px;" ....

这不会发生在Chrome上。

与facebook相关我在关闭身体标签之前只有这个

<script>    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=00000";
        fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));</script>

Answer 1

我还在调查原因，但就我而言，我认为这是因为在XFBML解析时隐藏了包含div。仍在寻找更好的解决方案，但这可以通过手动清除增加的高度css来解决：

FB.XFBML.parse(document, function(){
    $('.fb_button_container iframe').css('height','');
    $('.fb_button_container .fb-like > span').css('height','');
});

这使用jquery ...如果你愿意，你很容易就不能使用它。同样在这种情况下，我在类“fb_button_container”的容器中添加了like按钮 - 这不是自动生成的。

Answer 2

如果每页有超过1个Facebook按钮，他有一个奇怪的行为。我将按钮移动到详细信息页面而不是列表页面，这解决了我的问题。

Answer 3

我遇到了同样的问题。除了Firefox之外，所有其他常见浏览器都正确呈现了Button。不知何故，在Firefox中，span的内联样式设置为0px。感谢theozero，我终于管理了正确渲染的按钮。就像theozero我把Facebook Like Button放在一个div中，在页面加载时隐藏了JS。通过theozero的答案，我找到了Facebook的documentation of the FB.XFBML.parse，并将其重新解析功能完全放在最初提供的Facebook JavaScript SDK（最后一行）的末尾：

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
FB.XFBML.parse();

并且按钮被渲染了！

编辑：太快乐太快乐了。这只有效，导致页面加载时立即取消隐藏包含按钮的div。我把解析函数放到JS中，取消隐藏div。这样可行。确实如此。但现在元素不再平稳地转换......唉！ Facebook的！孔！

编辑：所以！现在已经完成了。必须在slideToggle函数上调用重新解析作为回调，以在切换操作完成时重新解析元素。 .slideToggle('slow', function(){ FB.XFBML.parse(); });当然，类似按钮突然突然弹出，但我可以忍受，尽管我可以让按钮以某种方式消失。

Answer 4

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

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

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

Facebook中的“赞”按钮在AJAX驱动的页面中 - Firefox bug

4 个答案: