facebook - ユーザーがログインしていない場合、またはサイトに接続している友人がいない場合は、facepile を非表示にします

Question

Facepile プラグイン (iFrame) を使用して、自分のサイトに接続しているユーザーの友達を表示します。ただし、ユーザーがログインしていない場合、または接続している友達がいない場合は、プラグインがあるべき場所に大きな空白のボックスが表示されます.

このような場合、div/iframe を非表示にする方法はありますか? ここで使用できる JS トリックはありますか?

Answer 1

基本的に次のコードを使用できます。facepile iframe を div で囲み、init の後に FB.getLoginStatus 呼び出しを使用して、ユーザーがログインしているかどうかを判断します。ユーザーがログインしていない場合は、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

上記のNikhilの非常に役立つ回答への追加または代替として：

残念ながら、他のコンテンツの間にfacepile 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>