Vuejs component wait for facebook sdk to load

Question

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>

Move the code into your vuejs app. Otherwise use some eventing to notify your app that fb is ready. — vbranden, Aug 15 '16 at 13:37

score 17 · Accepted Answer · answered Sep 17 '16 at 12:03

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>

I tried your solution, but it only calls FB.getLoginStatus when you create the component, after that it doesn't recognize if you are trying to log in. — mejiamanuel57, Aug 28 '18 at 01:59

ChaoTangChang · Answer 2 · 2019-01-23T06:46:29.777

This problem can be solve by creating a vuejs plugin.

Please check the related answer in nuxt.js.

create a plugin plugins/fb-sdk.js

const vue_fb = {}
vue_fb.install = function install(Vue, options) {
    (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)
        console.log('setting fb sdk')
    }(document, 'script', 'facebook-jssdk'))

    window.fbAsyncInit = function onSDKInit() {
        FB.init(options)
        FB.AppEvents.logPageView()
        Vue.FB = FB
        window.dispatchEvent(new Event('fb-sdk-ready'))
    }
    Vue.FB = undefined
}

import Vue from 'vue'

Vue.use(vue_fb, {
    appId: 'your-app-id',
    autoLogAppEvents: true,
    xfbml: true,
    version: 'v2.9'
})

it throws FB not defined error for me, so i used window.FB - https://stackoverflow.com/a/45297636/3928560 — MartinP, Mar 28 '20 at 17:18

Vuejs component wait for facebook sdk to load

2 Answers2

Linked