2020.7.20

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

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

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

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

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

はじめに

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

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

 

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

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

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

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

 

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

Facebook for Developers
Facebook for Developersで人と人のつながりを広げましょう。AI、ビジネスツール、ゲーム、オープンソース、パブリッシング、ソーシャルハードウェア、ソーシャル統合、バーチャルリアリティを探求できます。開発者の学習と交流を促進するFacebookのグローバルプログラムをご確認ください。

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

手順2:アプリの作成

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

 

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

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

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

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

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

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

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

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

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

 

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

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

注意点

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

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

※以下画像参考

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

そもそも「ページ」とは

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

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

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

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

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

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

 

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

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

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

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

 

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

(画像付)グラフAPIの無期限アクセストークン取得 - Qiita
(追記 編集:2021.07.15 ハッシュタグの取得を記載) 執筆時点のグラフAPIのバージョンはv.5.0です。 グラフ APIの無期限アクセストークン取得 Instagram表示に必要なパラメータの取得 該当するハッシュタグを...

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

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

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

Facebookにログイン | Facebook
Facebookにログインして、友達や家族と写真や近況をシェアしましょう。

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

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

有効期限

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

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

 

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

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

タイプ

アクセストークンを取得する画面のポップアップウィンドウで任意の「ページ」にチェックをした場合、タイプが「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>

コードの解説

簡単にコードの解説をします。

このコードでは、最新の投稿の「本文」と「画像」を取得してサイトに表示させています。

 

<p id="app-text"></p>に本文が、<img src="" alt="" id="app-img">srcに画像のURLが挿入されます。GetFacebook()ajaxを使って投稿の情報を取得しています。

 

ajaxを使っているので、jQueryを読み込ませています。

 

var param?fields=の値(posts{message, full_picture})を変えることで、取得する情報を変更できます。

どのような情報を取得できるかは手軽にテストできます。

アクセストークンを発行したページ上部のテキストボックスのme?以降の文字列を変えて、右側の「送信」ボタンをクリックすれば結果が表示されます。

入力時にサジェストが出てくるので色々試してみると良いでしょう。

どのような値を設定できるか一覧で確認したい場合は、公式ドキュメントをご覧ください。

ユーザー情報:https://developers.facebook.com/docs/graph-api/reference/user

ページ情報:https://developers.facebook.com/docs/graph-api/reference/page/

ページ情報の中の投稿情報:https://developers.facebook.com/docs/graph-api/reference/v7.0/page/feed

 

.always(function (res) {resに取得した情報がオブジェクト形式で格納されています。

DomEdit()res投稿情報をHTMLに反映させる処理をしています。

 

投稿の情報が取得できなかったり、空だったりした場合は「代替のテキストや画像を表示する」という処理もしています。

 

コードはこちらのサイトを参考にさせて頂きました。

Facebook Graph APIで自分の投稿をJSONで取得するためのアクセストークンを発行する旅 - dskd
結論めんどい

まとめ

今回は最新の投稿情報をFacebook APIで取得する方法、実際のコードを中心に紹介しました。

サンプルコードをもとにすれば、他の投稿情報やユーザー情報なども簡単にサイト上に表示できるはずです。

トークンのタイプが違うことでエラーになる。権限を与えてないからエラーになる。という凡ミスに私自身かなり苦しめられたので、エラーが出たらまずこれらをチェックしてみましょう...。

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア