'statusChangeCallback' is not defined Facebook Javascript SDK Login Error

Question

For New Developers who are trying to integrate facebook login and authentication in their websites, they might receive the error if they'll simply try to copy the tutorial from Facebook Help for Developers.

Error is : Uncaught ReferenceError: statusChangeCallback is not defined

Code:

    <script>
        function checkLoginState() {
            FB.getLoginStatus(function (response) {
                statusChangeCallback(response);
            });
        }

      (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'));


      window.fbAsyncInit = function () {
          FB.init({
              appId: '<Your App ID>',
              cookie: true,
              xfbml: true,
              version: 'v2.12'
          });

          FB.AppEvents.logPageView();

      }; 
    </script>

    <fb:login-button scope="public_profile,email"
                     onlogin="checkLoginState();">
    </fb:login-button> 

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

Answer 1

The solution is that new developers are forgetting to write success callback function in their code. The problem occurs when they try to copy the code from Facebook's Guide that comes immediately after Facebook App Registration.

In your HTML define a div with id status <div id="status"></div> just before the <script> tag.

Please include the javascript method below for the API to work. I have written some console.log verbose text. You can delete this text and replace with yours.

   function statusChangeCallback(response) {
                console.log('statusChangeCallback');
                console.log(response);
                // The response object is returned with a status field that lets the
                // app know the current login status of the person.
                // Full docs on the response object can be found in the documentation
                // for FB.getLoginStatus().
                if (response.status === 'connected') {
                    // Logged into your app and Facebook.
                    console.log('Welcome!  Fetching your information.... ');
                    FB.api('/me', function (response) {
                        console.log('Successful login for: ' + response.name);
                        document.getElementById('status').innerHTML =
                          'Thanks for logging in, ' + response.name + '!';
                    });
                } else {
                    // The person is not logged into your app or we are unable to tell.
                    document.getElementById('status').innerHTML = 'Please log ' +
                      'into this app.';
                }
            }