在Wordpress中集成Facebook JavaScript SDK

Question

What I want to achive is that I want to know if a certain user is login in facebook using my plugin. 我要实现的是，我想知道某个用户是否使用我的插件登录了Facebook。

What I did is I followed the instructions by facebook . 我所做的是我遵循了facebook的指示。

Below the <body> in my header in wordpress I added 在我添加的wordpress标题中的<body>下面

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'my_app_id',
      xfbml      : true,
      version    : 'v2.7'
    });
  };

  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

I added my App ID there also 我也在那里添加了我的应用程序ID

In the plugin I used the tutorial above on how to identify the user. 在插件中，我使用了上面有关如何识别用户的教程。 So I added this code to the plugin 所以我将此代码添加到了插件中

    <script type="text/javascript">

    FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and has authenticated your
    // app, and response.authResponse supplies
    // the user's ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire

    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;

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


</script>

But the problem is that it won't work. 但是问题在于它无法正常工作。 Nothing is displayed. 什么都没有显示。

Am I doing the right thing? 我做对了吗？ or I am missing something? 还是我缺少什么？

Answer 1

Think is you should show Facebook button for login with facebook. 认为您应该显示Facebook按钮以登录Facebook。 for example: 例如：

<div class="fb-status text-center">
    <fb:login-button data-size="xlarge" scope="public_profile,email,user_photos">
    </fb:login-button>

    <div id="status">
    </div>

Then somehow you need to know that user tried to login with facebook and only then check if user allowed to use his name, email and other options what you defined in scope. 然后，您需要以某种方式知道该用户尝试使用facebook登录，然后才检查该用户是否被允许使用其姓名，电子邮件和其他选项来定义您在范围内定义的内容。

In my plugin was like this. 在我的插件中是这样的。 I know that is bad practice, but it works for me. 我知道这是不好的做法，但对我有用。

<script>
    fbGalleries.loginStatus = false;

    function checkLoginState() {
            FB.getLoginStatus(function(response) {
                statusChangeCallback(response);
            });
            if (fbGalleries.loginStatus == false) {
                setTimeout(checkLoginState, 2000);
            }
            else {
                $('.fb-status').remove();
            }
        }

      window.fbAsyncInit = function() {
            FB.init({
                appId      : '*****************',
                cookie     : true,  // enable cookies to allow the server to access
                                    // the session
                xfbml      : true,  // parse social plugins on this page
                version    : 'v2.5' // use graph api version 2.5
            });

        };

        // Load the SDK asynchronously
        (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/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    function statusChangeCallback(response) {
        if (response.status === 'connected') {
            testAPI();
        } else if (response.status === 'not_authorized') {
            document.getElementById('status').innerHTML = 'Please log ' +
                'into this app.';
        } else {
            document.getElementById('status').innerHTML = 'Please log ' +
                'into Facebook.';
        }
    }

    function testAPI() {
        FB.api('/me', function(response) {
            console.log('Successful login for: ' + response.name);
            document.getElementById('status').innerHTML =
                'Thanks for logging in, ' + response.name + '!';
            getFbPhotos(); //in my case pooling user photo galeries
            fbGalleries.loginStatus = true;
        });
    }

</script>

Some where you need run checkLoginState(); 一些需要运行的地方checkLoginState();

在Wordpress中集成Facebook JavaScript SDK

问题描述

1 个解决方案

解决方案1
0 2016-08-30 12:24:28

在Wordpress中集成Facebook JavaScript SDK

问题描述

1 个解决方案

解决方案1 0 2016-08-30 12:24:28

解决方案1
0 2016-08-30 12:24:28