How to get Facebook Login Button To Display "Logout"

Question

I apologize ahead of time if this is clearly documented somewhere on the FB developer site - but I can't find it (so please link me if appropriate).

I've implemented the FB login button on a website using GAE + Python. Here is the HTML:

<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({appId: 'ad16a806fc10bef5d30881322e73be68', status: true, cookie: true, xfbml: true});
  FB.Event.subscribe('auth.sessionChange', function(response) {
    if (response.session) {
      // A user has logged in, and a new cookie has been saved
    } else {
      // The user has logged out, and the cookie has been cleared
    }
  });
</script>

Currently the behavior is - if I click on the "login" button, I am asked to allow the application access to FB. Which I then choose, "OK". But then the login button is still showing "login" and not "logout". How do I implement that? On the server or client side?

Answer 1

Its not documented on the FB SDK login-button page for some reason, but you can add the autologoutlink="true" attribute to the tag and it will show a logout button if you are logged in rather than just making the button invisible.

<fb:login-button autologoutlink="true"></fb:login-button>

Warning: it will ignore that tag if you are using custom text on the login button like

<!-- This will always display the button, whether you are logged in or out -->
<fb:login-button autologoutlink="true">Login To My Service!</fb:login-button>