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>