- WebflowへのInstagram埋め込みとは
- WebflowへのInstagram埋め込みとは、カスタムコード（JavaScript）を使ってInstagramの投稿をサイトに表示し自動更新させる方法で、全6ステップ・完全無料で実装できます。WebflowではPHPが使えないためJavaScriptを使用します。
※この記事の手順・画面は2022年時点のものです。Webflowの現行UIでは名称・配置が変わっている場合があります。特にInstagram連携のAPIはMetaによる大きな仕様変更が繰り返されているため、現行仕様は必ずMetaの公式ドキュメントで確認してください。
こんにちは。Webflow専門家のマサトです。今回は上記のような悩みを解決します。
✅この記事の内容
- WebflowにInstagramを埋め込む方法
- 埋め込んだInstagramを自動更新させる方法
Instagramを自動更新させる方法は2通りあります。それは以下の通り。
- カスタムコードを使用する方法
- WebflowのCMSを使用する方法
僕がおすすめする方法は①です｡理由は簡単かつ無料だから。この方法で作成していく方が柔軟性があるのでこちらで作っていきましょう。
【コピペで完了】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内部で完成のデザインが想像しやすいから｡
実際に以下の写真は俺が友人のサイトを作成した際に使用した方法だが空欄になっている部分に写真が入るとわかりやすくなっている｡
まとめ：ノーコードWebflowに埋め込んだInstagramを自動更新させる方法
Instagramの導入は今後さらに需要が増すと思われる｡そのため今のうちからやり方を把握しておこう｡
ちなみにこの情報はWebflow質問コーナーでも回答がでていないもので､多くの方に需要があると思われる｡「どうにか英語記事にできないか」､そんなことを思いつつ最近は日本一周を楽しんでいる｡
もしあなたがノマドワーカーに興味があれば俺のライフスタイルの記事も読んで見てほしい｡案外今より固定費が下がるかもしれないぞ｡
（2026年追記: 現在は仙台に拠点を移し、株式会社Web春を経営しています）
Webflowの制作依頼なども受けつけているので制作に困った方はフォームより質問・依頼などをしていただければ幸いだ｡それではまた｡
この方法を実践するのに参考にしたサイトは以下の2つです｡
よくある質問
WebflowにInstagramを無料で埋め込めますか？
はい、カスタムコードを使う方法なら完全無料で行えます。自動更新の方法はカスタムコード方式とWebflow CMS方式の2通りありますが、簡単かつ無料で柔軟性があるカスタムコードの方法がおすすめです。
Instagramのアクセストークンの有効期限はどうすればいいですか？
有効期限無制限のアクセストークンを取得して延長します。参考サイトの「有効期限無制限のアクセストークンを取得」の項目に手順があり、すぐ下にInstagramプロアカウントIDの取得方法も記載されています。
埋め込んだ写真を表示するにはWebflow側で何を作ればいいですか？
JSコードは指定したHTMLコードに画像を自動で読み込むため、Webflow上でDivブロックを入れて指定のクラスを作成します。クラス名は参考サイト①の場合「insta_list」、参考サイト②の場合「Instagram」です。
InstagramのJSコードはWebflowのどこに記入しますか？
ページの詳細設定を開き、Before
