StudioのサイトにInstagramを埋め込む方法は2通りあります。
- 投稿を1件だけ表示する：Studioの「Instagram」ボックスに、Instagramの埋め込みコードを貼ります。
- 最新の投稿を一覧で表示する：SnapWidgetのウィジェットのコードを、Studioの「Blank」の埋め込みボックスに貼ります。Instagramに投稿するたびに、サイトの表示も自動で新しくなります。
この記事では、日本語のStudioエディタの画面で手順を説明します。フィードを埋め込む手順は、Studioの無料プラン（Free）のプロジェクトで確かめました。
2つの方法の違い
投稿の埋め込み（Studioの「Instagram」ボックス）
- 表示する内容：選んだ投稿1件（写真、動画、リール）
- 新しい投稿：自動では増えません。表示したい投稿ごとにボックスを追加します。
- 条件：公開アカウントの投稿であること
- 料金：無料
フィードの埋め込み（SnapWidgetのウィジェット）
- 表示する内容：アカウントの最新の投稿の一覧（グリッド、スライドショーなど）
- 新しい投稿：自動で表示されます。無料ウィジェットは15分ごと、有料ウィジェットは5分ごとに更新されます。
- 条件：Instagramのプロアカウント（クリエイターまたはビジネス）
- 料金：無料で使えます。有料プランは月8ドルからです。
方法1：Instagramの投稿を1件埋め込む
- パソコンかスマートフォンのブラウザでinstagram.comを開き、埋め込みたい投稿を表示します。Instagramのアプリでは、埋め込みコードをコピーできません。
- 投稿の「…」メニューをクリックし、「埋め込み」を選んで、表示されたコードをコピーします。
- Studioのエディタで、左のナビゲーションの追加アイコンをクリックします。「基本」タブの「埋め込み」セクションで「Instagram」をクリックします。
- 追加したボックスを選び、右パネルの「埋め込み」タブで、「埋め込みコード」の「エディタを開く」をクリックします。
- 「埋め込みコードを編集」画面の左側にもともと入っている文字を消して、コピーしたコードを貼り、「保存」をクリックします。
投稿のリンクからコードを作ることもできます。Instagram埋め込みコード生成ツールに投稿かリールのリンクを貼ると、コードができます。
埋め込めるのは、公開アカウントの写真、動画、リールの投稿です。ストーリーズや非公開アカウントの投稿は埋め込めません。くわしくはInstagramをホームページに埋め込む方法を見てください。
方法2：Instagramのフィードを埋め込む（自動で更新）
Studioの「Instagram」ボックスで表示できるのは、投稿1件だけです。最新の投稿を一覧で表示するには、フィードを表示するツールのコードを「Blank」の埋め込みボックスに貼ります。ここでは、20万以上のサイトで使われているSnapWidget（スナップウィジェット）での手順を説明します。
始める前に：プロアカウントに切り替える
Metaは2024年12月4日に、個人アカウント用のAPIを終了しました。そのため、SnapWidgetなどのツールでフィードを表示するには、プロアカウント（クリエイターまたはビジネス）が必要です。切り替えは無料で、フォロワーと投稿はそのまま残ります。
Instagramのアプリで、プロフィールのメニュー（≡）から「設定とアクティビティ」、「アカウントの種類とツール」、「プロアカウントに切り替える」の順にタップします。
SnapWidgetでウィジェットを作る
SnapWidgetの管理画面は英語です。ボタンの名前は、画面と同じ英語で書きます。
- SnapWidgetに無料で登録します。クレジットカードはいりません。
- 「Create A New Widget」をクリックし、Instagramのレイアウトを選びます。無料ウィジェットでは、グリッド、ボード、スライドショー、スクロール、ポップアップを使えます。
- 「Username」欄をクリックし、Instagramでログインします。
- 写真のサイズと間隔を設定し、「Preview」で表示を確かめます。
- 「Get Widget」をクリックし、埋め込みコードをコピーします。
Studioにコードを貼る
- Studioでプロジェクトを開き、ウィジェットを表示したいページを開きます。
- 左のナビゲーションの追加アイコンをクリックし、「基本」タブを選びます。「埋め込み」セクションの「Blank」をクリックすると、ページに埋め込みボックスが追加されます。
- 追加したボックスを選んだまま、右パネルの「埋め込み」タブで、「埋め込みコード」の「エディタを開く」をクリックします。
- 「埋め込みコードを編集」画面の左側にもともと入っている
<iframe src=""></iframe>を消して、SnapWidgetのコードを貼ります。右側の「プレビュー」に写真が並んだら、「保存」をクリックします。
- 右パネルの「ボックス」タブを開きます。「レイアウト」の「幅」を「100 %」にし、「高さ」の単位を「auto」にします。ボックスの高さが、ウィジェットの高さに合わせて自動で変わります。
- ライブプレビューで、パソコンとスマートフォンでの表示を確かめます。
- 右上の「公開」をクリックして、サイトを公開します。すでに公開しているサイトでは、サイトを更新するまで変更が反映されません。
一度貼れば、新しい投稿は自動でウィジェットに表示されます。投稿のたびにStudioを編集する必要はありません。
手順5でボックスの大きさを変える理由
SnapWidgetのコードには <script> タグがあります。そのため、コードを保存すると、右パネルの「埋め込みタイプ」が「iframe」から「sandbox」に変わります。追加したばかりのボックスは幅320px、高さ180pxなので、そのままではウィジェットの下が切れます。幅を「100 %」、高さを「auto」にすると、パソコンでもスマートフォンでも、ウィジェット全体が表示されます。
ウィジェットの下にグレーの線が出るとき
埋め込みボックスには、最初から薄いグレーの背景色（#EEEEEE）が付いています。スマートフォンの幅では、この色がウィジェットの下に細い線として見えることがあります。「ボックス」タブの「外観」で、「背景色」の「100 %」を「0 %」にすると、線が消えます。
うまく表示されないとき
ウィジェットが表示されるまで時間がかかる
Studioは、ページを開いてから数秒たってから、埋め込みボックスを読み込みます。公開したサイトでは、ボックスがある位置までスクロールしたときに読み込みます。少し待ってから、表示を確かめてください。
ウィジェットの下が切れる
「ボックス」タブで、「高さ」の単位が「auto」になっているか確かめます。高さがpxのままだと、その高さでウィジェットが切れます。
公開したサイトに変更が出ない
すでに公開しているサイトでは、サイトを更新するまで、エディタでの変更は反映されません。右上の「公開」から、サイトを更新してください。
写真をクリックしたときの動作
Studioの埋め込みボックスでは、リンクに target 属性がないと、ボックスの中でページが開きます。SnapWidgetのウィジェットのリンクは新しいタブで開く設定なので、コードを書き換える必要はありません。
投稿の埋め込みが表示されない
アカウントが非公開になった、投稿が削除された、または投稿者が埋め込みをオフにした可能性があります。
無料プランと有料プラン
無料ウィジェット
- InstagramとFacebookに対応しています。
- レイアウトは、グリッド、ボード、スライドショー、スクロール、ポップアップです。
- 表示回数に上限はありません。
- 15分ごとに新しい投稿を読み込みます。
- 写真をクリックすると、SnapWidgetのページが開きます。
有料プラン（すべて14日間の無料トライアル付きで、いつでも解約できます）
- Lite：月8ドル（Proウィジェット1個）
- Pro：月14ドル（Proウィジェット20個）
- Developer：月99ドル（Proウィジェット250個）
- フィードのレイアウト、写真からInstagramへのリンク、ライトボックスが使えます。
- 5分ごとに新しい投稿を読み込みます。
- ProとDeveloperでは、ハッシュタグウィジェットも作れます。
料金と機能はSnapWidgetのトップページで確かめられます。WordPressのサイトに貼る場合は、WordPressにInstagramを埋め込む方法を見てください。
よくある質問
StudioにInstagramのフィードを埋め込めますか？
はい。Studioの「Instagram」ボックスで表示できるのは投稿1件です。最新の投稿を一覧で表示するには、「Blank」の埋め込みボックスにSnapWidgetのコードを貼ります。
Studioの無料プランでも使えますか？
Freeプランのプロジェクトで、「Blank」の埋め込みボックスにSnapWidgetのコードを貼り、エディタとライブプレビューで表示できることを確かめました。Studioの料金表で、Freeプランで使えないと書かれているのは、サイト全体に入れる「カスタムコード」です。埋め込みボックスは料金表にありません。SnapWidgetのウィジェットも無料で作れて、表示回数に上限はありません。
ウィジェットが途中で切れて表示されるのはなぜですか？
追加したばかりの埋め込みボックスは、幅320px、高さ180pxです。「ボックス」タブで「幅」を「100 %」、「高さ」を「auto」にすると、ウィジェット全体が表示されます。
スマートフォンでも表示されますか？
はい。「幅」を「100 %」、「高さ」を「auto」にすると、画面の幅に合わせて写真の大きさと高さが変わります。
個人アカウントでもフィードを表示できますか？
いいえ。Metaが2024年12月4日に個人アカウント用のAPIを終了したので、フィードの表示にはプロアカウント（クリエイターまたはビジネス）が必要です。投稿1件の埋め込みは、公開アカウントなら個人アカウントでもできます。
