javascript - Facebook JavaScript SDK ログインボタンがポップアップ表示されない

Question

私が作成した多くの Facebook アプリで以下のコードを長い間使用してきましたが、数時間前からこのコードが機能しなくなったようです。このコードが使用できなくなったのか、一時的に使用できなくなったのかはわかりません。以下のコードに似た代替コードはありますか?

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>FB APP</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
body{
    background: #ffffff url('lp.jpg') top center no-repeat;
    margin-left: 160px;
}
@font-face {
    font-family:fabada;
    src: url('fabada.ttf');
}
#likegate{
    text-align: center;
    margin-top: 400px;
    margin-left: 350px;
    padding-bottom: 100px;
}
</style>
</head>
<body>
<!-- DEFINITING FACEBOOK APP ID -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
    FB.init({
        appId   : '448829841800709',
        status  : true, // check login status
        cookie  : true, // enable cookies to allow the server to access the session
        xfbml   : true  // parse XFBML
    });
    FB.UIServer.setActiveNode = function(a,b){FB.UIServer._active[a.id]=b;}
    // Scroll Bar Fixed
    window.setTimeout(function() {
        FB.Canvas.setAutoResize(90);
        FB.Canvas.setAutoResize();
        FB.Canvas.setSize({ width: 810, height: 555 });
    }, 250);
</script>
<script type="text/javascript">
function loging(getuid){
jQuery("#loginfb").hide();
jQuery("#fbload").show();
FB.api(
          {
            method: 'fql.query',
            query: 'SELECT name, uid FROM user WHERE uid=' + getuid 
          },
          function(response) {
            var user = response[0];
            jQuery.ajax({
            type: 'GET',
            url: 'login.php?uid=' + getuid,
            success: function(data) {
                jQuery('#jstarget').html(data);
                jQuery("#fbload").hide();
            }
            });
          }
        );        
}

window.fbAsyncInit = function () {
FB.init({
          appId   : '448829841800709',
          status  : true, // check login status
          cookie  : true, // enable cookies to allow the server to access the session
          xfbml   : true, // parse XFBML
          oauth   : true
        });
}

jQuery(document).ready(function() {
    // fetch the status on load
    jQuery('#loginfb').bind('click', function() {
        FB.init({
              appId   : '448829841800709',
              status  : true, // check login status
              cookie  : true, // enable cookies to allow the server to access the session
              xfbml   : true, // parse XFBML
              oauth   : true
            });
        if (response.authResponse){
            FB.api('/me', function(response) {
            loging(response.id);
            }); 
        } 
        else{
            //user is not connected to your app or logged out
            FB.login(function(response) {
                if(response.authResponse) {
                    FB.api('/me', function(response) {
                    loging(response.id);
                    });
                } 
                else {
                    //user cancelled login or did not grant authorization
                }
            }, {scope:'publish_stream'});   
        }
    });
    // handle a session response from any of the auth related calls
});
</script>
<div id="jstarget"></div>

<div id="box">
    <!--MAIN CONTENT-->
    <div id="content">
        <div id="likegate">
            <img src="login.png" style="cursor: pointer; float: left;" id="loginfb" alt="Login">
            <img src="ajax-loader.gif" style="float: left; padding-left: 50px; display:none" id="fbload" alt="Loading">
        </div>
    </div>
</div>
</body>
</html>

アップデート

これを外すと

if (response.authResponse){
    FB.api('/me', function(response) {
    loging(response.id);
    }); 
}
else{
   // this code here not removed
}

ポップアップ許可ダイアログが表示されますが、このアプリを許可したときにログインボタンをもう一度クリックすると、ポップアップ許可ダイアログが再び表示されるのはなぜですか?

score 0 · Accepted Answer

複数の FB.init をすべて削除する必要があります。jquery 1.7.1 以降では .bind() を使用しないでください。

2) XD の問題を解決するのに役立つ channel.html を追加します。3) FB.getAuthResponse() を使用して、認証応答を取得します

簡単なクリーンアップを行いましたが、テストしたことはありません! 改善の余地はたくさんありますが、次のようになります。

<!-- DEFINITING FACEBOOK APP ID -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '448829841800709', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

     FB.UIServer.setActiveNode = function(a,b){FB.UIServer._active[a.id]=b;}
    // Scroll Bar Fixed
    window.setTimeout(function() {
        FB.Canvas.setAutoResize(90);
        FB.Canvas.setAutoResize();
        FB.Canvas.setSize({ width: 810, height: 555 });
    }, 250);

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<script type="text/javascript">
function loging(getuid){
    jQuery("#loginfb").hide();
    jQuery("#fbload").show();
    FB.api(
              {
                method: 'fql.query',
                query: 'SELECT name, uid FROM user WHERE uid=' + getuid 
              },
              function(response) {
                var user = response[0];
                jQuery.ajax({
                type: 'GET',
                url: 'login.php?uid=' + getuid,
                success: function(data) {
                    jQuery('#jstarget').html(data);
                    jQuery("#fbload").hide();
                }
                });
              }
            );        
}


jQuery(document).ready(function() {
    // fetch the status on load
    jQuery('#loginfb').on('click', function() {

        if (FB.getAuthResponse()){
            FB.api('/me', function(response) {
            loging(response.id);
            }); 
        } 
        else{
            //user is not connected to your app or logged out
            FB.login(function(response) {
                if(response.authResponse) {
                    FB.api('/me', function(response) {
                    loging(response.id);
                    });
                } 
                else {
                    //user cancelled login or did not grant authorization
                }
            }, {scope:'publish_stream'});   
        }
    });
    // handle a session response from any of the auth related calls
});
</script>

javascript - Facebook JavaScript SDK ログイン ボタンがポップアップ表示されない

1 に答える 1

Related

Reference

javascript - Facebook JavaScript SDK ログインボタンがポップアップ表示されない