「Facebook Graph API」の使い方

WordPressの有料テーマに「Facade」というテーマがあります。

先日印刷会社さまへ納品させていただいたサイトでご購入して頂いたテーマなのですが、このテーマ、今年の夏頃のアップデートで、TOPページへインスタグラムのタイムラインを表示させるウィジェットが追加されました。

【トップページ】Instagramタイムライン

納品前に追加になったウィジェットだったので、クライアント様に確認したところ、そのうちインスタを始めるつもりだが、現在の所アカウントも持っていない…という回答でした。

Facebookページはあるが、今後はインスタの方が職員全員で参加しやすいだろうとアドバイスをもらっているので、アカウントを作成したら、インスタをメインにしたいので、Facebookページは掲載不要とのことで一旦保留にしいてました。

基本自分たちで更新することが前提で、Wordpressのサイトへリニューアルをされたクライアント様でしたので、設置方法のマニュアルがあれば、自分たちでやってみます、とのことでしたので、テーマの会社さまがご用意してくださっているマニュアルページのURLをお伝えしておりました。

インスタのタイムライン を表示する

先日、どうもマニュアルの内容が古いらしく、同じ画面が出てこないので自分たちではできない…とご連絡が有り、年末はしばらく忙しいので、年始早々にサポートして欲しい…とご依頼をいただきました。

今回の覚書は、私自身で一通り試してみた方法を、サポート時に活かせるように…と残したいと思います。

事前に準備するもの

  • Facebookアカウント
  • Instagramアカウント

FacebookページとInstagramのプロアカウントを連動させて、Facebook開発者アカウントの登録をし、APIキーを取得する流れになります。そのために、上記の2つのアカウントは必須になります。

Facebookページの作成

まずはじめにFacebookとInstagramアカウントの紐付けのため、Facebookページを作成します。

  1. ページ名、カテゴリ、詳細を入力しFacebookページを作成します。
  2. 左側に表示されているメニューバーから「設定」→「Instagram」を選択します。
    ※FacebookページとInstagramアカウントの紐付けを実施します。
  3. 「アカウントをリンク」ボタンを押下し、Instagramアカウントを紐つけます。
    ※記載がある通り、個人アカウントの場合はプロアカウントに切り替えられます。(現在、基本無料で利用可)

はい、私も今回「デイ工房」というFacebookページを初めて作りました。
作った以上は活用できるようにしないといけませんね…。

Instagramアカウントでログイン

  1. インスタの設定画面から「プロアカウントに切り替える」
  2. ビジネスorクリエーターを選択(どちらでも可)、各設定を行い完了まで進みます。
  3. インスタの設定画面から「アカウントセンター」を選択
    ※「アカウントを追加」からFacebookにログインしインスタ と連携します。
  4. Facebookページの設定→Instagram画面にリンク済のInstagramプロアカウントが表示されているか確認します。

※クライアント様はここまでは既に済まされていましたので、ここまでの説明画像は端折りました。

FACEBOOK for Developerから必要情報を取得

Facebook開発者アカウントの作成

ホームページ上でInstagramのタイムラインを取得するために必要な「アクセストークン」と「InstagramビジネスID」を生成するために、Facebook開発者アカウントを作成していきます。

ウィジェット必要項目

Facebook開発者ページにアクセス

Meta for Developers(旧「Facebook for Developers」)

1.右上にある「スタート」ボタンを押下します。

アカウント登録開始

※開発者アカウントの登録方法を説明したマニュアルページもあったので、まずはそこへのアクセス方法を先に説明します!

1-1. TOPページの一番下へ移動して「サポート」項目内の「開発者サポート」をクリック

マニュアルページへ

1-2. 開発者サポートページが開いたら、すぐ下の「利用を開始」の中から「開発者として登録」を選択

開発者サポートページ

1-3. ここが簡単ですが、STEP1〜3で説明されています。

Facebook For Developersアカウント登録方法

※Step1の大前提が「Facebookアカウントにログイン中に…」となってますので、Instagramとの連携が先に済んでいる場合は、先にFacebookへログインしておいてから始めた方が良いと思われます。

 

2.Facebookプラットフォーム規約、開発者ポリシーに同意し「次へ」ボタンを押下します。

Facebookアカウントと連動

3.メールアドレスを認証します。

Facebookアカウントにログインしていること!

4.自身の役割を選択し、「登録完了」ボタンを押下します。

役割の選択

5.この画面に切り替わったら、Facebook開発者アカウントの登録が無事に完了したことになります。

アカウント登録完了

Facebookアプリの作成

