JavaScript

2020.07.20 作成 | 2021.08.18 更新

【グラフAPIエクスプローラ】Facebook APIとJavaScriptで最新の投稿を取得する〜無期限のアクセストークン取得も解説〜

Facebookのユーザーや投稿の情報を取得できるFacebook APIを使って、最新の投稿を取得する方法を解説します。

FacebookをWebサイトに埋め込む一般的な方法は、「iframeを使ってタイムラインを埋め込む」です。

しかし、Facebook APIのグラフAPIエクスプローラを使うことで、「最新の投稿○件の画像と本文を取得してCSSで見た目を自由に調整する」のようなことができるようになります。

つまり、Facebookのユーザーや投稿の情報を自由にカスタマイズしてサイトに表示できます。

はじめに
手順1：Facebookの開発者用アカウントを作成
手順2：アプリの作成
手順3：グラフAPIエクスプローラーでアクセストークンを取得する
- アクセストークンの有効期限
- アクセストークンのデバッグ
手順4：コーディング作業
- コードの解説
まとめ

はじめに

Facebookのアカウントにログインできることが前提条件です。

実案件だと、クライアントの担当者さんにアカウント情報を教えてもらう必要があります。

作業の流れとしては、APIを使用するためにアクセストークンが必要なので、それを取得して、その後コードを書いていきます。

手順1：Facebookの開発者用アカウントを作成

ここで指す「開発者用アカウント」とは、Facebookにログインして友達の投稿を見たりするアカウントではありません。

普段使用するアカウントで、「開発者用アカウント」を新たに作成する必要があります。

こちらが開発者用アカウントのTOPページです。

https://developers.facebook.com/?locale=ja_JP

ここから開発者用アカウントを作成してください。

手順2：アプリの作成

作成したら、先程の開発者用アカウントのTOPページに戻り、ヘッダーメニュー右上の「マイアプリ」をクリックします。

「新しいアプリを追加」ボタンをクリックしたら「アプリの利用目的はなんですか？」のポップアップが表示されます。

ここでは、「その他」を選択してください。

その後、次の画面でいくつか項目を入力します。

アプリ表示名：なんでも大丈夫です
連絡先メールアドレス：なんでも大丈夫です
ビジネスマネージャアカウントをお持ちですか？：なにも選択しないで大丈夫です

これでアプリが作成完了です。

手順3：グラフAPIエクスプローラーでアクセストークンを取得する

先ほどの「新しいアプリを追加」するページのヘッダーメニューの「ツール」にマウスオーバーすると項目がいくつか出てくるので、その中の「グラフAPIエクスプローラー」をクリックします。

以下のような画面に遷移します。

画面右側の「Facebookアプリ」のプルダウンから、先程作成したアプリを選択。
「ユーザーまたはページ」のプルダウンから、「ユーザーアクセストークンを取得」を選択。
ログインなど求められたら適時対応してください。
「アクセス許可」の項目が表示されるので、「user_posts」と「pages_show_list」を入力して追加する。

以下のような画面になっていればOKです。

その後、青いボタン「Generate Access Token」をクリックしてアクセストークンを発行します。

注意点

今回表示させたい情報が「ユーザー自身の投稿」なのか「ページの投稿」なのかで対応が少し変わります。

「ページの投稿」の場合は、アクセストークンを発行する際のポップアップ画面で、任意のページを選択してください。

※以下画像参考

※「ページの投稿」を表示させる場合は、上記の画面でチェックを入れる

そもそも「ページ」とは

友達の投稿などを見る、自身のアカウントの投稿を表示させる場合は「ユーザーの投稿」に該当します。

それに対して、だれでも閲覧できる企業やお店のアカウントが「ページ」に該当するので、それらの投稿を表示させる場合は「ページの投稿」に該当します。

※企業やお店のアカウントが「ページ」ではなく、通常のアカウントの場合もあるので気をつけてください

詳しくはこちらの記事で解説されています。

