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

自分への備忘録として作成しました。（全部無料で読めます）
ElfsightのInstagram Feed を埋め込むのに苦労したので、どなたかスタバをおごってくれたら嬉しいなと、初めて有料オプションを加えてみました笑

ノーコードツールSTUDIOにInstagramを埋め込む

STUDIOの公式では、インスタグラムの埋め込みをRSS.appを利用する事を推奨しています。当初、案内通りに埋め込んでみたのですが上手くいきませんでした・・・不具合の報告があるみたいで、 代替候補としてSnapWidgetを紹介しています。公式が埋め込み方法を出しているので安心ですね。

クライアントの希望でInstagram Feedを使うことに…

SnapWidgetの無料プランには以下のデメリットがありました。

無料の場合、表示したInstagram画像をクリックしても直接Instagramに飛ばず、一度SnapWidgetの専用サイトに遷移します。有料プランにアップグレードするとこの制限を解除したり、選択できるWidgetが増えるようです。

元々RSS.appは有料のため、気にしない人も多いかと思いますが
今回はまず無料で出来るウィジェットから選ぶことになり、ElfsightのInstagram Feedを利用することになりました。

・・・ここから、落とし穴が

Instagram Feedを設定する

gmailなどでログイン設定をし、真ん中にあるInstagram Feedを読み込みます。そしてアカウントを紐づける設定や、スライダー表示にするかグリッドにするかなど、細かな設定をして保存すると。

MY widgets の 「Add to website」(ウェブサイトに追加)で以下のコードが表示されます。

<script></script>は共通で、<div class="elfsight-app-●●●●●"></div>
の●●●●●がそれぞれ異なります。

STUDIOは<script>タグを読み込まないので、まず最初に単純にタグをiframeに変えてみましたが上手くいきませんでした。

<script>読み込まないわけですから .js は無理でした…

公式に問い合わせる

これは無理だとInstagram Feedの公式に問い合わせをしました。
（DeepL翻訳ツールの翻訳力に感謝）

公式では各ウィジェットの設定方法がチュートリアル動画になっていてGooglesiteやWixはすでにYouTubeで配信されていますが、STUDIOはまだでした。

答えてくれたのはナタリヤさん。

I would like to mention that your installation code in iframe should look the following way:

<iframe src=' https://apps.elfsight.com/widget/●●●●●' width='100%' height='1000' frameborder='0'></iframe>

Also, you can change the height value in the code above.

<iframe>タグのコードは

Instagram Feed側で【Add to website (ウェブサイトに追加)】で表示されるコードの●●●●●をコピーして
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-●●●●●"></div>

以下のコードの●●●●●に貼りつけてください。
<iframe src=' https://apps.elfsight.com/widget/●●●●●' width='100%' height='1000' frameborder='0'></iframe>

heightは変更可能です。

それをコピーしてSTUDIOのiframeボックスに貼り付けます。

表示できました！！

Instagram Feed側の設定を変更すれば、自動で反映しますので色を変えたり、表示画像の数を変えたりして調整してください。

やってみて、本来は画像の下にくるはずのアプリのリンクが画像の右にズレてしまった影響で想定よりも画像が小さくなるトラブルがありました。

そこは、ボックスのwidthを変えたり、marginを変えたりして位置とサイズを調整しました。

完成！！

この備忘録が誰かの助けになると嬉しいです。

もし良かったら「お疲れー！教えてくれてありがとー！」と私にスタバをおごってください笑

最後まで読んでいただきありがとうございました！！