How to dynamically show / hide facebook login button

Question

How can I determine through javascript if a user has logged into my site via facebook or not? Based on this result, I would like to show / not show a <fb:login-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 this work?

Answer 1

I did it like this:

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(); }); 

Answer 2

I don’t think jQuery will allow you to embed non-standard HTML tags, but you will definitely want to change your closing tag from </fb> to </fb:login-button> .

Also, whenever you insert XFBML tags into your DOM after the page loads, you need to request that the FB API reanalyze the DOM. This should do just that:

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

Answer 3

I do not think you can use jQuery on facebook. They have their own wrapper for js code. Also check this one out .