Menu
I have a component that show a login button or username of the user from facebook. depends if he is logged in or not.
Now in this component I use the
created
event so I'll check the login immidiatly. code in created in a brief:
FB.getLoginStatus(function(response) {
//more things.....
the error is that it says that FB is not defined, and sure he is right, FB is not loaded yet.
I load facebook like this
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1111111111',
xfbml : true,
version : 'v2.7'
});
};
(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>
809
I was searching forever for a answer to this.
Thanx to vbranden's comment I was able to get it working for me.
What you have to do is initialise the facebook sdk in the created method. Then call the login from inside the fbAsyncInit function.
Here's what worked for me:
<body>
<div id="test"></div>
<script>
new Vue({
el: '#test',
created: function() {
console.log('created main');
window.fbAsyncInit = function() {
FB.init({
appId : '1111111111',
xfbml : true,
version : 'v2.7'
});
//This function should be here, inside window.fbAsyncInit
FB.getLoginStatus(function(response) {
console.log(response);
});
};
(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>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
