[Facebook] Facebook FB.init 登入後跳出空白視窗與 FB.XD.resolveRelation 錯誤的解決方法

Standard

日前在製作 Facebook 專案時,是採用聯外通登入後發佈塗鴉牆的模式,但發現在登入後時常會多跳一個空白視窗(blank window),並包含一個 JavaScript 錯誤:

訊息: ‘FB.XD.resolveRelation(…).FB’ 是 null 或不是一個物件
行: 16
字元: 2193
程式碼: 0
URI: http://connect.facebook.net/zh_TW/all.js
後發現是 FB.init 的寫法有誤,請參照官方文件
我原先的寫法是這樣的:

[code language=”html”]
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: ‘FB APP 的 ID’, status: true, cookie: true, xfbml: false});
};

(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol + ‘//connect.facebook.net/zh_TW/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
[/code]

但依照 官方文件 說明,請依照 Custom Channel URL 的這段修改成:

[code language=”html”]
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : ‘YOUR_APP_ID’, // App ID from the App Dashboard
channelUrl : ‘//WWW.YOUR_DOMAIN.COM/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

};

// Load the SDK’s source Asynchronously
// Note that the debug version is being actively developed and might
// contain some type checks that are overly strict.
// Please report such bugs using the bugs tool.
(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>
[/code]

並請新建一 channel.html 檔案,內容為:

[code language=”html”]
<script src="//connect.facebook.net/zh_TW/all.js"></script>
[/code]

這會對應到上面 channelUrl 所指定的位置,這是為了避免某些瀏覽器上 cross domain 的問題。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *