Скрыть лицевую панель, если пользователь не вошел в систему или друзья не подключены к сайту

Question

Я использую плагин Facepile (iFrame), чтобы показать друзьям пользователя, которые подключены к моему сайту. Однако, если пользователь не вошел в систему или у него нет подключенных друзей, на месте большого плагина должно быть большое пустое поле.

Есть ли способ скрыть div / iframe в таком случае? Любой трюк JS, который я могу использовать здесь?

Answer 1

вы можете в основном использовать следующий код.Заключите iframe лицевой панели в div и с помощью вызова FB.getLoginStatus после init определите, вошел пользователь в систему или нет.Если пользователь не вошел в систему, то скрыть div.или же по умолчанию будет показано, что div.

<script>
window.fbAsyncInit = function () {
    FB.init({
        appId: app-id, // App ID
        channelUrl: '//localhost:1105/channel.html', // Channel File
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML
    });

    // Additional initialization code here
    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.getElementById('fb-login').innerHTML = 'Logout';


        } else if (response.status === 'not_authorized') {
            // the user is logged in to Facebook, 
            // but has not authenticated your app
        } else {
            // the user isn't logged in to Facebook. so hide the facepile
            $('#facepileDiv').hide();
            console.log("hello");
        }
    });

  };
  </script>


   <div id="facepileDiv"> 
     <iframe src="http://www.facebook.com/plugins/facepile.php? 
        app_id=yourappidhere" scrolling="no" frameborder="0" style="border:none;  
        overflow:hidden; width:200px;" allowTransparency="true"></iframe> 
   </div>

Answer 2

В качестве дополнения или альтернативы очень полезному ответу Нихила выше:

К сожалению, когда вы добавляете div лицевой панели между другим контентом, приведенное выше решение вызывает некоторое «мерцание» при его скрытии, поэтому я немного его изменил. Теперь div по умолчанию скрыт и отображается, когда пользователь вошел в систему.

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
            appId      : '{app_id}', // App ID from the App Dashboard
            channelUrl : '//path/to/channel.html', // Channel File for x-domain communication
            status     : true, // check the login status upon init?
            cookie     : true, // set sessions cookies to allow your server to access the session?
            xfbml      : true  // parse XFBML tags on this page?
        });

        // Additional initialization code such as adding Event Listeners goes here
        FB.getLoginStatus(function (response) {
            if ((response.status === 'connected') || (response.status === 'not_authorized'))  {
                    $('#facepileDiv').show();
            }
        });
    };

    // Load the SDK's source Asynchronously
    (function(d, debug){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
        ref.parentNode.insertBefore(js, ref);
    }(document, /*debug*/ false));
</script>

<div id="facepileDiv" style="display: none">
    <iframe src="http://www.facebook.com/plugins/facepile.php?app_id={app_id}" scrolling="no" frameborder="0" style="border:none;  overflow:hidden; width:300px;height:80px;margin-top: 10px;" allowTransparency="true"></iframe>
</div>