Ukryj facepile, jeśli użytkownik nie jest zalogowany lub znajomi nie są połączeni z witryną

Question

Używam Facepile pluging (iFrame), aby pokazać znajomym użytkownika, którzy są połączeni z moją witryną. Jeśli jednak użytkownik nie jest zalogowany lub nie ma podłączonych znajomych, w miejscu, w którym powinna być wtyczka, znajduje się duże puste pole.

Czy istnieje sposób na ukrycie elementu div/iframe w takim przypadku? Jakieś sztuczki JS, których mogę użyć tutaj?

Answer 1

można zasadniczo użyć następującego kodu. Umieść element pływający w elemencie div i używając wywołania FB.getLoginStatus po init, określ, czy użytkownik jest zalogowany, czy nie. Jeśli użytkownik nie jest zalogowany, ukryj element div. lub domyślnie pokaże to 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

Jako dodatek lub alternatywę dla bardzo pomocne odpowiedzi Nikhil jest powyżej:

Niestety kiedy dodać div facepile między innej zawartości, powyższe rozwiązanie powoduje pewne „migotanie” gdy ukrywanie go, więc zmieniłem ją trochę. Teraz element div jest domyślnie ukryty i jest wyświetlany, gdy użytkownik jest zalogowany.

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