Facebook Page plugin not loading in Vue Js - facebook

Question

I have integrated Facebook Page plugin in my Vuejs app. When I move from one component to another and return back to the component containing the Facebook Page, the page aint loading. It is loading only for the first time and every time I load the complete site. Any solution ?

Answer 1

Found the answer after some digging.
I needed to explicitly load the script every time the component was mounted.
Used this NPM package [ https://www.npmjs.com/package/vue-plugin-load-script ]
mounted() {
this.$loadScript(
"https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=***&autoLogAppEvents=1"
)
.then(() => {
this.$nextTick(() => {
window.FB.XFBML.parse();
});
})
.catch(() => {
console.log("SCRIPT LAODING ERROR");
});
}

Answer 2

You can get FB to parse with vue router like this:
mounted() {
if (typeof FB === "undefined") {
this.fbInit();
} else {
window.FB.XFBML.parse();
}
}
methods() {
fbInit() {
window.fbAsyncInit = function() {
FB.init({
appId: "11111111111",
autoLogAppEvents: true,
xfbml: true,
version: "v6.0"
});
FB.AppEvents.logPageView();
};
(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/fi_FI/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
},
}