发表新帖
发表新帖

Vuejs component wait for facebook sdk to load

前端 未结
关注
2 452
情歌与酒
情歌与酒 2020-12-14 23:07

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
相关标签:
2条回答
  • 青春惊慌失措
    2020-12-14 23:44

    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>
    0 讨论(0)
  • 北海茫月
    2020-12-14 23:49

    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'
})
    0 讨论(0)
 看不清?
提交回复
热议问题