Nascondere il facepile se l'utente non ha effettuato l'accesso o nessun amico è collegato al sito

Question

Uso il plug-in Facepile (iFrame) per mostrare gli amici dell'utente che sono connessi al mio sito. Tuttavia, se l'utente non ha effettuato l'accesso o non ha amici connessi, c'è una grande casella vuota al posto di dove dovrebbe essere il plugin.

C'è un modo per nascondere il div/iframe in questo caso? Qualche trucco JS posso usare qui?

Answer 1

si può fondamentalmente utilizzare il seguente codice. Racchiudere l'iframe del face-face in un div e usando la chiamata FB.getLoginStatus dopo init determinare se un utente è loggato o meno. Se l'utente non ha effettuato l'accesso, nasconde il div. altrimenti per impostazione predefinita mostrerà che 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

In aggiunta o alternativa alla risposta molto utile di Nikhil sopra:

Purtroppo quando si aggiunge il div facepile tra gli altri contenuti, la soluzione di cui sopra fa sì che alcuni "sfarfallio" quando nasconderlo, quindi l'ho cambiato un po. Ora il div è per default nascosto e viene mostrato quando l'utente ha effettuato il login.

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