Instagramのフィードを埋め込む方法

SnapWidgetを用いて、サイトに自動更新されるInstagramフィードを設定する方法

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

STUDIOのEmbedボックスと外部サービスのSnapWidgetを使って、サイトにInstagramフィードを埋め込むことができます。

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


SnapWidgetについて

InstagramなどのコンテンツをWebサイトに表示するウィジェットを作成するツールです。無料プランでも埋め込みコードが生成できますが、埋め込んだInstagramの画像をクリックしても直接Instagramには遷移せず、SnapWidgetの専用サイトに一度遷移する点には注意が必要です。

有料プランにアップグレードすると、この制約が解除され、さらに利用できるWidgetの選択肢が増えます。詳しくは、SnapWidget公式サイトをご覧ください。

利用方法

1. SnapWidgetに新規登録

2. Instagram用のWidgetの選択

利用したいInstagram用のWidgetを選びます。無料で利用できるものと、有料プランで利用できるものがあります。

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

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

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

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

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

最後に、「COPY TO CLIP BOARD」ボタンをクリックしてコードをコピーします。

その後、コピーしてきたコードをSTUDIOのEmbedボックスに貼り付けます。

注意点

  • Embedボックスの縦幅は「auto」に設定できます。ただし、スタイルバーの数値からは変更できません。設定するには、カーソルをEmbedボックスの下辺に当て青色の矢印が表示されたら、ダブルクリックして「auto」に変更します。

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

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