how to let a login button become a drop down menu after click

Question

I am making a social website and encounter some problems about Facebook login.

I can login successfully. The problem is that I hope after the user click the login button on navigation bar, the button will become a drop down menu.

If the user click the drop down menu, they can go to their profile site or logout.

Sorry for my English presentation so I draw picture to make you understand

<a id="login_button">Login</a>

and below is part of my js code.

  $(function(){

     $("#login_button").click(function() {
       FB.login();
       get_my_profile();
     });

  });

  var get_my_profile =function() {

     FB.api("/me", function(response){
        var username =response.name;
        $("#profile_name").html(username);
     });

     FB.api("/me/picture", function(response) {
        var userpicture =response.data.url; 
        $("#profile_picture").attr("src", userpicture);
     });
  }

Answer 1

You can use FB.getLoginStatus() to determine if user is logged in or not.

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and has authenticated your app

  $("#userMenu").show();


  } else if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    // but has not authenticated your app

    $("#login_button").show();

  } else {
    // the user isn't logged in to Facebook.
  }
 });



<a id="login_button" style="display: none;">Login</a>


<div class="btn-group" id="userMenu" style="display: none;">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    UserName <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a id="userProfile" href="#">User Profile</a></li>
    <li><a id="logOut" href="#">Logout</a></li>
  </ul>
</div>