Ẩn facepile nếu người dùng chưa đăng nhập hoặc không có bạn bè nào được kết nối với trang web

Question

Tôi sử dụng tính năng Cắm Facepile (iFrame) để hiển thị cho bạn bè của người dùng được kết nối với trang web của tôi. Tuy nhiên, nếu người dùng không đăng nhập hoặc không có bạn bè được kết nối, có một hộp trống lớn thay cho vị trí của plugin.

Có cách nào để ẩn div/iframe trong trường hợp này không? Bất kỳ thủ thuật JS nào tôi có thể sử dụng ở đây?

Answer 1

về cơ bản bạn có thể sử dụng mã sau đây. Kèm theo iframe facepile trong div và bằng cách sử dụng cuộc gọi FB.getLoginStatus sau init xác định xem người dùng có đăng nhập hay không. Nếu người dùng không đăng nhập thì ẩn div. hoặc theo mặc định nó sẽ hiển thị 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

Như một sự bổ sung hoặc thay thế cho câu trả lời rất hữu ích Nikhil của trên:

Thật không may khi bạn thêm div facepile giữa nội dung khác, giải pháp trên gây ra một số "nhấp nháy" khi che giấu nó, vì vậy tôi đã thay đổi nó một chút. Bây giờ, div được ẩn theo mặc định và được hiển thị khi người dùng đăng nhập.

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