问题
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>
回答1:
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.
来源：https://stackoverflow.com/questions/31781288/meteor-facebook-social-plugin-cant-load-until-browser-refreshes