网站Facebook登录按钮登录后切换文本的技术求助及教程需求

嘿，我知道你已经把Facebook登录按钮加上了，功能也正常，但登录后按钮还显示登录文本确实有点尴尬。别担心，咱们只需要监听登录状态的变化，动态更新按钮文本就行，具体步骤如下：

1. 先确认Facebook SDK初始化没问题 #

首先得保证你的页面已经正确加载并初始化了FB SDK，基础代码大概是这样（记得把APP_ID换成你自己的）：

window.fbAsyncInit = function() {
  FB.init({
    appId      : '你的APP_ID',
    cookie     : true,
    xfbml      : true,
    version    : 'v18.0' // 用最新版本号就行
  });
  
  // 页面加载时先检查一次登录状态
  checkLoginStatus();
};

// 加载SDK的脚本，这段不用改
(function(d, s, id){
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "https://connect.facebook.net/en_US/sdk.js";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

2. 写个状态检查函数，更新按钮文本 #

接下来创建一个函数，专门用来检查用户的登录状态，然后根据状态改按钮文字：

function checkLoginStatus() {
  FB.getLoginStatus(function(response) {
    updateLoginButton(response);
  });
}

function updateLoginButton(response) {
  // 先拿到你的登录按钮DOM元素，记得给按钮加个唯一id哦
  const loginBtn = document.getElementById('facebook-login-btn');
  
  if (response.status === 'connected') {
    // 用户已经登录了，把按钮改成"已登录 | 退出"
    loginBtn.textContent = '已登录 | 退出';
    // 顺便给按钮绑定退出登录的逻辑
    loginBtn.onclick = function() {
      FB.logout(function() {
        // 退出成功后，把按钮文本改回去，恢复登录功能
        loginBtn.textContent = '使用Facebook登录';
        loginBtn.onclick = () => FB.login();
      });
    };
  } else {
    // 用户没登录，保持登录文本，绑定登录点击事件
    loginBtn.textContent = '使用Facebook登录';
    loginBtn.onclick = () => FB.login();
  }
}

3. 监听实时状态变化，确保即时更新 #

除了页面加载时检查，还要监听登录状态的实时变化——比如用户在别的页面登录了，或者直接通过FB弹窗登录成功，咱们得立刻响应：

// 订阅FB的状态变更事件
FB.Event.subscribe('auth.statusChange', function(response) {
  updateLoginButton(response);
});

小提醒 #

• 如果你之前用的是FB官方的<fb:login-button>标签，建议换成自定义的按钮，因为官方标签的文本修改起来很受限，自定义按钮能完全掌控样式和文本
• 记得给按钮加个唯一的id，比如facebook-login-btn，这样才能准确找到它
• 在FB.login()的回调里也可以调用一次updateLoginButton()，确保登录成功后立刻更新文本

这样设置好之后，用户一点登录，成功后按钮马上就会变成已登录状态，点击还能退出，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Samuel Olubayo