Facebook share button disappear when route changed in nuxt.js (vue.js)

Question

In my nuxt.js ("nuxt": "^2.15.7") web app I am using Facebook share button as described in this full code example.

When application loads for the first time, then facebook share button is rendered correctly. Unfortunately, when I navigate to another route and/or navigate back, then facebook share button disappears. Why this happens and how to fix it?

I have tried to implement following solutions including offered by the @Cbroe and @kissu:

Unfortunately, above offered solutions doesn't solved my problem.

What is interesting, that Vue developer tools in Chrome browser indicates, that component <FbShareButton> is present, but it doesn't show up on the page.

There is my initial code:

I have created nuxt plugin loadFacebookSdk.js to load Facebook SDK into the app, there is the code:

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

Then registered above plugin in the nuxt.config.js as following:

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

And finally created FbShareButton.vue component to load facebook SDK and render 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>

https://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically/29134477#29134477 — CBroe, Sep 27 '21 at 11:52
Does this answer your question? [How to add a 3rd party script code into Nuxt?](https://stackoverflow.com/questions/67534304/how-to-add-a-3rd-party-script-code-into-nuxt) — kissu, Sep 27 '21 at 12:21
On top of my linked comment above, you should know that `ssr: false` is deprecated and is nowadays `mode: 'client'`. Also, you need to either use it or `client.js`, not both as you can see here: https://nuxtjs.org/docs/configuration-glossary/configuration-plugins — kissu, Sep 27 '21 at 12:26
@Cbroe @kissu thanks for your useful comments. I have implemented both solutions, unfortunately problem persisted. I have slightly modified my original post to include explanation about steps I took to resolve an issue. @kissu good point about `ssr: false` beeing deprecated and either `client.js` or `mode: 'client'` should be used to prevent nuxt SSR rendering. — Mindas, Sep 27 '21 at 18:25

score 1 · Answer 1 · answered Jun 02 '23 at 12:23

If you are using NUXT3 with Typescript, here is the equivalent.

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

Thanks to Mindas for the original solution!

score 0 · Accepted Answer · answered Oct 04 '21 at 19:42

There is a solution which solved a problem.

I have created separate component FbShareButton.vue

Put all logic (including Facebook SDK loading) inside that component as per this and this posts.

Hence:

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

Facebook share button disappear when route changed in nuxt.js (vue.js)

2 Answers2