Hide facepile if user isn't logged in or no friends are connected to site

Question

I use the Facepile pluging (iFrame) to show friends of the user who are connected to my site. However, if the user isn't logged in or has no connected friends, there is a big blank box in place of where the plugin should be.

Is there any way to hide the div/iframe in such a case? Any JS trickery I can use here?

Answer 1

you can basically use the following code. Enclose the facepile iframe in a div and by using FB.getLoginStatus call after init determine whether a user is logged in or not. If the user is not logged in then hide the div. or else by default it will show that 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

As an addition or alternative to Nikhil's very helpful answer above:

Unfortunately when you add the facepile div between other content, the above solution causes some "flickering" when hiding it, so I changed it a bit. Now the div is per default hidden and is shown when the user is logged in.

<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>