Skip to content

Instantly share code, notes, and snippets.

@wdmtech
Created July 24, 2017 11:19
Show Gist options
  • Save wdmtech/c77ae1b30767e275240545f319871cb2 to your computer and use it in GitHub Desktop.
Save wdmtech/c77ae1b30767e275240545f319871cb2 to your computer and use it in GitHub Desktop.
Facebook SDK (Graph/REST API) integration as a Vue.js mixin
export let facebookSDK = {
mounted () {
let _this = this
this.$nextTick(() => {
window.fbAsyncInit = function () {
FB.init({
appId: 'XXX',
xfbml: true,
version: 'v2.6'
})
FB.AppEvents.logPageView()
_this.FB = FB
console.log('FB SDK was initialized as mixin')
};
(function (d, s, id) {
let 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'))
})
},
data () {
return {
FB: {}
}
}
}
@lensanag
Copy link

Thanks for the snippet 👍
Note aside for vue-cli users. Prepend FB by window. for avoid vue-clie error:

window.FB.init({
          appId: 'XXX',
          xfbml: true,
          version: 'v2.6'
        })
        window.FB.AppEvents.logPageView()
        _this.FB = window.FB

TLDR;

This is 'couse vue-clie doesn't know FB; which will be load by the script and be available globaly async later.

@LonYui
Copy link

LonYui commented Dec 1, 2021

HI @lensanag
I purpose another way. can turn off eslint check this page.

@lensanag
Copy link

lensanag commented Dec 1, 2021

@d5269357812 That could be work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment