Instagram APIで投稿一覧を取得・表示する方法

2025/01/21

Webデザイン

Instagramの基本表示APIが2024年12月4日に終了し、今までウェブサイトに表示していたInstagramの投稿が使えなくなってしまったので新たにInstagram APIを使って投稿を取得する方法を記載しておきます。

目次 [ close ]

Intagram APIとは？

元々InstagramのAPIにはInstagram Basic Display APIとInstagram Graph APIに分かれており、前者はInstagramアカウントとサードパーティのコンシューマー向けアプリをリンクするために、後者は企業やクリエイターの情報収集目的に使われていました。

そのBasic Display APIが廃止となり、ビジネスアカウントやクリエイターアカウント向けのみの「Facebookログインを使ったInstagram API」または「Instagramログインを使ったInstagram API」へ変更になりました。

そのため今後はInstagramのビジネスアカウントかクリエイターアカウント、そしてそれを紐づけするためのMetaアプリが必須となりました。

Instagramアカウントをプロアカウントに切り替え

Instagramアプリの「設定とプライバシー」にある「アカウントの種類とツール」をタップします。

「プロアカウントに切り替える」をタップします。

運用しているアカウントに当てはまるカテゴリを選択します。
私の場合なら「ブロガー」です。

「クリエイター」か「ビジネス」かを選択します。

プロアカウントに変えた時点でアカウントを非公開にすることができなくなりますのでご注意ください。
後から個人アカウントに戻すことも可能です。

Facebookページの作成

Facebookページの作成方法は省略します。
そしてFacebookページとInstagramのアカウントをリンクしておきます。

Metaアプリの作成

APIを取得するためのMetaアプリを作成します。
アプリの作成手順も省略します。

ユースケースは「その他」、アプリタイプは「Business」を選びます。

アプリの設定にあるアプリIDとapp secretをメモっておきます。

アクセストークンの取得

1番目のアクセストークン

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

Metaアプリには先ほど作成したアプリ、ユーザーまたはページには「ユーザーアクセストークン」を選択します。

以前はここでページアクセストークンのFacebookページを選択していたのですが、なぜかできないので「ユーザーアクセストークン」を選びました。
ビジネスとクリエイターで違う？

アクセス許可で下記を追加します。

pages_show_list
business_management
instagram_basic
instagram_manage_comments
instagram_manage_insights
pages_read_engagement
pages_manage_metadata
pages_read_user_content
pages_manage_ads

「Generate Access Tokern」をクリックするとアカウントの認証画面が開き、その後上の枠にアクセストークンの文字列（EAA…….）が表示されるのでコピーしておきます。

2番目のアクセストークン

先ほどのアクセストークンとMetaアプリのIDとapp secretを用意して下記URLの赤字部分に差し替えてブラウザに貼り付けてアクセスします。
バージョンはグラフAPIエクスプローラに表示されている最新バージョンを使います。

https://graph.facebook.com/v21.0/oauth/access_token?grant_type=fb_exchange_token&client_id=（アプリID）&client_secret=（app secret）&fb_exchange_token=(アクセストークン)

するとブラウザに下記のような文字列が表示されます。
赤字部分のアクセストークンとコピーしておきます。

{"access_token":"EAA**********************************************************************************************************","token_type":"bearer"}

3番目のアクセストークン

2番目で取得したアクセストークンを下記URLに差し込んでブラウザでアクセスします。

https://graph.facebook.com/v21.0/me?access_token=EAA******************************************************************

下記のようなnameとIDが表示されるのでIDをコピーしておきます。

{
   "name": "（エンコードされたFacebookページ名）",
   "id": "****************"
}

上記のIDと先ほどと同じアクセストークンを下記URLに差し込んでブラウザでアクセスします。

https://graph.facebook.com/v21.0/（上記のIDを入力）/accounts?access_token=EAA************************************************************************************************************

{
   "data": [
      {
         "access_token": "EAA********************************************************************************************",
         "category": "**********************",
         "category_list": [
            {
               "id": "****",
               "name": "*************************"
            }
         ],

赤字の部分が最後のアクセストークンになります。
このトークンを使うことで自分の運用するInstagramの投稿を取得することができるようになります。

アクセストークンデバッガーで確認

アクセストークンデバッガーにアクセスして上記のアクセストークンを入力してチェックします。

こんな感じに表示されていればOKです。
ここで注目すべきは「データアクセスの有効期限」です。（約3ヶ月以内）と書かれているように、このアクセストークンは3ヶ月しか使うことができません。つまり、3ヶ月経ったら切れる前に再度同じ手順でアクセストークンを再発行しなければならないのです。面倒くさい・・・・

InstagramビジネスアカウントIDの取得

ここで再びグラフAPIエクスプローラに戻り、「ユーザーまたはページ」にてFacebookページを選択し、上のアドレス欄に「me?/fields=instagram_business_account」と入力します。
instagram_business_accountの次に表示されているIDがビジネスアカウントIDになります。
投稿一覧の表示に使用します。

アクセストークンを使った投稿一覧の取得方法

ここまでに取得した「第3のアクセストークン」と「ビジネスアカウントID」を使ってInstagramの投稿一覧を取得します。

https://graph.facebook.com/v21.0/（ビジネスアカウントID）/?fields=（取得する項目）&access_token=（第3のアクセストークン）

「取得する項目」とは、Instagramに投稿かどの項目をいくつ取得するかを指定します。
指定できる主な項目は以下の通りです。

caption: 投稿内容
id: 投稿ID
like_count: いいねの数
media_type: メディアタイプ。CAROUSEL_ALBUM、IMAGE、またはVIDEO
media_url: メディア（画像や動画）のURL
permalink: Instagramの投稿URL
thumbnail_url: メディアが動画の場合のサムネイルURL
media.limit: 取得するメディアの数

実際に指定する場合は下記のようになります。

https://graph.facebook.com/v21.0/1234567890123456/?fields=media.limit(6){media_url,permalink,thumbnail_url,timestamp}&access_token=EAA****************************************************************************

すると下記のようなJSON形式のデータが帰ってきます。

{
   "media": {
      "data": [
         {
            "media_url": "https://scontent-nrt1-1.cdninstagram.com/o1/v/t16/f2/m86/.............",
            "permalink": "https://www.instagram.com/reel/........",
            "thumbnail_url": "https://scontent-nrt1-1.cdninstagram.com/v/..............",
            "timestamp": "2025-01-15T02:03:01+0000",
            "id": "18.............."
         },
         {
            "media_url": "https://scontent-nrt1-2.cdninstagram.com/v/..............",
            "permalink": "https://www.instagram.com/p/...........",
            "timestamp": "2025-01-10T04:01:06+0000",
            "id": "17..................."
         },

あとはこのJSONデータをプログラムによって出力すればいいだけです。

注意点としてはAPIに短時間で何度もアクセスすると制限をかけられてしまうので、プログラム上で上記のデータと画像ファイルをキャッシュする必要があります。

サンプルページを作りました。

トークンの更新切れてたらごめんなさいサンプルページ

不正をさせないためとはなんでこんなに面倒なんでしょう・・・
Metaのサービスはころころ仕様が変わるのでもうわけわかりません。

WordPressで使うならSmash Balloon Social Photo Feedのプラグインをおすすめします。