ビジネスとIT活用に役立つブログBlog


webサイトにInstagramの投稿を表示する!「Facebook Graph API」の使い方(実装編)

この記事をシェアする:

前回の「準備編」では、各種アカウントの登録と設定を行いました。
今回はAPI利用に必要な情報の取得方法の解説と、webサイトにInstagramを表示させるためのコード例の紹介をします。

注意
記事執筆時(2021年1月13日)時点のUI、手順になります。
バージョンアップ等でUIや手順の変更が生じる場合があります。

トークンを発行する

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

https://developers.facebook.com/tools/explorer/
※2021/01/13現在のバージョンは v9.0 です。

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

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

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

下記は最低限の許可項目です。
許可項目のリファレンスはこちら

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

4.「Generate Access Token」ボタンを押下します。

認証を求められた場合はFacebookアカウントでログインしてください。

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

発行されたトークンをテキストエディタ等にメモしておきます。

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

前手順で発行されたトークンは有効期限が2時間です。
毎回取得し直すわけにはいきませんので、無期限に延長します。

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

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

左側メニューの「設定」→「ベーシック」にアクセスし、「アプリID」と「app secret」をメモします。
※「app secret」は「表示」ボタンを押下し、ログイン認証後に表示される英数字の文字列になります。

※クリックで拡大表示します

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

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

4.発行されたトークン(以下トークン2)をメモします。

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

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

6.発行されたIDをメモします。

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

※【直前に取得したID】、【トークン2】はメモした値に書き換えてください。

8.発行されたトークン(以下トークン3)をメモします。

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

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

アクセストークンデバッガーにアクセスし、トークン3を入力後「デバッグ」ボタンを押下します。

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

InstagramビジネスIDを取得する

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

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

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

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

ページ上部の入力欄を  me?fields=instagram_business_account  に変更し、「送信」ボタンを押下します。

4.発行されたInstagramビジネスIDをメモします。

データ取得のコードを書く

本記事ではPHPでのサンプルを紹介します。

webアクセスして確認してみます。

無事取得できました!

さいごに

手順は少し複雑ですが、一度設定してしまえばInstagramを更新するだけでwebサイトにも同じ投稿を表示させることができます。

ぜひ導入してみてはいかがでしょうか。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!