1.マイアプリから「アプリを作成」ボタンを押下します。

アプリの作成開始

2.アプリタイプ「ビジネス」を選択して「次へ」ボタンを押下します。

アプリタイプの選択

3.アプリの情報を入力し、「アプリを作成」ボタンを押下します。

項目を埋めてアプリを作成

4.Facebookアプリが作成されるとこの画面に切り替わりました。

アプリの作成完了

トークンを発行する

グラフAPIエクスプローラへアクセス(下図の方法でもアクセスできます)

グラフAPIエクスプローラへ

※2021/12/23現在のバージョンは v12.0 です。

バージョンを確認

右側のメニューの2箇所を変更します

  • Facebookアプリ:先程作成したFacebookアプリを選択
  • ユーザーまたはページ:ユーザーアクセストークンを取得を選択

ユーザーアクセストークンを取得

アクセス許可に下記項目を追加します。

pages_show_list
business_management
instagram_basic

▼テーマ「Facade」のマニュアルページを参照しています。▼

テーマFacadeのインスタ連携

※許可項目のリファレンスはこちら

アプリのアクセス許可が必要な場合、以下の画面が表示されますので、ログインして許可を与えます。

許可が必要な場合この画面が出ます

「許可を追加」の部分をクリックすると追加できる項目が表示されますので、一つ一つ選択していきます。

許可を追加する

私はは下記の最低限の許可項目を追加してみました。

  • EventsGroupsPages
    • business_management
    • pages_read_engagement
    • pages_read_user_content
    • pages_show_list
  • Other
    • instagram_basic
    • instagram_manage_comments
    • instagram_manage_insights

アクセストークン発行準備OK

アクセス許可を追加したら「Generate Access Token」ボタンを押下します。

アクセストークンのコピー

※ここで認証を求められたら、Facebookアカウントでログインします。

発行されたトークンをメモします。

「Facebook Graph API」の使い方

※この発行されたトークンは、後で使用するので「テキストエディタ」へメモします。

トークンの有効期限を延長する

ここまでの手順で発行したトークンは、有効期限が2時間です。
毎回取得し直すのは手間なので、無期限に延長しておきます。

1.マイアプリから該当のアプリを選択します。

【補足】マイアプリからダッシュボードへ

2.アプリIDとapp secretをメモします。

「アプリID」、「app secret」をメモする

3.下記URLにアクセスします。

https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【トークン】

※【アプリID】、【app secret】、【トークン】はメモした値に書き換えてください。

4.発行された「トークン2」をメモします。(下の画像の赤線部分です。)

発行されたトークン2

5.下記URLにアクセスします。

https://graph.facebook.com/v5.0/me?access_token=【トークン2】

※【トークン2】は「4」でメモした値に書き換えてください。

6.発行された「ID」をメモします。(下の画像の赤線部分です。)

直前に取得したID

7.下記URLにwebアクセスします。

https://graph.facebook.com/v5.0/【ID】/accounts?access_token=【トークン2】

※【ID】、【トークン2】は「4」と「6」でメモした値に書き換えてください。

8.発行された「トークン3」をメモします。(下の画像の赤線部分です。)

発行されたトークン3

※ここで発行された「トークン3」が無期限のトークンになります。

9.念の為「トークン3」の期限を確認します。

アクセストークンデバッガーにアクセスします。

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

アクセストークンデバッガー

「トークン3」を入力後「デバッグ」ボタンを押下します。

トークン3を入力後「デバッグ」ボタンを押下

有効期限が「受け取らない」になっていれば成功です。

トークン3の期限を確認

InstagramビジネスIDを取得する

1.再び「グラフAPIエクスプローラ」にアクセスします。

https://developers.facebook.com/tools/explorer/

2.アクセストークン欄にトークン3を入力します。

ページ上部の入力欄を me?fields=instagram_business_account に変更します。

アクセストークン欄にトークン3を入力

3.InstagramビジネスIDを取得します。

「2」の必要な箇所の変更が済んだら「送信」ボタンを押下します。

InstagramビジネスIDを取得

※発行された「InstagramビジネスID」をメモします。(上の画像の赤線部分です。)

WordPressにInstagramのタイムラインを設置しましょう

「ダッシュボード」>「外観」>「ウィジェット」の順に進み、トップページへウィジェット「【トップページ】Instagramタイムライン」を追加して、以下のように項目を埋めて「完了」をクリックすれば、設置完了です。

「Facebook Graph API」の使い方

これで無事終了です。長い操作になりますが、お疲れさまでした。

Follow me!