Meteorを使用して完全なクライアントサイドアプリを構築する場合は、FacebookJavaScriptSDKを使用することは悪い考えではありません...
Alex Cの回答は一見機能しますが、「ナビゲート」して定義されFB.logout()
た「ページ」に戻ると、再レンダリングされるとFB.logout()が機能しなくなるため、問題が発生しました。<div id="fb-root"></div>
fb-root
したがって、Facebook JavaScript SDKをロードする最良の方法は、テンプレートで作成されたコールバックを使用することだと思います。
Template.fbLogin.created = function () {
if (!Session.get("is Facebook JDK loaded?")) {
Session.set("is Facebook JDK loaded?", true);
// https://developers.facebook.com/docs/reference/javascript/
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '[YOUR_APP_ID]', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// 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));
}
};
FB.logout()
また、正しく機能するために実行する必要がある他のことは、一定のテンプレートヘルパーを使用すること<div id="fb-root"></div>
です。したがって、コードは次のようになります。
<body>
{{#constant}}
<div id="fb-root"></div>
{{/constant}}
<!-- rest of body... -->
fb-root
また、体の直後に置く必要があることもわかりました。
http://evee.meteor.comにこのようなコードを実行しているライブアプリがあり
ます。そのソースコードはhttps://github.com/fjsj/evee/にあります
(アプリについてはfbLogin.jsを確認してください) 。 html for and )created
constant
fb-root
ボーナス(Meteorでchannel.htmlファイルを提供する方法)
2013年1月の時点で、Meteorは静的HTMLを提供するサーバー側ルートをサポートしていません。では、Meteorでchannel.htmlを作成する方法は?.htmlファイルはMeteorによってテンプレートとして処理されるため、/publicに配置しても機能しません。
Meteorの内部を使用することで、それが可能になります。この回答で示唆されているように、ミドルウェアのようなアプローチ(Connectを利用)を使用する必要があります。これを/serverに配置するだけです(yourapp.meteor.com/fb/channel.htmlで提供されることに注意してください)。
// serve channel.html file
var connect = __meteor_bootstrap__.require("connect");
__meteor_bootstrap__.app
.use(connect.query())
.use(function(req, res, next) {
// Need to create a Fiber since we're using synchronous http
// calls and nothing else is wrapping this in a fiber
// automatically
Fiber(function () {
if (req.url === "/fb/channel.html") {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('<script src="//connect.facebook.net/en_US/all.js"></script>');
} else {
// not an channel.html request. pass to next middleware.
next();
return;
}
}).run();
});
また、これは本番環境で機能しており、コードはGitHub(キャッシュヘッダーを含む)で入手できます。