メインコンテンツにスキップ
Instagramのフィードを埋め込む手順

InstagramフィードをWebサイトに埋め込む方法を解説します。外部ツール「SnapWidget」を使って、自動更新されるInstagramフィードのコードを発行し、StudioのEmbedボックスに貼り付けるだけの簡単な手順です。

Saika avatar
対応者:Saika
2か月以上前に更新

対象プラン:全プラン


Instagramフィードの埋め込み方法

注意

  • 本手順には外部サービスの手順も含まれています。外部サービスの仕様や動作、記事内の手順以外についてはチャット窓口でのサポート対象外となる可能性があります。

  • 記事内の外部サービスの画面や仕様は2022年1月時点の情報です。記事と異なる場合、外部サービスにて最新情報をご確認ください。

Studioでは現在、Instagramフィード埋め込みを行える専用の機能は提供しておりません。ただし、外部サービスの「SnapWidget」で発行した埋め込みコードをStudioのEmbedボックスに追加することで表示が可能です。

この手法はiframeを使用した埋め込みとなるため、デザインの編集はStudioではなく、SnapWidget上で行う必要があります。

SnapWidgetとは

InstagramなどのコンテンツをWebサイトに表示するウィジェットを作成するツールです。無料プランでも埋め込みコードが生成できます。

注意: 無料プランではInstagram画像をクリックした際に一度SnapWidgetサイトに遷移します。この制限を解除するには有料プランへのアップグレードが必要です。詳しくは、SnapWidget公式サイトをご覧ください。

手順

1. SnapWidgetでアカウントの作成

SnapWidget | Free widgets for your websiteへアクセスし、アカウントを作成します。

スクリーンショット:SnapWidgetでアカウントを新規作成する様子。

2. Instagram用のWidgetの選択

利用したいInstagram用のWidgetを選びます。プランによって選べるデザインが異なります。

スクリーンショット:SnapWidgetでwidgetを選択する様子。

3. Instagramアカウントとの連携

Instagramアカウントにログインし、SnapWidgetと連携します。

スクリーンショット:SnapWidgetでInstagramアカウントを連携する様子。

4. プレビューと設定の調整

プレビューを確認しながら各種設定を調整します。調整が完了したら、[UPDATE& GET WIDGET]をクリックします。

スクリーンショット:SnapWidgetで設定とデザインを調整する様子。

5. コードのコピーとStudioへの貼り付け

[COPY TO CLIP BOARD]をクリックしてコードをコピーします。

スクリーンショット:SnapWidgetで埋め込みコードをコピーする様子。

Studioへ移動し、Embedボックスをページへ配置します。ボックスを選択したまま、画面右側のパネルを開き、コピーしたコードを[埋め込みコード]にペーストします。

スクリーンショット:SnapWidgetで埋め込みコードをコピーする様子。

Tips:Embedボックスの縦幅を[auto]に設定するには? カーソルをEmbedボックスの下辺に当て、表示された青色の矢印でダブルクリックします。

スクリーンショット:Embedボックスの縦幅を調整する様子。

インスタグラム インスタ ギャラリー insta

こちらの回答で解決しましたか?