質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

912閲覧

Vue.jsでFacebook記事の表示を安定させたい

chibi144

総合スコア64

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/11/22 04:09

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/12/06 13:10 編集

お力になりたいのですが、現状の「/sample側のコード」の状態では、確実に記事の内容は埋め込まれません。安定はしないが表示はされているとのことなので「/sample側のコード」には記事表示に関するコードが存在すると思います。コードの全体像を記述いただくことは可能でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問