0

読みもの
Journal

【2025年版】webサイトにInstagramフィードを表示させよう
Date :
Category :
コラム
Share :

こんにちは。
エンジニアの松村です。

競馬好きにとって待ちに待った秋のG1シーズンがやってきました。
自分が一口で持っている馬もG1出走を予定しているので、まずは無事に出走が叶うのか、毎週ハラハラしながら動向を追っています。

G1ともなると、競馬場でのイベントやキャンペーンも盛りだくさん。
ライト層へのアピールのために、JRAもInstagramをはじめとしたSNSを活用して情報を発信しており、ファンとの接点は年々「SNSが起点」になってきていると感じます。

こうした流れは、競馬だけでなくあらゆる業界・サービスでも同じです。
だからこそWebサイトでも、SNSの投稿を効果的に取り込み、最新情報を届けたり、SNSでの活動を自然に知ってもらえる仕組みを整えておくことが重要です。

今回は、その手段としてWebサイトにInstagramフィードを表示させる方法をご紹介します。
過去にも弊社ブログで取り上げましたが、仕様が大きく変わっている部分も多いため、2025年版として改めてまとめました。
表示に必要なID・トークンの取得から、取得した情報を使ったフィードの表示方法まで、順を追って解説していきます。
それでは参りましょう。

※2025年9月時点の内容となります。 ご覧いただくタイミングによっては、各メニューの名称や手順が異なる可能性がございます。

( Index )

  1. はじめに
  2. Instagramプロアカウントへ移行
  3. InstagramとFacebookページを連携させる
  4. Facebook開発者アカウント及びアプリの作成
  5. ビジネスIDとアクセストークンの取得
    1. トークンの有効期限を延長
    2. トークンの有効期限を無期限に
  6. フィードの表示確認
  7. 終わりに

はじめに

フィードを表示させるにはInstagramアカウントと、そのアカウントに紐づけるためのFacebookページが必要です。 あらかじめご準備の上、以下の手順をご覧ください。

Instagramプロアカウントへ移行

まずInstagramアカウントをプロアカウントへ移行します。 Instagram管理画面から、「設定」>「アカウントの種類とツール」へ進み、「プロアカウントに切り替える」をクリックします。 その後に表示されるタイプ/カテゴリは任意のものを選んでください。 手順に沿って切り替え完了まで進みます。

InstagramとFacebookページを連携させる

プロアカウントに切り替えたInstagramとFacebookページを紐づけていきます。 Facebookページの管理画面内、「設定とプライバシー」>「設定」に進みます。

「リンクするアカウント」>「Instagram」をクリックします。

画面の案内に沿ってアカウントを紐づけます。

下記のような表示となれば紐づけ完了です。

Facebook開発者アカウント及びアプリの作成

続いて、フィードの表示に必要なFacebook開発者アカウントとアプリの作成を行います。 Meta for Developersを開き、右上にある「ログイン」もしくは「利用を開始する」クリックします。

Meta for Developersのアカウントが無い場合はここで作成します。 画面の案内に従うだけですぐに完了します。 アカウントが作成が完了したら、画面右上の「マイアプリ」をクリックし、次の画面で表示される「アプリを作成」をクリックします。

アプリ名と連絡先メールアドレスを設定し、「次へ」をクリックします。

ユースケースを追加の画面では、一番下までスクロールして「その他」を選択し、「次へ」をクリックします。

アプリタイプを選択では、「ビジネス」を選択し、「次へ」をクリックします。

確認画面が表示されますので、問題なければ「アプリを作成」をクリックします。

ビジネスIDとアクセストークンの取得

アプリの作成が完了しましたら、フィードの表示に必要なビジネスIDとアクセストークンを取得します。 Graph API Explorerを開き、Metaアプリ / ユーザーまたはページ / アクセス許可欄を以下のように設定し、最後にGenerate Access Tokenをクリックします。

  • Metaアプリ
    作成したアプリの名称を選択
  • ユーザーまたはページ
    トークンを取得
  • アクセス許可
    Instagram_basic
    pages_show_list
    business_management
    の3件を入力

別ウインドウが開くので、画面の案内に沿ってトークンの発行を進めてください。 「（アプリ名）がアクセスするページを選択」の画面では、それぞれ「現在のページのみ」「現在のビジネスのみ」「現在のInstagramアカウントのみ」を選択してください。

完了後、アクセストークンが生成されます。

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

発行されたトークンはすぐに期限切れになってしまうため、有効期限を延長します。 アクセストークン欄左にあるアイコンをクリックし、開いた画面内にある「アクセストークンツールで開く」をクリックします。

アクセストークンデバッガーが開くので、下部にある「アクセストークンを延長」をクリックします。

延長されたトークンが生成されるので、「デバッグ」をクリックして更にデバッガーを開きます。

有効期限が2ヶ月に延長にされていることを確認できましたら、①トークンと②Instagram_basic（ビジネスID）の値を控えておきます。

トークンの有効期限を無期限に

Graph API Explorerを開き、①アクセストークン欄に先ほどの有効期限が延長されたトークンを貼り付けます。 その上部にある②APIのパスに「me/accounts」を入力し、送信をクリックします。

