如何动态显示/隐藏Facebook登录按钮

Question

我该如何通过javascript判断用户是否已经通过Facebook连接登录了我的网站？根据这个结果，我想在网站上显示/隐藏一个<fb:login-button>按钮。

如果我使用jquery做了这样一件事：

<div id="login"></div>

<script>
if (notLoggedIn)
{
   $("#login").html("<fb:login-button></fb>");
}
</script>

它会起作用吗？

- Ali

Answer 1

我循此途径实现了它: HTML:

<div id="logindisplay">
    <span id="login">
      <fb:login-button background="dark" onlogin="facebook_onlogin_ready();">
      </fb:login-button>
    </span>
</div>

js:

function updateUserBox() {
    var user_box = document.getElementById("login");
    user_box.innerHTML = "<span><fb:name uid=loggedinuser useyou='false'></fb:name><fb:profile-pic uid=loggedinuser facebook-logo='true'></fb:profile-pic></span>";
    FB.XFBML.Host.parseDomTree();
        } 

FB_RequireFeatures(["Connect"], function() {
            FB.init("appkey", "/Content/xd_receiver.htm", { "ifUserConnected": updateUserBox });
            FB.Connect.showPermissionDialog("publish_stream,status_update");
            FB.Connect.requireSession();
        });

- CD..

---

你是否注意到当你刷新页面时，原始的登录按钮会出现，然后切换到你的个人资料图片？你如何避免这种情况发生？ - Jack Marchetti

@JackMarchetti，我也遇到了这个问题。你是怎么解决的？谢谢！ - Samuel Aiala Ferreira

@SamuelAialaFerreira 我实际上不记得了。在过去的8年中，FB API已经发生了很大变化，包括摆脱了FBML。 - Jack Marchetti

Answer 2

我认为jQuery不会阻止您插入非标准HTML标签，但是您肯定希望将您的闭合标签从</fb>更改为</fb:login-button>。

除此之外，在页面加载后插入XFBML标签时，您需要请求FB API重新解析DOM。这应该就可以做到：

FB.ensureInit(function(){
  FB.XFBML.Host.parseDomTree();
});

- jmikola

---

新的方法是：FB.XFBML.parse(); - Gal Bracha

Answer 3

我认为在Facebook上无法使用jQuery。他们有自己的js代码包装器。还要检查这个。

- Elzo Valugi

---

我在自己的网站/域名上使用jquery，该网站使用Facebook连接，而不是作为Facebook上的实际应用程序。您认为jquery适用于此吗？ - Ali

如果您将您的Facebook应用程序部署为iframe，那么您可以使用所有JavaScript。 - Pat James