javascript nuxt.js(vue.js)中路由改变时Facebook分享按钮消失

eoxn13cs 于 2023-06-04 发布在 Java

关注(0)|答案(2)|浏览(202)

在我的nuxt.js（“nuxt”：“^2.15.7”）Web应用程序我正在使用Facebook共享按钮，如此完整代码示例中所述。
当应用程序第一次加载时，facebook的分享按钮会正确呈现。不幸的是，当我导航到另一条路线和/或导航回来，然后Facebook的分享按钮消失了。为什么会发生这种情况，以及如何解决？
我尝试实现以下解决方案，包括@Cbroe和@kissu提供的解决方案：

Facebook share button dissapear after updatePanel
How to add a 3rd party script code into Nuxt
Facebook社交插件在动态添加时不显示
不幸的是，上面提供的解决方案并没有解决我的问题。

有趣的是，Chrome浏览器中的Vue开发人员工具显示，组件<FbShareButton>存在，但它不会显示在页面上。
有我的初始代码：

我已经创建了nuxt插件loadFacebookSdk.js来将Facebook SDK加载到应用程序中，下面是代码：

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)
}

然后在nuxt.config.js中注册上述插件，如下所示：

plugins: [
    { src: "~/plugins/loadFacebookSdk.js", mode: 'client' }
  ]

最后创建了FbShareButton.vue组件来加载facebook SDK并渲染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>

JavaScript

来源：https://stackoverflow.com/questions/69345590/facebook-share-button-disappear-when-route-changed-in-nuxt-js-vue-js

2条答案

按热度按时间

ryevplcw1#

如果你使用NUXT 3和Typescript，这里是等价的。

<template>
  <div id="1">
    <div id="fb-root"></div>
    <div
      class="fb-share-button"
      :data-href="articleUrl"
      data-layout="button"
      data-size="small"
    ></div>
  </div>
</template>

<script lang='ts' setup>
const props = defineProps({
  articleUrl: String,
  articleTitle: String,
  articleImage: String,
  articleDescription: String,
});

useHead({
  meta: [
    { property: "og:url", content: props.articleUrl },
    { property: "og:type", content: "website" },
    { property: "og:title", content: props.articleTitle },
    { property: "og:description", content: props.articleDescription },
    { property: "og:image", content: props.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,
      onload: () => {
        (window as any).FB.XFBML.parse();
      },
    },
  ],
});
</script>

感谢Mindas提供的原始解决方案！

赞(0）回复(0）举报 2023-06-04

4xy9mtcn2#

有一个解决方案解决了一个问题。
我创建了单独的组件FbShareButton.vue
按照this和这篇文章，将所有逻辑（包括Facebook SDK加载）放在该组件中。
因此：

<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>

赞(0）回复(0）举报 2023-06-04

我来回答

javascript nuxt.js(vue.js)中路由改变时Facebook分享按钮消失

2条答案

相关问题

热门标签

最新问答