Question

我想在我的骨干项目中使用css自定义默认的Facebook登录按钮。

这就是我所做的：

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
        appId      : '285660138255145',
        status     : true,
        xfbml      : true
    });
  };
  function fb_login(){
    FB.login(function(response) {
        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID

            FB.api('/me', function(response) {
                user_email = response.email; //get user email
            });
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        scope: 'publish_stream,email'
    });
}

(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=285660138255145";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

</script>

<div style="position: relative; left: 16px; top: 10px;">
  <div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true" onclick="fb_login();">
      <span class="icon icon-fb"></span>
      <span class="title">Login with Facebook</span>
  </div>
</div>

在<div class="fb-login-button">中添加两个跨度后，即使帐户成功登录，登录按钮仍会显示，此处应该是“注销”按钮。

如果符合以下条件，它将起作用：

<div style="position: relative; left: 16px; top: 10px;">
  <div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true" onclick="fb_login();">
     //text.... not <span>
  </div>
</div>

Answer 1

<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true"></div>

注意

data-auto-logout-link="true"

另一件事 - 您的代码中没有App Id。添加它。您将通过在Facebook上创建应用来获得app id。如果没有fb login plugin，则无法使用app Id。

 <script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID_SHOULD_BE_HERE";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

请注意 YOUR_APP_ID_SHOULD_BE_HERE 部分。

<强>更新

根据您的评论，以下代码适用于我，如果您成功将某人登录到您的应用中，则应该适用于所有人。代码用于自定义按钮。是的，如果您在登录后立即重定向到另一个页面，那么肯定您可能无法在重定向之前的那一小时内看到注销按钮。

<fb:login-button show-faces="true" scope="email" data-auto-logout-link="true" width="200" max-rows="1">Connect with Facebook</fb:login-button>

Answer 2

试试这个

<?php 
$ses_user=$this->session->userdata('User');
if(empty($ses_user))   
{ 
    echo img(array('src'=>$base_url.'images/facebook.png','id'=>'facebook','style'=>'cursor:pointer;float:left;margin-left:550px;'));

 }  
else
{
    echo '<img src="https://graph.facebook.com/'. $ses_user['id'] .'/picture" width="30" height="30"/><div>'.$ses_user['name'].'</div>';    
    echo '<a href="'.$this->session->userdata('logout').'">Logout</a>';     
}
?>

自定义默认代码后，Facebook注销按钮未显示

2 个答案: