※この記事の手順・画面は2022年時点のものです。Webflowの現行UIでは名称・配置が変わっている場合があります。特にInstagram連携のAPIはMetaによる大きな仕様変更が繰り返されているため、現行仕様は必ずMetaの公式ドキュメントで確認してください。
こんにちは。Webflow専門家のマサトです。今回は上記のような悩みを解決します。
✅この記事の内容
- WebflowにInstagramを埋め込む方法
- 埋め込んだInstagramを自動更新させる方法
Instagramを自動更新させる方法は2通りあります。それは以下の通り。
- カスタムコードを使用する方法
- WebflowのCMSを使用する方法
僕がおすすめする方法は①です｡理由は簡単かつ無料だから。この方法で作成していく方が柔軟性があるのでこちらで作っていきましょう。
この記事の要点
- WebflowへのInstagram埋め込みとは
- WebflowへのInstagram埋め込みとは、カスタムコード（JavaScript）を使ってInstagramの投稿をサイトに表示し自動更新させる方法で、全6ステップ・完全無料で実装できます。WebflowではPHPが使えないためJavaScriptを使用します。
目次
【コピペで完了】Webflowに埋め込んだInstagramを自動更新させる方法
- 【STEP1】Instagramをプロアカウントにする
- 【STEP2】Facebookアカウントと連携させる
- 【STEP3】Facebook for Developersにログインして各コード取得
- 【STEP4】Instagramのアクセストークンを延長する
- 【STEP5】Instagramを読み込むJSコードをWebflowに記入する｜独自
- 【STEP6】Webflow内でInstagramの写真表示箇所を作成する｜独自
※WebflowではPHPは使用不可なのでJavaScriptを使用します｡
最後のWebflowに記載する工程は「公開するだけ」と思いきや､デカイ落とし穴があったので実際の経験を基に落とし穴の回避法を紹介していきます。
【STEP1〜2】Instagramのプロアカウント化とFacebookアカウント連携
参考サイト①を参考に作成してほしい｡
【STEP3】Facebook for Developersにログインして各コード取得
STEP3のアクセス許可は以下の項目を使用しました。
- pages_show_list
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_manage_posts
【STEP4】Instagramのアクセストークンを延長する
アクセスコードの延長は参考サイト③を使用して延長できる｡参考サイト③の“有効期限無制限のアクセストークンを取得"の項目を探し､有効期限無制限のアクセストークンを取得しよう｡
すぐ下にInstagramプロアカウントIDの取得方法が記載されているので､併せて確認するとスムーズに進められる｡
ここまでで以下のコードをメモしていることを確認しよう｡
- InstagramプロアカウントID
- アクセストークン(期限：無制限)
（2026年追記: この記事の公開後、Meta側でInstagram連携APIの大きな仕様変更がありました。上記のアクセス許可項目やアクセストークン取得・延長の手順は現行仕様と異なる場合があります。実装前に必ずMetaの公式ドキュメントで現行仕様を確認してください。）
【STEP5】Instagramを読み込むJSコードをWebflowに記入する
参考サイト①②好きな方のJSコードをWebflowに記入して該当の項目にここまでで取得したコードを記入する｡
記入するJSコードは必ず､ページの詳細設定を開き､Before </body> tagの項目に記入しよう｡
【STEP6】Webflow内でInstagramの写真表示箇所を作成する｡
今回使用するJSコードは指定したHTMLコードに画像を自動で読み込むものです｡そのため､Webflow上でDivを入れて指定のクラスを作成する必要があります｡
・Webflow内の作業
Divブロックを入れてクラスを参考サイト①の場合「insta_list」､参考サイト②は「Instagram」にする
・カスタムコードを入れる場所
ページの詳細設定を開き､Before </body> tagの項目にJSを記入｡JSはここ以外に使用してもうまく動作しません｡
カスタムコードを使用せず､レイアウト変更する方法
親「Instagram」を使用してレイアウトを完結させる方法だ｡方法は簡単､親を「Grid」にして一枠の大きさを指定する方法だ｡
まぁとても単純で誰でも思いつく方法だが､俺はこの方法が一番おすすめだ｡理由はWebflow内部で完成のデザインが想像しやすいから｡
実際に以下の写真は俺が友人のサイトを作成した際に使用した方法だが空欄になっている部分に写真が入るとわかりやすくなっている｡
2026年10月追記: Instagram連携APIの今の状況と代わりの方法
（2026年10月追記）Metaは個人アカウント向けの「Instagram Basic Display API」を2024年12月4日で提供終了しました。Metaの告知では、終了後はすべてのリクエストが失敗し、個人向けアプリで使えるInstagram APIはなくなるとされています（出典: Meta for Developers「Instagram Basic Display APIに関する最新情報」2024年9月4日・2026年10月5日に確認）。
この記事のSTEP3は、Facebook for Developersで instagram_basic・pages_show_list などのアクセス許可を使う、Facebookページ連携型の方法です。公式の案内では、この方式は今も「Facebookログインを使ったInstagram API」として提供されています。ただし記事の手順は2022年時点のものなので、画面や手順の細部は変わっている可能性があります。
公式の案内で今使える方法は次の2つです。どちらもInstagramのプロアカウント（ビジネスまたはクリエイター）が前提で、個人アカウントのままでは使えません。
- Facebookログインを使ったInstagram API: Facebookページに連携したプロアカウント向け。アクセス許可は instagram_basic・pages_show_list・pages_read_engagement など（この記事の手順はこちらの系統）
- Instagramログインを使ったInstagram API: Facebookページがなくても使える。アクセス許可は instagram_business_basic など
アクセストークンも、公式の案内では短期トークン（有効期限1時間）を長期トークンに交換し、長期トークンは60日間有効で、期限が切れる前に更新する形です。STEP4の「有効期限無制限のアクセストークン」は公式の概要ページには載っていないため、サイトに組み込むなら60日以内に更新する仕組みを用意しておきましょう（出典: Meta for Developers「Instagramプラットフォームの概要」2026年9月28日更新・2026年10月5日に確認）。
まとめ：ノーコードWebflowに埋め込んだInstagramを自動更新させる方法
Instagramの導入は今後さらに需要が増すと思われる｡そのため今のうちからやり方を把握しておこう｡
ちなみにこの情報はWebflow質問コーナーでも回答がでていないもので､多くの方に需要があると思われる｡「どうにか英語記事にできないか」､そんなことを思いつつ最近は日本一周を楽しんでいる｡
もしあなたがノマドワーカーに興味があれば俺のライフスタイルの記事も読んで見てほしい｡案外今より固定費が下がるかもしれないぞ｡
（2026年追記: 現在は宮城県塩竈市を拠点に、株式会社Web春を経営しています）
Webflowの制作依頼なども受けつけているので制作に困った方はフォームより質問・依頼などをしていただければ幸いだ｡それではまた｡
この方法を実践するのに参考にしたサイトは以下の2つです｡
制作実績
よくある質問
WebflowにInstagramを無料で埋め込めますか？
はい、カスタムコードを使う方法なら完全無料で行えます。自動更新の方法はカスタムコード方式とWebflow CMS方式の2通りありますが、簡単かつ無料で柔軟性があるカスタムコードの方法がおすすめです。
Instagramのアクセストークンの有効期限はどうすればいいですか？
記事の手順では参考サイトの方法で「有効期限無制限のアクセストークン」を取得していました。2026年10月時点の公式の案内では、長期アクセストークンの有効期限は60日間で、期限が切れる前に更新する形です。サイトに組み込むなら定期的に更新する仕組みを用意してください。
埋め込んだ写真を表示するにはWebflow側で何を作ればいいですか？
JSコードは指定したHTMLコードに画像を自動で読み込むため、Webflow上でDivブロックを入れて指定のクラスを作成します。クラス名は参考サイト①の場合「insta_list」、参考サイト②の場合「Instagram」です。
InstagramのJSコードはWebflowのどこに記入しますか？
ページの詳細設定を開き、Before
