javascript - Hide the FB Login button if user already logged in - Stack Overflow

admin管理员组

文章数量:1426093

This seems like a simple problem and others have posted but the answer still eludes me. Specifically I have been through these two (here and here) SO questions repeatedly and I'm just not making the connection to my situation.

For me I thought I would wrap the login button in a div and then change the div visibility based upon login status. The div does indeed change visibilty but the fb login button remains visible???

Here is my code for wrapping the login button in the div:

....snip....
<div id="fblogin">
    <table align="center" style="text-align:center;">
        <tr>........</tr>
        <tr>
            <td>
                <div id="fb-root"></div>
                    <span id="fb-login">
                        <div
                            class="fb-login-button"
                            onlogin="afterFbLogin()"
                            data-show-faces="false"
                            data-width="200"
                            data-max-rows="1"
                            data-scope="publish_stream">
                        </div>
                    </span>
............snip.............

here is my FB.Init and checking for logged in status:

window.fbAsyncInit = function () {
    FB.init({
        appId: '352810974851050',        // App ID
        channelUrl: '//www.domain/channel.html',
        status: true, // check login status
        cookie: true, // enable cookies 
        xfbml: true // parse page for xfbml or html5 like login button below
    });

    // Put additional init code here
    FB.getLoginStatus(function (response) {

        if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            ShowFbLogin(false);
        } else if (response.status === 'not_authorized')
.........snip...................

and the js code for the ShowFbLogin function

        function ShowFbLogin(ShowLogin)
        {
            var div_FBLogin = document.getElementById('fblogin');
            var spn_FBLogin = document.getElementById('fb-login');
            var div_FBShare = document.getElementById('fbshare');

            if (ShowLogin)
            {
                div_FBLogin.style.visibility = 'visible';
                div_FBShare.style.visibility = 'hidden';
            }
            else
            {
                div_FBLogin.style.visibility = 'collapse';
                spn_FBLogin.style.visibility = 'collapse';
                div_FBShare.style.visibility = 'visible';
            }
        }

This seems like a simple problem and others have posted but the answer still eludes me. Specifically I have been through these two (here and here) SO questions repeatedly and I'm just not making the connection to my situation.

For me I thought I would wrap the login button in a div and then change the div visibility based upon login status. The div does indeed change visibilty but the fb login button remains visible???

Here is my code for wrapping the login button in the div:

....snip....
<div id="fblogin">
    <table align="center" style="text-align:center;">
        <tr>........</tr>
        <tr>
            <td>
                <div id="fb-root"></div>
                    <span id="fb-login">
                        <div
                            class="fb-login-button"
                            onlogin="afterFbLogin()"
                            data-show-faces="false"
                            data-width="200"
                            data-max-rows="1"
                            data-scope="publish_stream">
                        </div>
                    </span>
............snip.............

here is my FB.Init and checking for logged in status:

window.fbAsyncInit = function () {
    FB.init({
        appId: '352810974851050',        // App ID
        channelUrl: '//www.domain./channel.html',
        status: true, // check login status
        cookie: true, // enable cookies 
        xfbml: true // parse page for xfbml or html5 like login button below
    });

    // Put additional init code here
    FB.getLoginStatus(function (response) {

        if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            ShowFbLogin(false);
        } else if (response.status === 'not_authorized')
.........snip...................

and the js code for the ShowFbLogin function

        function ShowFbLogin(ShowLogin)
        {
            var div_FBLogin = document.getElementById('fblogin');
            var spn_FBLogin = document.getElementById('fb-login');
            var div_FBShare = document.getElementById('fbshare');

            if (ShowLogin)
            {
                div_FBLogin.style.visibility = 'visible';
                div_FBShare.style.visibility = 'hidden';
            }
            else
            {
                div_FBLogin.style.visibility = 'collapse';
                spn_FBLogin.style.visibility = 'collapse';
                div_FBShare.style.visibility = 'visible';
            }
        }

• javascript
• facebook
• facebook-javascript-sdk

Share Improve this question Follow edited May 23, 2017 at 12:30 CommunityBot 111 silver badge asked Aug 22, 2013 at 15:11 GPGVMGPGVM 5,6291010 gold badges6060 silver badges105105 bronze badges 1

• stackoverflow./questions/1254999/… check this out. It might help you. – user1500341 Commented Aug 22, 2013 at 15:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try instead using display: none for the #fb-login element. visibility: collapse is for table elements; should act like visibility hidden, that is, reserve space for the invisible button. visibility: collapse also doesn't work for IE8 at all.

本文标签： javascriptHide the FB Login button if user already logged inStack Overflow