यदि उपयोगकर्ता लॉग इन नहीं है या कोई मित्र साइट से कनेक्ट नहीं है

Question

मैं फेसपाइल प्लगिंग (iFrame) का उपयोग अपनी साइट से जुड़े उपयोगकर्ता के दोस्तों को दिखाने के लिए करता हूं। हालांकि, यदि उपयोगकर्ता लॉग इन नहीं है या कोई कनेक्टेड मित्र नहीं है, तो प्लगइन कहां होना चाहिए, वहां एक बड़ा खाली बॉक्स है।

क्या इस तरह के मामले में div/iframe को छिपाने का कोई तरीका है? कोई जेएस ट्रिकरी मैं यहां उपयोग कर सकता हूं?

Answer 1

आप मूल रूप से निम्न कोड का उपयोग कर सकते हैं। एक div में facepile iframe संलग्न करें और FB.getLoginStatus कॉल का उपयोग करके यह निर्धारित करें कि कोई उपयोगकर्ता लॉग इन है या नहीं। यदि उपयोगकर्ता लॉग इन नहीं है तो div को छुपाएं। या फिर डिफ़ॉल्ट रूप से यह 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

एक अतिरिक्त या इसके बाद निखिल का बहुत ही उपयोगी जवाब देने के लिए विकल्प के रूप में:

दुर्भाग्य से जब आप अन्य सामग्री के बीच facepile div जोड़ने के लिए, ऊपर समाधान का कारण बनता है कुछ "झिलमिलाते" जब यह छिपा है, इसलिए मैं इसे बदल एक सा। अब div प्रति डिफ़ॉल्ट छिपा हुआ है और जब उपयोगकर्ता लॉग इन होता है तो दिखाया जाता है।

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