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>