Within my nuxt.js web app, utilizing version 2.15.7, I have integrated a Facebook share button by following the instructions outlined in this comprehensive code example.
Upon initial load of the application, the Facebook share button appears as expected. However, upon navigating to another route and subsequently returning, the button mysteriously vanishes. What could be causing this issue and how can it be resolved?
I've experimented with various solutions provided by individuals such as @Cbroe and @kissu:
- Facebook share button disappear after updatePanel
- How to add a 3rd party script code into Nuxt
- Facebook social plug-in not showing up when added dynamically
Regrettably, none of the aforementioned approaches have successfully resolved the issue at hand.
Interestingly, Chrome's Vue developer tools indicate that the component <FbShareButton> is present, yet it remains invisible on the page.
The original code snippet is presented below:
To incorporate the Facebook SDK into the application, I crafted a nuxt plugin named loadFacebookSdk.js which contains the following code snippet:
Vue.prototype.$loadFacebookSDK = async (d, s, id) => {
var js = d.getElementsByTagName(s)[0]
var fjs = d.getElementsByTagName(s)[0]
if (d.getElementById(id)) {
return
}
js = d.createElement(s)
js.id = id
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0"
fjs.parentNode.insertBefore(js, fjs)
}
Subsequently, the above plugin was registered within the nuxt.config.js file as demonstrated below:
plugins: [
{ src: "~/plugins/loadFacebookSdk.js", mode: 'client' }
]
Finally, a FbShareButton.vue component was developed to handle the loading of the facebook SDK and render the facebook share button:
<template>
<div>
<div id="fb-root"></div>
<div class="fb-share-button"
data-href="https://developers.facebook.com/docs/plugins/"
data-layout="button"
data-size="small"
>
</div>
</div>
</template>
<script>
export default {
async created () {
if (process.client) {
await this.$loadFacebookSDK(document, 'script', 'facebook-jssdk')
}
}
}
</script>