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

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

ただいまの
回答率

88.58%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 393

chibi144

score 64

 前提・実現したいこと

Vue.jsでWEBサイトを作成中です。

Facebookと連携して、シェアボタンの設置と特定記事の表示をしたいと思っています。
シェアボタンはグローバルに設置、特定記事の表示は一部のページのみに実装したいと考えています。

イメージ説明

シェアボタン、記事の表示とも出来てはいるのですが、
記事の表示が非常に不安定で、出たり出なかったりします。

シェアボタンを有しているページ(例:/)から記事のページ(例:/sample)に入ると高確率で記事が表示されません。
具体的には、本来であれば.fb-post以下に記事の内容が埋め込まれると思うのですが、
そこに何も埋め込まれていない状態になります。
キャッシュを消して再読込、あるいは/sampleに直接入ってくると、高確率で表示されます。

表示を安定させたいのですが、どうすればいいのかわかりません。

 該当のソースコード

シェアボタン側のコード
/、/sampleのどちらでも呼び出しています。

<template>
  <a @click="share()" class="FacebookButton">
    <span class="icon">
      <i class="mdi mdi-facebook mdi-18px"/>
    </span>
  </a>
</template>

<script>
export default {
  name: 'shareButton',
  computed: {
    url () {
      return location.href
    }
  },
  methods: {
    share () {
      FB.ui({
        method: 'share',
        display: 'popup',
        href: this.url,
      }, function(response){})
    }
  },
  mounted () {
    window.fbAsyncInit = function() {
      FB.init({
        appId            : '自分のアプリID',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.2'
      });
    };

    (function(d, s, id){
       var js
       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"
       fjs.parentNode.insertBefore(js, fjs)
     }(document, 'script', 'facebook-jssdk'))
  }
}
</script>

/sample側のコード

<template>
  <div v-for="(post, index) in posts" :key="index" class="column">
    <div class="border">
      <div class="fb-post" :data-href="post"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sample',
  data: () => ({
    posts: [
      'https://www.facebook.com/kakudai.jp/posts/1920731641355178',
      'https://www.facebook.com/kakudai.jp/posts/1921580701270272'
    ]
  })
}
</script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • ryoju

    2018/12/06 22:09 編集

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

    キャンセル

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

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

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る