Instagramの投稿をホームページに掲載したい、そんな要望があった際にInstagram APIを使って投稿を取得する方法を記載しておきます。

目次 [ close ]
  1. Intagram APIとは？
  2. Instagramアカウントをプロアカウントに切り替え
  3. Facebookページの作成
  4. Metaアプリの作成
  5. アクセストークンの取得
    1. 1番目のアクセストークン
    2. 2番目のアクセストークン
    3. 3番目のアクセストークン
  6. アクセストークンデバッガーで確認
  7. アクセストークンを使った投稿一覧の取得方法

Intagram APIとは？

Instagram APIはInstagramのビジネスアカウントとクリエイターアカウント向けに提供されているサービスです。

Instagram APIを使うことで下記サンプルページのように自分のサイト内にInstagramの投稿一覧を表示することができます。

サンプルページ

Instagramの投稿をホームページに埋め込む方法には、WordPressならプラグインを使ったり、SnapWidgetのような外部サービスを使って実現できますが、オリジナルのWEBサイトで独自にやるにはAPIを使って自力で取得しなければなりません。

その手順を紹介します。

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

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

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

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

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

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

Facebookページの作成

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

Metaアプリの作成

Meta for DevelopersにてAPIを取得するためのMetaアプリを作成します。

Metaアプリの画面はころころ仕様が変わって説明が難しいので一部省略します。

ユースケースには「Instagramでメッセージとコンテンツを管理」を選択します。
ユースケースの設定で「instagram_basic」を追加しておきます。

アプリの設定→ベーシックにあるアプリIDとapp secretをメモっておきます。
また、商品のところで「InstagramグラフAPI」を追加します。

アクセストークンの取得

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

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

Metaアプリには先ほど作成したアプリを選択します。

アクセス許可で下記を追加します。
×がついているのが許可しているものになります。

  • 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

いろいろ追加していますが、自分の投稿を表示するだけならたぶんinstagram_basicだけで十分だと思います。

「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_basicのところにある数字（InstagramビジネスアカウントID）をメモっておきます。

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

ここまでに取得した「第3のアクセストークン」と「Instagramビジネスアカウント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****************************************************************************

取得数は6件、画像またはサムネイルのURLと投稿URL、日時を取得しています。
すると下記のような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に短時間で何度もアクセスすると制限をかけられてしまったり読み込みに時間がかかってサイトのパフォーマンスが落ちるので、プログラム上で上記のデータと画像ファイルをキャッシュする必要があります。

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

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