blocks|key|4998116|text|就像用javascript呈现的按钮(<div+class="fb-like"/>和<fb:like/>)一样，如果它们最初是隐藏的(display:none)，就会得到height=0。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4998117|要解决此问题，请在显示容器后使用javascript创建元素，然后运行：|4998118|FB.XFBML.parse();|code-block|syntax|javascript|4998119|示例：|4998120|result.show();
var+like_box+=+$(".fb-like-inactive",+result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();|4998121|entityMap^0|J|M|16|A|1V|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>Like buttons that are rendered with javascript (<code>&lt;div class="fb-like"/&gt;</code> and <code>&lt;fb:like/&gt;</code>) get height=0 if they are initially hidden (<code>display:none</code>). </p>

<p>To work around this, create the element with javascript after the container is displayed, and then run:</p>

<pre><code>FB.XFBML.parse();
</code></pre>

<p>Example:</p>

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


blocks|key|150499|text|这个CSS为我解决了这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|150500|.fb-like+span,+.fb-like+iframe+{+height:25px!important;+width:150px!important}|code-block|syntax|javascript|150501|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This CSS solved it for me </p>

<pre><code>.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
</code></pre>


blocks|key|4998204|text|这仍然是一个问题，可以在这里看到(也包含修复)：http://codepen.io/wiledal/pen/cGnyq|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4998205|Firefox不会像在解析时隐藏div那样绘制Facebook。在上面的例子中，我在不同的时间后延迟了div的显示。您可以看到500ms后显示的like按钮不会在Firefox中呈现。|4998206|我解决了一个办法，在喜欢之后不会切断评论对话框，只需使用min-height和min-width，而不是之前提出的设置值。|4998207|.fb-like+span,+.fb-like+iframe+{
++min-width:+100px+!important;
++min-height:+20px+!important;
}++|code-block|syntax|javascript|4998208|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/wiledal/pen/cGnyq^0|O|Z|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>This is still an issue, as can be seen here (also contains fix):
<a href="http://codepen.io/wiledal/pen/cGnyq">http://codepen.io/wiledal/pen/cGnyq</a></p>

<p>Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.</p>

<p>I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.</p>

<pre><code>.fb-like span, .fb-like iframe {
  min-width: 100px !important;
  min-height: 20px !important;
}  
</code></pre>


blocks|key|4998264|text|我只在火狐(29.0.1版本)上遇到了同样的问题，结果是AdBlock+plus+(2.6版本)阻止了Like和Share按钮的渲染。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4998265|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.</p>


blocks|key|2059199|text|您可以尝试像这样调用like按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2059200|<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>|code-block|syntax|javascript|2059201|如果你仍然看到问题，请告诉我。|2059202|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Can you try calling the like button like so:</p>

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

<p>And let me know if you're still seeing issues.</p>


blocks|key|150516|text|留下答案，因为我还不能留下评论...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|150517|Oli漂亮的CSS+hack最初看起来像是起作用了：|150518|.fb-like+span,+.fb-like+iframe+{+height:25px!important;+width:150px!important}|code-block|syntax|javascript|150519|但是当我们实际点击like按钮时，它截断了试图弹出的评论框。|150520|Per的延迟解析解决方案似乎可以完成这项工作；这里有更多细节。在我们的示例中，下拉菜单中有like按钮，如下所示：|150521|<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>|150522|其中的代码在用户将鼠标悬停在control_menu元素上时显示下拉ul。我们使用以下代码来处理延迟的解析：|offset|length|style|CODE|150523|$(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);
++++}
++});
});|150524|它查找fb-like-inactive按钮，然后在树中查找包含的control_menu元素，然后将一个事件附加到control_menu元素以检测用户何时将鼠标悬停在这些元素上。当它检测到特定菜单元素的悬停时，它会查找该元素中不活动的like按钮，将它们标记为正常的fb-like，然后只解析该元素的内容。|150525|我希望这能节省一些时间。|150526|entityMap^0|0|0|0|0|0|0|E|C|Y|2|0|0|3|G|W|C|1L|C|3Q|7|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|18|8|@$Q|19|R|1A|S|T]|$Q|1B|R|1C|S|T]]|9|@]|A|$]]|$1|U|3|V|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1E|8|@$Q|1F|R|1G|S|T]|$Q|1H|R|1I|S|T]|$Q|1J|R|1K|S|T]|$Q|1L|R|1M|S|T]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1N|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|11|$]]

<p>Leaving an answer because I can't leave comments yet...</p>

<p>Oli's nice CSS hack looked like it worked initially:</p>

<pre><code>.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
</code></pre>

<p>but it clipped the comment box that tried to pop up when we actually clicked the like button.</p>

<p>Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:</p>

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

<p>with code that shows the drop down <code>ul</code> when the user hovers over the <code>control_menu</code> element. We used this code to handle the delayed parsing:</p>

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

<p>It finds the <code>fb-like-inactive</code> buttons, then looks up the tree to find the containing <code>control_menu</code> elements, then attaches an event to the <code>control_menu</code> elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal <code>fb-like</code>, and then parses just the content of that element.</p>

<p>I hope this saves someone some time.</p>


blocks|key|2883120|text|我刚刚在这上面花了一个小时，在更基本的层面上，你需要知道在本地测试你的页面时，Facebook按钮不会呈现。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2883121|这可能看起来很明显，但它只有在从when服务器渲染时才会起作用。|2883122|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.</p>

<p>It may seems obvious but it will only work when rendering from a webserver.</p>


blocks|key|2064135|text|Per的解决方案是基于fb按钮的XFBML版本的，我不确定如何使用"html5版本“来做到这一点，或者它是否真的可行，但我找到了一个不裁剪内容的CSS/JS解决方案，所以它是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2064136|html|2064137|<button+class="like-button">I+like+this+stuff</button>


<div+class="social-share+aural">...stuff...</div>|code-block|syntax|javascript|2064138|CSS：|2064139|html+body+.aural+{
++++position:+absolute;
++++font-size:+0;
++++left:+-9999px;
}|2064140|jQuery：|2064141|$('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);
});|2064142|您可能必须使用!important规则(在css和js中)或嵌套.aural类，这取决于您的css的其余部分。如果它不起作用，我建议尝试更改默认布局，这样它就不会覆盖.aural或嵌套.aural，并作为最后的手段使用！重要。|2064143|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:</p>

<h1>html</h1>

<pre><code>&lt;button class="like-button"&gt;I like this stuff&lt;/button&gt;

&lt;!-- This is a hidden like-box --&gt;
&lt;div class="social-share aural"&gt;...stuff...&lt;/div&gt;
</code></pre>

<h1>CSS:</h1>

<pre><code>html body .aural {
    position: absolute;
    font-size: 0;
    left: -9999px;
}
</code></pre>

<h1>jQuery:</h1>

<pre><code>$('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);
});
</code></pre>

<p>You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..</p>


blocks|key|150566|text|我也有同样的问题，但罪魁祸首是在about:config中将跟踪保护设置为true。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|150567|这个技巧最初让我对这个想法产生了兴趣：Lifehacker:+Turn+on+Tracking+Protection+in+Firefox+to+Make+Pages+Load+44%25+Faster|offset|length|150568|entityMap|0|LINK|mutability|MUTABLE|url|http://lifehacker.com/turn-on-tracking-protection-in-firefox-to-make-pages-lo-1706946166^0|0|J|28|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>I had the same problem but the culprit was setting tracking protection in about:config to true.</p>

<p>This tip turned me on to the idea initially:
<a href="http://lifehacker.com/turn-on-tracking-protection-in-firefox-to-make-pages-lo-1706946166" rel="nofollow">Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster</a></p>


blocks|key|4998356|text|我的解决方案与上述任何一种完全不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4998357|我在我的页面中有一个角色动画，其中一个元素有id="body“(这是完全合理的)，然而这似乎杀死了FB脚本。|4998358|一旦我重命名了我的id，共享就再次开始工作；我只能假定存在某种冲突，因为id‘’ed元素可以被引用为全局变量。|4998359|我通过通常的删除元素的过程发现了这一点，直到一切正常，所以我相当确定是这样的。|4998360|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>My solution is completely different to any of the above.</p>

<p>I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.</p>

<p>As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.</p>

<p>I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.</p>


<p>I'm using the following code for my like button</p>

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

<p>Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.</p>


Facebook Like Button Not Showing Up In Firefox

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我为我的like按钮使用了以下代码<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>一些用户遇到了like按钮没有出现的问题。在3.6.17中注明，但在其他版本中观察到。我对fire

问Facebook点赞按钮未出现在Firefox中
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Facebook点赞按钮未出现在Firefox中EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Facebook点赞按钮未出现在Firefox中
EN