前提・実現したいこと
Vue.jsでWEBサイトを作成中です。
Facebookと連携して、シェアボタンの設置と特定記事の表示をしたいと思っています。
シェアボタンはグローバルに設置、特定記事の表示は一部のページのみに実装したいと考えています。
シェアボタン、記事の表示とも出来てはいるのですが、
記事の表示が非常に不安定で、出たり出なかったりします。
シェアボタンを有しているページ(例:/)から記事のページ(例:/sample)に入ると高確率で記事が表示されません。
具体的には、本来であれば.fb-post以下に記事の内容が埋め込まれると思うのですが、
そこに何も埋め込まれていない状態になります。
キャッシュを消して再読込、あるいは/sampleに直接入ってくると、高確率で表示されます。
表示を安定させたいのですが、どうすればいいのかわかりません。
該当のソースコード
シェアボタン側のコード
/、/sampleのどちらでも呼び出しています。
vue
1<template> 2 <a @click="share()" class="FacebookButton"> 3 <span class="icon"> 4 <i class="mdi mdi-facebook mdi-18px"/> 5 </span> 6 </a> 7</template> 8 9<script> 10export default { 11 name: 'shareButton', 12 computed: { 13 url () { 14 return location.href 15 } 16 }, 17 methods: { 18 share () { 19 FB.ui({ 20 method: 'share', 21 display: 'popup', 22 href: this.url, 23 }, function(response){}) 24 } 25 }, 26 mounted () { 27 window.fbAsyncInit = function() { 28 FB.init({ 29 appId : '自分のアプリID', 30 autoLogAppEvents : true, 31 xfbml : true, 32 version : 'v3.2' 33 }); 34 }; 35 36 (function(d, s, id){ 37 var js 38 var fjs = d.getElementsByTagName(s)[0] 39 if (d.getElementById(id)) {return} 40 js = d.createElement(s) 41 js.id = id 42 js.src = "https://connect.facebook.net/en_US/sdk.js" 43 fjs.parentNode.insertBefore(js, fjs) 44 }(document, 'script', 'facebook-jssdk')) 45 } 46} 47</script>
/sample側のコード
vue
1<template> 2 <div v-for="(post, index) in posts" :key="index" class="column"> 3 <div class="border"> 4 <div class="fb-post" :data-href="post"/> 5 </div> 6 </div> 7</template> 8 9<script> 10export default { 11 name: 'sample', 12 data: () => ({ 13 posts: [ 14 'https://www.facebook.com/kakudai.jp/posts/1920731641355178', 15 'https://www.facebook.com/kakudai.jp/posts/1921580701270272' 16 ] 17 }) 18} 19</script>
あなたの回答
tips
プレビュー