Facebook Posts are revealed after refreshing the page: Javascript

Question

After struggling, I finally came across the solution for what I was trying to achieve. I have successfully integrated the posts of Facebook with my application.

But there is only one issue. I want to have the post in the textarea after the person logins. But I could not see the post unless I refresh the page of the website.

Here is the code that I am trying to perform:

<div id="fb-root"></div>
<script>
function getUserData() {
    FB.api('/me', {fields: 'email, posts'}, function(response) {
        document.getElementById('for_analysis').innerHTML = 'Hello ' + response.posts.data[0].message;

    });
}

window.fbAsyncInit = function() {
    //SDK loaded, initialize it
    FB.init({
        appId      : 'MyID',
        xfbml      : true,
        version    : 'v2.10'
    });

    //check user session and refresh it
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            //user is authorized
            //document.getElementById('loginBtn').style.display = 'none';
            getUserData();

        } else {
            //user is not authorized
            document.getElementById('for_analysis').innerHTML = '';
        }
    });
};


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

//add event listener to login button
document.getElementById('loginBtn').addEventListener('click', function() {
    //do the login
    FB.login(function(response) {
        if (response.authResponse) {
            //user just authorized your app
            //document.getElementById('loginBtn').style.display = 'none';
            getUserData();
            //document.location.reload(true)
        }
    }, {scope: 'email,user_posts', return_scopes: true});
}, false);

</script>
<div class="fb-login-button" data-max-rows="2" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true" data-scope = "email,user_posts"></div>

Kindly, let me know what I need to do to make the content visible after a person logs in.

I tried to reload the page after the getUserData() is executed using the command window.location.reload() , also tried : window.location.reload(true) , document.location.reload() , and document.location.reload(true) .

but the page didn't stopped refreshing, hence, neglected the reloading part.

Please suggest a better solution if any.

Answer 1

You are using FB.login AND the login button. Use your own button and call FB.login on your own. Right now you aren´t even using FB.login , only the login button without any callback after successful login.

Alternatively, you can use the onlogin callback of the login button and forget about FB.login : https://developers.facebook.com/docs/facebook-login/web/login-button/#settings