ホームページにインスタグラムを埋め込むことができます。（レスポンシブ対応はご自身で工夫してみてください）
このサンプル画像は生成AIで作成しました。

特徴


縦横判定でレイアウトが崩れない。
ポップアップ機能
リスト表示、マウスオーバーでキャプション表示+動画は自動再生

ご自身で用意が必要なもの


javascriptライブラリ・Lity
<link href="css/lity.css" rel="stylesheet">
<script src="js/lity.min.js"></script>
Lity公式：https://sorgalla.com/lity/

設定方法

下記の赤字箇所を書き換えてください。
/index.php <div class="header">
<a href="インスタグラムURL" target="_blank">
<img src="img/icon_color_instagram.png" alt="インスタグラム"/>
</a>
</div>
/common/instagram.php $insta_business_id = '取得したインスタビジネスアカウントIDを入力';
$insta_access_token = '取得したインスタアクセストークン3番目を入力';

参考サイト

「Instagram Graph API」「埋め込み」で検索
Instagram・Facebookのサービス改訂による機能改修により、実際の現在の画面とは違う場合があります。
https://lpeg.info/webworks/instagram_api.html（ビジネストークンとアカウント）
https://toriton.link/coding/insta_embed/（PHP）

注記


ページが長く情報が多い場合は正しく表されない場合があります。おかしいなと思った時は、Javascriptを先頭に入れれば解消されことがあります。
Download