Ocultar facepile si el usuario no está conectado o no hay amigos conectados al sitio

Question

Uso el plugin Facepile (iFrame) para mostrar a los amigos del usuario que están conectados a mi sitio. Sin embargo, si el usuario no ha iniciado sesión o no tiene amigos conectados, hay un gran cuadro en blanco en lugar de donde debe estar el complemento.

¿Hay alguna manera de ocultar el div/iframe en tal caso? ¿Algún truco de JS que pueda usar aquí?

Answer 1

básicamente puede utilizar el siguiente código. Adjunte el iframe facepile en un div y utilizando FB.getLoginStatus llamada después de init para determinar si un usuario está conectado o no. Si el usuario no está conectado, oculte el div. O bien, de forma predeterminada, mostrará ese 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

Como complemento o alternativa a la respuesta muy útil de Nikhil arriba:

Desafortunadamente cuando se agrega el div Facepile entre otros contenidos, la solución anterior hace que algunos "parpadeo" cuando ocultarlo, así que lo cambié un poco. Ahora el div está por defecto oculto y se muestra cuando el usuario está conectado.

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