表示されたaccess_tokenが無期限のアクセストークンですので、これも控えておきます。

念の為、アクセストークンデバッガーに入力してみると、「有効期限：受け取らない」になっていることが確認できます。

これでフィード表示に必要なビジネスIDとトークンが取得できました。 取得したビジネスIDとトークンを下記URL内に嵌めて、ブラウザのアドレスバーに読み込ませてください。

https://graph.Facebook.com/v23.0/InstagramビジネスID/media?fields=id,caption,media_type,media_url,timestamp,permalink&access_token=アクセストークン

フィードの表示確認

先ほどのビジネスIDとトークンを使ってフィードを表示させてみます。 デモも用意しましたので、あわせてご確認ください。

DEMO

フィードを取得したい位置に下記の要素を追加し、Javascriptを読ませてください。

HTML

<div id="instafeed"></div>

JavaScript

<script type="module">
  const business_id = "取得したビジネスIDを入力";
  const access_token = "取得したアクセストークンを入力";
  const limit        = 12; //表示させたい投稿数
  const fields = "id,caption,media_type,media_url,permalink,thumbnail_url,timestamp,children{media_type,media_url,thumbnail_url,permalink}";
 
  const feed = document.querySelector("#instafeed");
 
  const buildApiUrl = () => {
    const u = new URL(`https://graph.Facebook.com/v23.0/${business_id}/media`);
    u.searchParams.set("fields", fields);
    u.searchParams.set("limit", String(limit));
    u.searchParams.set("access_token", access_token);
    return u.toString();
  };
 
  const renderItem = (d) => {
    const type  = d.media_type;
    let media   = d.media_url;
    let thumb   = d.thumbnail_url ?? "";
 
    if (type === "CAROUSEL_ALBUM" && d.children?.data?.length) {
      const first = d.children.data[0];
      media = first.media_url;
      thumb = first.thumbnail_url ?? thumb;
    }
 
    const col  = document.createElement("div");
    col.className = "col"; //class名設定（カラム）
 
    const a = document.createElement("a");
    a.className = "feed-card card"; //class名設定（リンク）
    a.href = d.permalink;
    a.target = "_blank";
    a.rel = "noopener";
 
    const frame = document.createElement("div");
    frame.className = "feed-card-inner"; //class名設定（リンク内div）
 
    if (type === "VIDEO") {
      const v = document.createElement("video");
      v.src = media;
      if (thumb) v.poster = thumb;
      v.muted = true;
      v.playsInline = true;
      v.autoplay = true;
      v.loop = true;
      v.preload = "metadata";
      frame.appendChild(v);
 
    } else {
      const img = document.createElement("img");
      img.src = media;
      img.alt = "";
      frame.appendChild(img);
    }
 
    a.appendChild(frame);
    col.appendChild(a);
    return col;
  };
 
  const setupAutoplay = () => {
    const videos = [...document.querySelectorAll(".feed-video, .feed-card video")];
    if (!videos.length) return;
 
    const io = new IntersectionObserver((entries) => {
      for (const entry of entries) {
        const v = entry.target;
        if (entry.isIntersecting) v.play().catch(() => {});
        else { v.pause(); v.currentTime = 0; }
      }
    }, { threshold: 0.5 });
 
    videos.forEach(v => io.observe(v));
  };
 
  try {
    const res = await fetch(buildApiUrl(), { cache: "no-store" });
    if (!res.ok) throw new Error(await res.text());
 
    const { data = [] } = await res.json();
    feed.replaceChildren(...data.map(renderItem));
    setupAutoplay();
  } catch (err) {
    console.error("[Instagram Feed Error]", err);
    feed.innerHTML = `
      <div class="col">
        <div class="alert alert-warning mb-0">Instagramを読み込めませんでした。</div>
      </div>`;
  }
</script>

Javascriptでは下記のような処理を行っています。

  • Instagram APIからデータを取得し、画面に並べる
  • 投稿内容に応じて表示内容を切り替え（動画ならスクロールにあわせて自動再生させ、カルーセルなら1枚目を表示）
  • 取得に失敗したら、画面上にエラーメッセージを表示させる

そして、取得したIDとトークンはここで使用します（Javascript内 2,3行目）。 デモではjs内にIDとトークンをベタ書きしていますが、これだとソース上から簡単に見えてトークン発行時に設定したアクセス許可の種類(※)によっては悪用されてしまう可能性があります。 今回は割愛しますが、IDとトークンをphpファイルに記述しプロキシ化することで、悪用のリスクを抑えることができます。 ※：コメントの取得や返信、投稿の許可など

終わりに

いかがでしたでしょうか。 今回は「InstagramフィードをWebサイトに表示する手順」を、2025年版としてまとめました。 SNSの仕様変更は頻繁に行われるため、最新のドキュメントを確認しながら導入いただくのが安心です。 本記事が、Instagramを活用したサイト運用のお役に立てば幸いです。 ぜひ自社サイトにフィードを埋め込み、より魅力的な情報発信につなげてみてください。

  • Author
    Taku Matsumura
Prev
Back to list
Next