如果用户未登录或没有朋友连接到站点,则隐藏facepile

Question

我使用Facepile pluging(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>