こんにちは、大阪電気通信大学で学生広報スタッフをしていますYoshimasaです。
今回以下のようなInstagramの埋め込みを表示するシステムを開発したので軽く技術的な面で書いてみようと思います。
Instagram 埋め込み表示

今回はライブラリが豊富なPythonを使って楽をしてプログラムを作りました。
利用しているライブラリとしては、instagrapiというPythonライブラリです。これは、InstagramのAPIを簡単に扱うことが出来るライブラリです。

また、このライブラリを選んだ理由としてInstagramのログインをせずにユーザーの画像を取得することが出来た点が大きいです。
私が最初にInstagramからデータを取得しようとした際にログインを必要とするライブラリを利用していました。
最初はそれでも十分取得できたのですが、少しするとInstagramのアカウントが凍結されました。

そのため、回避をするためにログイン不要でかつ簡単にInstagramのデータを取得することが出来るinstagrapiを見つけたためこれを利用しています。

from instagrapi import Client

cl = Client()
posts = cl.user_medias("InstagramのユーザーID", 30)

サイトにPythonで処理したデータを表示するために、JSON形式にPythonで一度再形成しています。

postsArray = []
for post in posts:
    thumbnail_url = ""
    if post.thumbnail_url != None:
        thumbnail_url = str(post.thumbnail_url)
    else:
        thumbnail_url = str(post.resources[0].thumbnail_url)
    postData = {
        "date": post.taken_at.isoformat(),
        "caption": post.caption_text,
        "likes": post.like_count,
        "thumbnail": thumbnail_url,
        "id": post.code,
    }
    postsArray.append(postData)

また、Instagramの画像に関しても一度S3ドライブに保存してその画像を読み込むようにしています。
※ Instagramの画像がCORSでうまく表示できなかったため。

PythonでS3にデータを保存するには、botoというPythonライブラリを利用します。
この説明は割愛します。（ググったら沢山情報出てくるはずです。）

最終的に出来るJSONデータは以下のようなデータになります。

{
  "updated_at": 1738656014,
  "latest_posts": [
    {
      "date": "2025-02-04T04:35:52+00:00",
      "caption": "D専攻学生広報突撃インタビュー！\n3回目は寶珍先生に突撃しました^ ^\n\n#大阪電気通信大学 #oecu #学生広報 #建築学科 #インタビュー #寝屋川",
      "likes": 1,
      "thumbnail": "Instagramの画像URL",
      "id": "DFo0BdpyGCb"
    },
    {
      "date": "2025-02-04T04:00:00+00:00",
      "caption": "基礎理工学科の先生をリレー形式で取材！\n第3回は、森田先生にインタビュー\n\nパートを分けてお届けします！今回はパート3！\n\n化学のおもしろいトコロ\n\n出演 : 森田先生, まな, れね\n編集 : Yoshimasa\n\n #大阪電気通信大学 #学生広報 #寝屋川  #基礎理工学科  #リケジョ #インタビュー",
      "likes": 4,
      "thumbnail": "Instagramの画像URL",
      "id": "DFov9kFSCM8"
    },
    { "省略": "" }
  ]
}

そして、JavaScriptで以下のようなコードで表示させています。

let listElm = document.getElementById("ysms_instagram_list");
let getData = await fetch("https://files-oecu.ysms.dev/instagram_oecu_kouhou/data.json");
let dataJson = await getData.json();
for (const postKey in dataJson.latest_posts) {
  if (postKey > 8) continue;
  let post = dataJson.latest_posts[postKey];
  listElm.innerHTML += `
      <a rel="nofollow" href="https://instagram.com/p/${post.id}/" target="_blank">
          <img src="https://files-oecu.ysms.dev/instagram_oecu_kouhou/${post.id}.jpg" loading="auto" alt="${post.caption.substring(0, 20)}..." width="100%">
          <div class="ysms_instagram_info">
            <div class="img-caption">
                    ${post.caption.substring(0, 50)}...
            </div>
        </div>
      </a>
    `;
}

シンプルで簡単ですね。
これ以上説明することないと思うので、後は困ったらChatGPTにでも聞いてみてください。

じゃあね！！