javascript - Meteor- Facebook social plugin cant load until browser refreshes -
i'm having issue facebook social plugins. & comment box in website appears after refreshing browser. know why happening , how can fix it? i'm using meteor build website , page, social plugins placed, accessible after user logged in. thank much! :)
the test website www.sgeasyaidtest.meteor.com , social plugins under planner page.
this script fb login & social plugins i've placed under 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> // called results from fb.getloginstatus(). function statuschangecallback(response) { console.log('statuschangecallback'); console.log(response); // response object returned status field lets // app know current login status of person. // full docs on response object can found in documentation // fb.getloginstatus(). if (response.status === 'connected') { // logged app , facebook. testapi(); } else if (response.status === 'not_authorized') { // person logged facebook, not app. document.getelementbyid('status').innerhtml = 'please log ' + 'into app.'; } else { // person not logged facebook, we're not sure if // logged app or not. document.getelementbyid('status').innerhtml = 'please log ' + 'into facebook.'; } } // function called when finishes login // button. see onlogin handler attached in sample // code below. function checkloginstate() { fb.getloginstatus(function(response) { statuschangecallback(response); }); } window.fbasyncinit = function() { fb.init({ appid : '692361547558190', cookie : true, // enable cookies allow server access // session xfbml : true, // parse social plugins on page version : 'v2.2' // use version 2.2 }); // we've initialized javascript sdk, call // fb.getloginstatus(). function gets state of // person visiting page , can return 1 of 3 states // callback provide. can be: // // 1. logged app ('connected') // 2. logged facebook, not app ('not_authorized') // 3. not logged facebook , can't tell if logged // app or not. // // these 3 cases handled in callback function. fb.getloginstatus(function(response) { statuschangecallback(response); }); }; // load 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 run simple test of graph api after login // successful. see statuschangecallback() when call made. function testapi() { console.log('welcome! fetching information.... '); fb.api('/me', function(response) { console.log('successful login for: ' + response.name); document.getelementbyid('status').innerhtml = 'thanks 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 code i've placed inside page want social plugins 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 html body. meteor uses sophisticated templating system, may modify dom, owing meteor's reactivity.
as result, should put external scripts in template events, instance template.mytemplate.onrendered function. however, recommend use biasport:facebook-sdk, packages facebook sdk.
you can include social plugins in meteor application follows:
- run
meteor add biasport:facebook-sdkinstall mentioned package. - initialise sdk:
if(meteor.isclient) { window.fbasyncinit = function() { fb.init({ appid: 'your-app-id', // specify app id here status: true, xfbml: true, version: 'v2.1' // specify version here }); }; } - include desired social plugins in meteor templates, 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 use built-in template helpers social plugins.
Comments
Post a Comment