Instagram APIを使ってフィードをWebページに埋め込む方法

TECH

2026.08.25

Web制作をしていると、クライアントから「自社のInstagramの投稿をWebページにも埋め込みたい」という要望をいただくことがあります。

普段WordPressを使っていると、プラグイン頼りになりがちで、スクラッチでの埋め込み方法がイマイチわからなかったので、せっせと調べて対応したときの備忘録。

注：この記事は2026年に作成したものです。Facebook / Instagram / Meta for Developersの仕様変更により、手順や画面構成が変わる場合があります。

ざっくり手順

Instagramアカウントをプロアカウントに切り替える
Facebookのページを作成し､Instagramアカウントと連携する
InstagramアカウントID と アクセストークン を取得する
PHPで投稿を取得するコードを記述する

うーん、なんだか小難しそう。

1〜3に関しては、原則としてクライアント側で対応していただく部分になると思いますが、実装側としても全体の流れを理解しておいて損はないので、まずはご自身のアカウントで一度試してみるのも良いかと思います。

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

以前は個人アカウントでも埋め込みができたのですが、2024年12月4日にInstagram Basic Display APIの提供が終了したことで、現在はInstagram APIを使ってタイムラインを取得・Webページに表示する場合、プロアカウントへの切り替えが必要になっています。

この手順は簡単なので、さくっとキャプチャを貼っておきます。

2. タイプを選択（どちらでもOK）して次へを押下（タイプは後からでも変更できます）

Facebookのページを作成し､Instagramアカウントと連携する

Instagramの投稿フィードを取得するためのInstagram APIを使用するには、まずFacebookの「ページ」を作成し、Instagramアカウントと連携します。

7. メニュー内のリンクするアカウントを選択し、 **Instagram** を押下

11. 承認リクエストのポップアップ画面が表示されたら連携するInstagramアカウントにログイン

InstagramアカウントID とアクセストークンを取得する

Meta for Developersでアプリを作成し、APIを利用するための「InstagramアカウントID」と「アクセストークン」を取得します。

工程が少し長いので一応アンカーリンクを付けておきます↓

Meta for Developersにログイン
アプリを作成
Instagramアカウントをテスターとして追加
トークンを発行
トークンを延長
その他必要な情報

Meta for Developersにログイン

初回時はMeta for Developersの利用登録が必要になります（費用はかかりません）。
利用を開始する（Get Started） を選択して、登録を進めます。
アプリを作成

マイアプリからアプリを作成をクリックします。

アプリ名とアプリの連絡先メールアドレスを入力します。
アプリ名は「instagram」のようなFacebookの商標やブランド関連の用語は使用できなかったため、今回は Feed API という名前にしましたが、任意のもので大丈夫です。

ユースケースを追加します。
ユースケースは「このアプリをどのような目的で使うのか」をMetaに指定する項目です。
他の解説サイトを見ると推奨するユースケースが色々紹介されてましたが、何故かうまくいかなかったので今回は 他の を選択しました。

アプリタイプを選択では ビジネス を選択します。

アプリ名とメールアドレスを確認して問題がなければ アプリを作成 をクリックします。

これでアプリの作成は完了です。
Instagramアカントをテスターとして追加

次に、作成したアプリにInstagramを追加します。
左メニューの下部にある 商品を追加 から追加できます。

Instagramが追加できたら、左メニューの アプリの役割 > 役割 から メンバーを追加 をクリックします。

Instagramテスター を選択し、テスターに追加するInstagramアカウントのユーザーネームを入力して 追加 を押します。

Instagram側のアカウント設定画面を開き、ウェブサイトのアクセス許可 から、アプリとウェブサイトをクリックします。

テスターへのご招待 にアプリからの招待が届いているので、 承認する を押します。
トークンを発行

Meta for Developersの画面に戻り、上部メニューのツールから グラフAPIエクスプローラ に入ります。

Metaアプリを確認し、アクセス許可の 許可を追加 から instagram_basic を追加します。

Generate Acsess Token のボタンを押せるようになったら、ボタンをクリックします。

ポップアップが表示されたら内容を確認しながら進めます。

短期アクセストークンが発行されるので、このトークンを一旦コピーしておきます。
この短期アクセストークンは有効期限が短いため、次に長期アクセストークンへの交換を行います。

また、APIのバージョン（vXX.X）も後ほどPHPのコードで指定するため、使用しているバージョンを控えておきます。※APIバージョンは後からでも確認・変更できます。
トークンを延長

アプリ画面に戻り、上部メニューのツールから、 アクセストークンデバッガー に入ります。

先ほど発行された短期アクセストークンを入力し、 デバッグ をクリックします。

有効期限を確認し、下部にある アクセストークンを延長 をクリックします。

有効期限が延長された長期アクセストークンが発行されます。
念のため、 デバッグ で有効期限を確認します。

この長期アクセストークンの方を使用するので、コピーしてメモアプリなどに貼り付けておきます。
その他必要な情報

次項で、PHPを使ってInstagramの投稿フィードを取得する手順に進みますが、上記の長期アクセストークンとAPIバージョンの他に、取得するInstagramのアカウントID（※ユーザーネームではなく数字のID）も必要になります。
IDは下記のページから確認ができるので、こちらもメモアプリにコピーしておきます。

PHPで投稿を取得するコードを記述する

さて、無事にアクセストークンを取得できたら、次にWebサイト側でInstagramのフィードを取得するPHPを作成します。

PHPのサンプル（ig.php）

<?php

$ig_user_id = '**********';
$token = '********************';

$cache_file = __DIR__ . '/ig_cache.json';
$cache_lifetime = 60 * 60 * 3;

header('Content-Type: application/json; charset=utf-8');

if (file_exists($cache_file)) {
    $modified = filemtime($cache_file);
    if (time() - $modified < $cache_lifetime) {
        header('X-Instagram-Cache: HIT');
        echo file_get_contents($cache_file);
        exit;
    }
}

$url = "https://graph.facebook.com/v**.*/$ig_user_id/media"
     . "?fields=media_url,permalink,media_type,thumbnail_url"
     . "&limit=6"
     . "&access_token=$token";

$response = @file_get_contents($url);

if ($response !== false) {
    file_put_contents($cache_file, $response);
    header('X-Instagram-Cache: MISS');
    echo $response;
    exit;
}

if (file_exists($cache_file)) {
    header('X-Instagram-Cache: STALE');
    echo file_get_contents($cache_file);
    exit;
}

http_response_code(500);
echo json_encode(['error' => 'Instagram API error']);

$ig_user_id = '**********'; **********の部分はInstagramアカウントID（数字）を入れてください。

$token = '********************'; ********************の部分は長期アクセストークンを入れてください。

$cache_lifetime = 60 * 60 * 3; Instagram APIのリクエスト上限を超えないよう、サーバーキャッシュを使って3時間ごとに更新するようにしています。キャッシュの有効期限は任意のもので設定してください。

$url = "https://graph.facebook.com/v**.*/$ig_user_id/media" v**.*には使用するGraph APIのバージョンを指定します。利用可能なバージョンに適宜置き換えてください。
参考：グラフAPIのバージョン更新履歴

上記のPHPをサーバーにアップロードし、JavaScriptのfetchからこのPHPを呼び出すことで、Webページ側にInstagramの投稿内容を表示します。

JavaScriptのサンプル


fetch('./ig.php')
  .then(res => res.json())
  .then(data => {
    const feed = document.querySelector('**********');

    data.data.forEach(post => {
      const imgSrc = post.media_type === 'VIDEO'
        ? post.thumbnail_url
        : post.media_url;

      const a = document.createElement('a');
      a.href = post.permalink;
      a.target = '_blank';

      const img = document.createElement('img');
      img.src = imgSrc;
      img.loading = 'lazy';

      a.appendChild(img);
      feed.appendChild(a);
    });
  })
  .catch(err => console.error('Instagram error', err));

fetch('./ig.php') には、先ほど作成したphpファイルのパスを指定します。
PHPファイルととJavaScriptファイルのディレクトリ階層が異なる場合は、それに合わせてパスを変更してください。

const feed = document.querySelector('**********'); **********には、Instagramの投稿を表示するHTML要素を指定してください。
例えば、HTML内の<div class="instagram-feed"> </div> というdiv要素の中に投稿を挿入する場合は、const feed = document.querySelector('.instagram-feed');と記述します。

HTML例（JavaScriptインライン記述）

<div class="instagram-feed"></div>

<script>
  fetch('./ig.php')
    .then(res => res.json())
    .then(data => {
      const feed = document.querySelector('.instagram-feed');
    
      data.data.forEach(post => {
        const imgSrc = post.media_type === 'VIDEO'
          ? post.thumbnail_url
          : post.media_url;
      
        const a = document.createElement('a');
        a.href = post.permalink;
        a.target = '_blank';
      
        const img = document.createElement('img');
        img.src = imgSrc;
        img.loading = 'lazy';
      
        a.appendChild(img);
        feed.appendChild(a);
      });
    })
    .catch(err => console.error('Instagram error', err));
</script>

これで実装完了です。お疲れ様でした。