以下の欄に文字列が追加されていれば、アクセストークンの発行は成功です。

その文字列がアクセストークンになります。

アクセストークンの有効期限

アクセストークンには有効期限があります。

この有効期限が切れると、Facebookの情報が取得できなくなります。

なので、この有効期限を無期限にしましょう。

無期限にする方法はこちらの記事で詳しく解説されています。

https://qiita.com/ari-chel/items/bac6c90f5c85a8295352

私自身、こちらの記事を参考に、無期限にすることができました。

アクセストークンのデバッグ

取得したアクセストークンの有効期限や種類などを調べるツールがFacebookの公式ツールとして公開されています。

https://developers.facebook.com/tools/debug/accesstoken/

アクセストークンを取得したら、このツールでいくつか確認しておきたい点があります。

※何箇所かプライベートな項目があるのでそこは隠しています

有効期限

まず、「有効期限」と「データアクセスの有効期限」は別物です。

今回確認したいのは、「発行」のひとつ下の項目の「有効期限」です。

先程の手順で有効期限を無期限に設定できたかどうかを確認する場合は、この項目を確認します。

「有効期限」の値が「約○時間以内」ではなく、「受け取らない」と表示されていれば無期限になっています。

タイプ

アクセストークンを取得する画面のポップアップウィンドウで任意の「ページ」にチェックをした場合、タイプが「Page」になります。

特に何もしなかった場合はタイプが「User」になります。

もし、このタイプが「Page」の状態でユーザーの投稿情報を取得しようとエラーになります。

タイプが「Page」の場合、ページの投稿情報のみを取得できます。

タイプが「User」の場合も同様で、この場合はユーザーの投稿情報のみを取得できます。

スコープ

Facebook APIでは、取得する情報によって権限を設定します。

先程、アクセストークンを取得する画面のアクセス許可で「user_posts」と「pages_show_list」を入力したと思いますが、それがこの欄に表示されます。

後の手順4のコーディング作業時でエラーが出てしまう場合は、このスコープ（権限）を確認してみてください。

手順4：コーディング作業

アクセストークンを取得できれば、あとはコードを書いて、サイト上に任意の情報を表示させるだけです。

こちらが実際のコードになります。

<!-- HTML -->
<h2>最新の投稿の本文 ↓</h2>
<p id="app-text"></p>
<br>
<h2>最新の投稿の画像 ↓</h2>
<div><img src="" alt="" id="app-img"></div>

<!-- jQuery読み込み（バージョンはajaxが使えれば何でも大丈夫です） -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!-- JavaScript -->
<script>
  // 取得した情報をHTMLに反映
  function DomEdit(_fbObj) {
    var elmText = document.querySelector('#app-text') || false
    var elmImg = document.querySelector('#app-img') || false
    var noImgSrc = 'https://www.rakumachi.jp/images/frontend/smartphone/nophoto_thumbnail.png'
    if (_fbObj) {
      if (elmText) {
        var text = _fbObj.posts.data[0].message || false
        if (text) {
          elmText.textContent = text
        } else {
          elmText.textContent = '本文が無いです。'
        }
      }
      if (elmImg) {
        var src = _fbObj.posts.data[0].full_picture || false
        if (src) {
          elmImg.setAttribute('src', src)
        } else {
          elmImg.setAttribute('src', noImgSrc)
        }
      }
    }
  }

  // AjaxとAPIで情報を取得
  function GetFacebook() {
    var data;
    var graph_api = 'https://graph.facebook.com/v7.0/me';
    var param = '?fields=posts{message, full_picture}';
    var token = 'トークンをここに入力';
    $.ajax({
        url: graph_api + param + '&access_token=' + token
      })
      .done(function (res) {
        data = res.data;
      })
      .fail(function (jqXHR, status) {
        console.log(status)
      })
      .always(function (res) {
        console.log(res)
        DomEdit(res)
      });
  }
  window.addEventListener('load', () => {
    GetFacebook()
  })
</script>