En mi aplicación web nuxt.js ("nuxt": "^2.15.7"), estoy usando el botón Compartir de Facebook como se describe en este ejemplo de código completo .
Cuando la aplicación se carga por primera vez, el botón de compartir de Facebook se muestra correctamente. Desafortunadamente, cuando navego a otra ruta y/o navego hacia atrás, el botón de compartir de Facebook desaparece. ¿Por qué sucede esto y cómo solucionarlo?
He intentado implementar las siguientes soluciones, incluidas las ofrecidas por @Cbroe y @kissu:
Desafortunadamente, las soluciones ofrecidas anteriormente no resolvieron mi problema.
Lo interesante es que las herramientas de desarrollo de Vue en el navegador Chrome indican que el componente <FbShareButton> está presente, pero no aparece en la página.
Ahí está mi código inicial:
Creé el complemento nuxt loadFacebookSdk.js para cargar el SDK de Facebook en la aplicación, ahí está el código:
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) }Luego registre el complemento anterior en nuxt.config.js de la siguiente manera:
plugins: [ { src: "~/plugins/loadFacebookSdk.js", mode: 'client' } ]Y finalmente creó el componente FbShareButton.vue para cargar el SDK de Facebook y mostrar el botón Compartir de Facebook:
<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>Hay una solución que resolvió un problema.
He creado un componente separado FbShareButton.vue
Coloque toda la lógica (incluida la carga del SDK de Facebook) dentro de ese componente segúnesta y esta publicación.
Por eso:
<template> <div id="1"> <div id="fb-root"></div> <div class="fb-share-button" :data-href="this.articleUrl" data-layout="button" data-size="small" > </div> </div> </template> <script> export default { props: ['articleUrl', 'articleTitle', 'articleImage', 'articleDescription'], head () { return { meta: [ { property: "og:url", content: this.articleUrl }, { property: "og:type", content: "website" }, { property: "og:title", content: this.articleTitle }, { property: "og:description", content: this.articleDescription }, { property: "og:image", content: this.articleImage }, { property:"fb:app_id", content:"YOUR_FB_APP_ID" } ], script: [ { hid: 'fb', src: 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0', defer: true, // changed after script load callback: () => { FB.XFBML.parse() } } ] } } } </script>