有没有办法检测Facebook Javascript SDK是否成功加载？ [英] Is there a way to detect if the Facebook Javascript SDK loaded successfully?

问题描述

我使用Facebook作为我网站的会员系统。它使用代码生成登录控件，允许用户通过他们的Facebook帐户登录。它基本上是一个点击，如果他们已经是一个成员，2如果不是（授予权限）。

我有一个问题，但反馈意见建议登录按钮并不总是正确加载。而不是加载Facebook登录控件，它只是说（在文本中）通过Facebook登录 - 这是登录按钮会说如果控件加载成功。

测试显示当facebook javascript SDK无法完全加载（无论什么原因））会发生什么。我已经看到一些url中的＃阻止加载SDK的实例。

为了更好地支持这个问题，我将如何检测是否加载了facebook javascript SDK准备好了吗这样，如果失败，我可以为用户留下一些注释。

以下是当前添加到页面的方式：

 < script> 
 window.fbAsyncInit = function（）{
 FB.init（{
 appId：'***************'，
 status ：true，
 cookie：true，
 xfbml：true 
}）; 
 FB.Event.subscribe（'auth.login'，function（response）{
 window.location.reload（）; 
}）; 
 
}; 
（function（）{
 var e = document.createElement（'script'）; e.async = true; 
 e.src = document.location.protocol +'// connect。 facebook.net/en_US/all.js'; 
 document.getElementById（'fb-root'）。appendChild（e）; 
}（））; 
 
< / script> 
  

解决方案

你应该加载的示例：

  $ loginUrl = $ facebook-> getLoginUrl（）; 
 ... 
 ... 
< a href =<？php echo $ loginUrl;？>> 
< img src =http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif> 
< / a> 
  

I use Facebook as the membership system of my website. It uses the code to generate a login control, allowing users to login via their facebook account. It's essentially one click if they're already a member, 2 if they're not (for granting permissions).

I got a problem though... feedback is suggesting the login button isn't always loading correctly. Instead of loading the facebook login control, it simply states (in text) "login via facebook" - which is what the login button would say if the control loaded successfully.

Testing shows that is what happens when the facebook javascript SDK fails to load completely (for whatever reason). I've seen instances where a # in the url prevents the SDK from loading.

To better support this issue, how would I go about detecting if the facebook javascript SDK loaded, and is ready? That way, if it fails, I can leave some sort of note for the user.

Here's how it's currently added to the page:

<script>
window.fbAsyncInit = function () {
FB.init({
  appId: '***************',
  status: true,
  cookie: true,
  xfbml: true
});
FB.Event.subscribe('auth.login', function (response) {
  window.location.reload();
});

};
(function () {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
} ());

</script>

解决方案

You should load the Javascript Library Asynchronously and put all your FB related functions inside the window.fbAsyncInit method:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/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
  };

  // Load the SDK Asynchronously
  (function(d){
     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.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

This code loads the SDK asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots.

The URLs in the above code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings.

The function assigned to window.fbAsyncInit is run as soon as the SDK is loaded. Any code that you want to run after the SDK is loaded should be placed within this function and after the call to FB.init. For example, this is where you would test the logged in status of the user or subscribe to any Facebook events in which your application is interested.

A quick example is the following:

<div id="fb-root"></div>
<script>
  var isLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/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
    });
    isLoaded = true;

    // Additional initialization code here
  };

  function checkIfLoaded() {
    if(isLoaded) console.log("LOADED!");
    else console.log("NOT YET!");

    return false;
  }

  // Load the SDK Asynchronously
  (function(d){
     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.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>
<a href="#" onclick="checkIfLoaded();">Check</a>

(Just clicked the check link a couple of times)

---

Please note that you can still construct the Login Link server-side and WITHOUT JavaScript. Example using the PHP-SDK:

$loginUrl = $facebook->getLoginUrl();
...
...
<a href="<?php echo $loginUrl; ?>">
    <img src="http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif">
</a>

这篇关于有没有办法检测Facebook Javascript SDK是否成功加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！