修改

Question

我尝试整合一个facebook按钮，这个按钮会在我悬停div后出现，所以一切正常但按钮不会显示

好吧，我的英语不是很好，所以我有点困惑，因为我读到我需要解析这个元素但是怎么去？

jquery的

 <script type="text/javascript">

$(function(){
$("#f_button").hide(); 
});

</script>

<script type="text/javascript">
$(document).ready(function() {
$("#f_box").mouseover(function() {
$('#f_button').css('display','block');
$("#f_wing").hide();
}); 
$("#f_box").mouseout(function() {
$('#f_button').css('display','none');

$("#f_wing").show();
});
});
</script>

HTML

<div id="f_box">
<div id="f_wing">
text
</div>
<div id="f_button">
<div class="fb-like" data-href="https://www.facebook.com/pages/xx" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
text
</div>
</div>

CSS

#f_box
{
height: 70px;
width: 70px;
background-color: blue;
margin-top: 250px;
position: fixed;
}

#f_wing
{
float: left;
width: 50px;
height: 50px;
background-color: white;
}

#f_button
{
width: 150px;
height: 150px;
display: none;
margin-bottom: 0px;
background-color: red;
}

修改

现在这就是它现在的样子

//所以ajax / jquery背后的想法是我需要在jquery上重新加载按钮？

Answer 1

与我发生了一段时间......做了两件事，它的工作时间达到了99％：

确保您从某个服务器运行您的网站可能是localhost而不是直接浏览器
确保没有插件阻止fb按钮的可见性（某些弹出窗口拦截器插件

修改

您已在display:none上设置#f_button，因此即使在悬停时，f_button上也会设置显示类型，因此它不会显示....更改{的显示类型鼠标悬停上的{1}}，如：

#f_button

而不是

$('#f_button').css('display','block');

这应该做!!

第二次修改

在调用jQuery lib之后，使用以下内容在DOM准备好之前触发$("#f_button").show();

hide()

这样，通过使用以下方法，您可以根据需要多次触发任何方法....

$(function(){ $("#f_button").hide(); });

Answer 2

如果在页面加载时将样式设置为display:none，则该按钮将不会呈现。两天前发生在我身上。

所以，你需要做的是找到一种在加载时“隐藏”按钮的方法，而我所做的就是

#f_button.isLoading {
    position:fixed;
    top:-50px;
    left:-50px;
}

并且，在加载时，只需删除该类，而不是执行.show()

我希望这可以帮到你！

Answer 3

你的问题不是那么明确，但我会尽力回答（因为我无法评论，＆lt; 46 rep）。

如果您正在运行文件：// URI ，则Facebook按钮将无效。尝试python -m SimpleHTTPServer
如果它仍然不起作用，也许你忘记了一些事情：
1. 检查您是否正确设置了所需的标签。（ <div id="fb-root"></div> 和<script>(function(d, s, id) {...代码应该accordingly完成。）
2. 检查控制台是否有错误。
3. 我确定您的HTML语法有效。
测试Nico的修复。也可能是因为Facebook注入的iframe没有加载。
未尝试：也许您的应用处于沙盒模式，或者您是否阻止了应用信息中心中的某些网址？
未尝试：请尝试使用iframe。
仍然无法正常工作？它似乎对我有用：codepen

注意：

jQuery .show()等同于.css("display", "block")只是它返回到初始显示状态（即“inline-block”，“block”或“inline”）而不是“block” 。
我尝试了iframe但删除了＆amp; appId = xxxxxxxxxxxxxxx网址参数似乎仍然有用......很奇怪。

Jquery Facebook按钮不会显示

修改

3 个答案: