Facebookグループページをお知らせ一覧っぽく使う！｜ProgLearn｜エンジニアのためのプログラミング情報メディア

皆様、こんにちは。どんぶラッコです。

今日は、「お知らせページをfacebookページと連携させる」というテーマで記事を書きます！

具体的に言うとこんな感じです。以前作ったピアノ教室のトップページです。

一見するとお知らせページのように見えますが、実はこれ Facebookの教室グループに投稿された投稿一覧を引っ張ってきています。

今日はそのやり方についてまとめていきたいと思います！

どんぶラッコ

既に引っ張ってきたいFacebookグループを作成済みという前提で話を進めていきます！

グランくん

あと、今回はトークンの発行するにあたり、ご自身のFacebookアカウントと連携させる必要があります。なのでお仕事として他社のサイトに適用させるのは控えた方がいいと思います。

1. 長期トークンを取得する

まずはFacebookの長期アクセストークンを取得する必要があります。トークンの取得方法については、以下の記事がとても参考になりました。

どんぶラッコ

FacebookのAPI仕様はよく変わるらしいので、この方法がいつ使えなくなるか分かりませんが…
2021年1月時点では上記手順で問題なくワークしています。

Get通信を実施して記事一覧を取得する

トークンが無事に発行されたら、getapiを叩いて記事一覧を取得しましょう。記事一覧を取得するだけであれば特に認証は必要ありません。

axiosモジュールを使うとこんな感じです。

axios.get('https://graph.facebook.com/{GROUP_NAME}/posts?access_token={ACCESS_TOKEN}&locale=ja_JP&fields=id,message,created_time')

GROUP_NAME にはご自身が作成したグループ名、 ACCESS_TOKEN には先ほど発行したアクセストークンを添付します。

グランくん

今回はGETしかしないとは言え、アクセストークンはちゃんと隠しておこうね！

その他のオプションとして、

locale … 日本 ( ja_JP )を指定
fields … 今回は、 id, message, created_time の3つを取得

としています。

あとはページに反映させるだけです！例として Vue.js + Vuetify 構成で記述したHTMLを添付しておきます。

<div>
  <div v-for="n in news" :key="n.id" class="d-flex align-sm-center mb-1">
    <div
      class="mr-1 mr-sm-4 caption font-weight-bold"
      :style="{'min-width': $vuetify.breakpoint.xs && '74px'}"
    >
      {{ $vuetify.breakpoint.xs? $moment(n.created_time).format('YYYY/MM/DD') : $moment(n.created_time).format('YYYY年MM月DD日') }}
    </div>
    <a
      :href="`https://www.facebook.com/${group_name}/posts/${n.id.split('_')}`"
      target="_blank"
      style="text-decoration: none; color: #323232"
      class="text-caption text-sm-body-1"
    >
      {{ n.message.split('\n')[0] }}
    </a>
  </div>
</div>