流行的Facebook社交插件无法加载，直到浏览器刷新 [英] Meteor- Facebook social plugin cant load until browser refreshes
本文介绍了流行的Facebook社交插件无法加载，直到浏览器刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
测试网站是 www.sgeasyaidtest.meteor。 com ，社交插件位于计划页面下方。
这是FB登录&社交插件，我已经放在标签下：
< body>
{{#if currentUser}}
<！ - FB登录 - >
< script>
window.fbAsyncInit = function（）{
FB.init（{
appId：'1027408483945691'，
xfbml：true，
version：'v2.4'
}）;
};
（function（d，s，id）{
var js，fjs = d.getElementsByTagName（s）[0];
if（d.getElementById（id） {return;}
js = d.createElement（s）; js.id = id;
js.src =//connect.facebook.net/en_US/sdk.js;
fjs.parentNode.insertBefore（js，fjs）;
}（document，'script'，'facebook-jssdk'））;
< / script>
< div
class =fb-like
data-share =true
data-width =450
data-show-faces = 真 >
< / div>
< script>
//这是从FB.getLoginStatus（）的结果调用的。
function statusChangeCallback（response）{
console.log（'statusChangeCallback'）;
console.log（response）;
//返回响应对象，其状态字段允许
//应用程序知道该人的当前登录状态。
//对于FB.getLoginStatus（），可以在文档
//中找到响应对象的完整文档。
if（response.status ==='connected'）{
//登录到您的应用和Facebook。
testAPI（）;
} else if（response.status ==='not_authorized'）{
//该人登录到Facebook，但不是您的应用程序。
document.getElementById（'status'）。innerHTML ='请将'+
'记录到此应用程序中。
} else {
//该人没有登录到Facebook，所以我们不知道
//他们是否登录到这个应用程序。
document.getElementById（'status'）。innerHTML ='请将'+
'记录在Facebook中。
}
}
//当用户完成登录
// Button时，会调用此函数。请参阅下面的示例
//代码中附加的onlogin处理程序。
function checkLoginState（）{
FB.getLoginStatus（function（response）{
statusChangeCallback（response）;
}）;
}
window.fbAsyncInit = function（）{
FB.init（{
appId：'692361547558190'，
cookie：true，//启用cookies允许服务器访问
//会话
xfbml：true，//解析此页面上的社交插件
version：'v2.2'//使用版本2.2
}）;
//现在我们已经初始化了JavaScript SDK，我们调用
// FB.getLoginStatus（）。此函数获取访问此页面的
//个人的状态，并可以将三种状态之一返回给
//您提供的回调。他们可以是：
//
// 1.登录到你的应用程序（'connected'）
// 2.登录到Facebook，但不是你的应用程序（'not_authorized'）
// 3.没有登录到Facebook，不知道他们是否登录到
//你的应用程序。
//
//这三种情况在回调函数中处理。
FB.getLoginStatus（function（response）{
statusChangeCallback（response）;
}）;
};
//异步加载SDK
（function（d，s，id）{
var js，fjs = d.getElementsByTagName（s）[0];
if（d.getElementById（id））return;
js = d.createElement（s）; js.id = id;
js.src =//connect.facebook.net/en_US/ sdk.js;
fjs.parentNode.insertBefore（js，fjs）;
}（document，'script'，'facebook-jssdk'））;
//这里我们运行一个非常简单的Graph API测试，登录后是
//成功。当进行此调用时，请参阅statusChangeCallback（）。
function testAPI（）{
console.log（'Welcome！Fetching your information ....'）;
FB.api（'/ me'，function（response）{
console.log（'success login for：'+ response.name）;
document.getElementById（'status'） .innerHTML =
'感谢您登录，'+ response.name +'！';
}）;
}
< / script>
< / div>
<！ - FB'like' - >
< div id =fb-root>< / div>
< script>（function（d，s，id）{
var js，fjs = d.getElementsByTagName（s）[0];
if（d.getElementById（id） return;
js = d.createElement（s）; js.id = id;
js.src =//connect.facebook.net/en_US/sdk.js#xfbml=1&version= v2.4& appId = 1027408483945691;
fjs.parentNode.insertBefore（js，fjs）;
}（document，'script'，'facebook-jssdk'））;
< / script>
<！ - FB评论插件 - >
< div id =fb-root>< / div>
< script>（function（d，s，id）{
var js，fjs = d.getElementsByTagName（s）[0];
if（d.getElementById（id） return;
js = d.createElement（s）; js.id = id;
js.src =//connect.facebook.net/en_US/sdk.js#xfbml=1&version= v2.4& appId = 1027408483945691;
fjs.parentNode.insertBefore（js，fjs）;
}（document，'script'，'facebook-jssdk'））;
< / script>
这是我放置在页面中的代码，我想要显示社交插件。
<！ - '喜欢&分享'插件 - >
< div class =fb-likedata-href =http://www.facebook.com/sgeasyaiddata-layout =buttondata-action =likedata-show-faces =truedata-share =true>< / div>
<！ - commentplugins - >
< div class =fb-commentsdata-href =https://www.facebook.com/sgeasyaiddata-width =500data-numposts =2>< / DIV>
解决方案
不要包含脚本> 标签。 Meteor使用复杂的模板系统，由于Meteor的反应性，可能会修改DOM。
因此，您应该将外部脚本放在模板事件中，例如 Template.myTemplate.onRendered 函数。不过，建议您使用 biasport：facebook-sdk ，它包装了Facebook SDK。
您可以在Meteor应用程序中包含社交插件，如下所示：
- 运行
meteor add biasport：facebook-sdk安装上述包。 - 初始化SDK：
if（Meteor.isClient ）{
window.fbAsyncInit = function（）{
FB.init（{
appId：'your-app-id'，//指定您的应用程序ID
status： true，
xfbml：true，
version：'v2.1'//在这里指定你的版本
}）;
};
}
- 包含所需的社交例如：
< template name =facebookLikeButton>
< div class =fb-likedata-href =http://www.facebook.com/sgeasyaiddata-layout =standarddata-action =like
data -show-faces =truedata-share =true>< / div>
< / template>
您还可以使用内置模板助手用于社交插件。
i'm having an issue with Facebook social plugins. The like & comment box in my website only appears after refreshing the browser. Does anyone know why is this happening and how i can fix it? I'm using Meteor to build my website and the page, where the social plugins are placed, are only accessible after the user is logged in. Thank you very much! :)
The test website is www.sgeasyaidtest.meteor.com and the social plugins are under the planner page.
This is the script for FB login & social plugins that i've placed under the tag:
<body>
{{#if currentUser}}
<!--FB login-->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1027408483945691',
xfbml : true,
version : 'v2.4'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '692361547558190',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.2' // use version 2.2
});
// Now that we've initialized the JavaScript SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
</div>
<!--FB 'like' -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=1027408483945691";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- FB comment plugins -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=1027408483945691";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
This is the code that i've placed inside the page that i want the social plugins to appear.
<!-- 'like & share' plugin -->
<div class="fb-like" data-href="http://www.facebook.com/sgeasyaid" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
<!-- "comment" plugins -->
<div class="fb-comments" data-href="https://www.facebook.com/sgeasyaid" data-width="500" data-numposts="2"></div>
解决方案
Do not include <script> tags in your HTML body. Meteor uses a sophisticated templating system, which may modify the DOM, owing to Meteor's reactivity.
As a result, you should put external scripts in template events, for instance the Template.myTemplate.onRendered function. However, I recommend you to use biasport:facebook-sdk, which packages the Facebook SDK.
You can include social plugins in your Meteor application as follows:
- Run
meteor add biasport:facebook-sdkto install the mentioned package. - Initialise the SDK:
if(Meteor.isClient) {
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id', // Specify your app id here
status: true,
xfbml: true,
version: 'v2.1' // Specify your version here
});
};
}
- Include the desired social plugins in your Meteor templates, for example:
<template name="facebookLikeButton">
<div class="fb-like" data-href="http://www.facebook.com/sgeasyaid" data-layout="standard" data-action="like"
data-show-faces="true" data-share="true"></div>
</template>
You can also use the built-in template helpers for social plugins.
这篇关于流行的Facebook社交插件无法加载，直到浏览器刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
