在我的 nuxt.js ("nuxt": "^2.15.7") 網路應用程式中，我使用 Facebook 共享按鈕，如本完整代碼示例中所述。
當應用程式第一次加載時，facebook 分享按鈕會正確呈現。不幸的是，當我導航到另一條路線和/或導航回來時，facebook 分享按鈕消失了。為什么會發生這種情況以及如何解決？
我嘗試實施以下解決方案，包括@Cbroe 和 @kissu 提供的解決方案：
- 更新面板后 Facebook 分享按鈕消失
- 如何在 Nuxt 中添加第 3 方腳本代碼
- 動態添加時 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>
uj5u.com熱心網友回復：
有一個解決方案解決了一個問題。
我創建了單獨的組件 FbShareButton.vue
根據this和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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/326191.html
標籤：javascript Facebook Vue.js nuxt.js facebook-javascript-sdk
下一篇：在GoogleAppEngine上從GoogleCloudStorageforRubyonRails應用程式加載影像