I’m a beginner in this field, I’m working on a custom wordpress theme (building it from scratch) and I want to add facebook login to my website, so users should login before use one of my services, I used this code directly after tag in my header.php file

<div id="fb-root"></div>
<script>
    // This is called with the results from from FB.getLoginStatus().
    function statusChangeCallback(response) {

        // The response object is returned with a status field that lets the app know the current login status of the person.
        if (response.status === 'connected') {
            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 if (response.status === 'not_authorized') {
            // The person is logged into Facebook, but not your app.
            document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
        } else {
            // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.
            document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
        }

    }

    // This function is called when someone finishes with the Login Button.
    function checkLoginState() {
        FB.getLoginStatus(function (response) {
            statusChangeCallback(response);
        });
    }

    window.fbAsyncInit = function () {
        FB.init({
            appId: 'here I wrote my app id',
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // parse social plugins on this page
            version: 'v2.1' // use version 2.1
        });

        // Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus(). 
        // This function gets the state of the person visiting this page.
        FB.getLoginStatus(function (response) {
            statusChangeCallback(response);
        });
    };

    // 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'));
</script>

and I put this code snippet in one of the wordpress pages to display the login button in this page

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

but nothing appears, really I don’t know what should I do I was just following the steps mentioned in this link

https://developers.facebook.com/docs/facebook-login/web

Thanks in advance

Read more here: Facebook login for my wordpress site


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: