Facebook连接登录切换回用户中断div

Question

我已经想了好几个小时了，但我想不通。通常我可以通过搜索StackOverFlow找到答案，但这次我真的被难住了。

当以FB用户身份登录时，"使用Facebook登录"按钮运行良好。但当以FB页面的身份登录时，它会给出"切换回xxxxx用户使用此插件"的提示，这是非常正常的。然而，此消息的空白/白色部分脱离了div，并覆盖了我页面的其他内容！

代码如下：

<div id="LoginButton" style="margin-top:20px;width:130px;margin-left:auto;margin-right:auto;">
<?
if(!$fbuser) //Only show login button if user is not Logged In to FB
{
echo '<div class="fb-login-button" onlogin="javascript:CallAfterLogin();" size="small" scope="email">Login w/ Facebook</div><div class="clear"></div>';
}
else
{
//process user as a FB user
} 
?>
</div>

我试过：

• 清除div，这似乎无关紧要
• 只在fb登录按钮中使用纯文本进行测试，哪个父divLoginButton似乎包含fine
• 用来自Facebook JS的渲染代码替换fb登录按钮代码API，但按钮不再可点击

如果你在网站上冲浪，你可以看到问题http://www.dealshongkong.com作为FB页面(您可以在页面的左侧看到它)。

我在这里附上了一张我作为FB页面登录时看到的图片(问题)：http://www.dealshongkong.com/temp/stackoverflowproblem.jpg

Answer 1

我遇到了同样的问题。除了使用自定义的Facebook登录按钮，我没有找到其他方法。我刚创建了一个PNG文件，并添加了一些Facebook JavaScript API调用。

<div id="FaceBookLoginButton" onclick="FB.login(function(response) { }, 
{scope: 'email'});" 
style="background-image:url(/buttons/my_own_facebook_login_button.png);" 
/>
<span>Log in</span>
</div>

它适用于登录按钮。但如果你想使用其他社交插件(Like Button、Like Box、Send Button…)，你会再次遇到同样的问题。