現在、RSS.app側の不具合で、正常にInstagramの画像が表示されない事例が確認されています。概要と代替案をこちらの記事でご案内しておりますのでぜひご一読ください。

STUDIO に RSS.app で Instagram を埋め込んでいるが、急に表示されなくなった


RSS連携機能を使って、Instagramの任意のアカウントやハッシュタグに紐づいた投稿の自動更新フィードをSTUDIOサイトに設置する方法を解説します。

※ 解説に登場する外部ツール rss.app を継続して利用するには、月額料金がかかります。詳しくは RSS.app の公式ページにてご確認ください。

1. RSSリンクを取得する

まずは、埋め込む内容のRSSを RSS.appというサービスで生成します。

RSS.app のホーム画面 を開き、Get Started Now > Instagram RSS Feed を選択。

特定のアカウントのフィードを設置したい場合は上の欄ににアカウントページのURLを
ハッシュタグのつけられた投稿のフィードを設置したい場合は下段の欄に目的のハッシュタグを入力して、「GENERATE」をクリックしましょう。

RSSリンクが生成されますが、実際に使用するにはサインアップが必要です。

「 Sign up to get your feed URL 」をクリックし、画面の案内に従ってアカウントを作成してください。

アカウントの認証後、RSSリンクが表示されたら、「Copy」をクリックして リンクの取得は完了です。

※ 取得したリンクは、何もしなければ7日間の無料トライアル期間ののち無効になります。継続的に利用したい場合は、RSS.appのアカウントをアップグレードする必要があります。

2. STUDIOにRSSリストを設置する

取得したRSSリンクを使って、実際にサイトにフィードを設置していきます。


プロジェクトのデザインエディターを開き、画面左・Addパネルの「新規RSSを追加 / Add a new RSS feed」をクリックします。

ポップアップが現れるので、先ほど取得したリンクをペーストしてOKをクリック。

このようにRSSボックスが現れたら、ドラッグ&ドロップでキャンバスに配置します。
(この時点では画像はブランクの表示になっています。)


画像ボックスを選択し、左上の<div>をクリックして詳細パネルを開きます。
デフォルトでは「media_thumbnail」という変数が選択されているので、画像で示したあたりをクリックします。

変数選択モーダルが開きます。この中の「media_content_url」が「投稿の1枚目の画像」を表す変数です。クリックして選択すると、RSSリストに投稿の画像が反映されます。


あとは通常のリストと同じようにデザインの編集が可能です。
キャプションや投稿者IDなどの情報も変数としてRSSリンクに含まれているので、 テキストボックスに紐付けて自由にカスタマイズをお試しください。

下記の例では、テキストを取り除き、最新の投稿9件がタイル表示されるようデザインを整えています。

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

回答が見つかりましたか?