How to dynamically show/hide a facebook login button
10,535
Solution 1
I did It this way:
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();
});
Solution 2
I don't think jQuery will stop you from inserting non-standard HTML tags, but you'll definitely want to change your closing tag from </fb>
to </fb:login-button>
.
Beyond that, whenever you insert XFBML tags into your DOM after page load, you'll need to request that the FB API re-parses the DOM. This should do just that:
FB.ensureInit(function(){
FB.XFBML.Host.parseDomTree();
});
Solution 3
I don't think you can use jQuery in facebook. They have their own a wrapper for js code. Check also this.
Comments
-
gregory boero.teyssier almost 2 years
How can I determine via javascript if a user has logged in to my site via facebook connect or not? Based on this result, I would like to show/not show a
<fb:login-button>
button on the site.If I did something like this using jquery:
<div id="login"></div> <script> if (notLoggedIn) { $("#login").html("<fb:login-button></fb>"); } </script>
Will it work?