SaaS

RSS by Zapierでinstagramの内容をSTUDIOに配信する

どうも!!コード書きたくない(書けない)マーケティングのしょ〜ぞ〜です。

今回は、APIのあれこれが面倒臭いInstagramをSTUDIO上で割と簡単に無料で表示する方法を書いていきます。

STUDIOではJavaScript置けない問題があって、iFrameで埋め込む必要があるのですが、iFrameのウィジェット作成サービスって安定しなくて、STUDIOコミュニティでもみんな困っていたのでやってみました。

前提

  • Zapierのアカウントを持っている(多分Freeでもいける)
  • Instagramのアカウントを掌握している
  • STUDIOが普通に使える

特に、ZapierとInstagramを接続しなきゃなので、自分が普段管理していないInstagramアカウントだとちょと厳しいかも。Instagram for Buisinessでアカウント共有したりとか、パスワードを教えてもらったりとか(非推奨)してもらう必要があります。

手順

Zapierでの作業

  1. ZapierとInstagramをつなげる
  2. Instagramの内容をRSSにマッピングする

STUDIOでの作業

  1. RSSをSTUDIOに登録する
  2. STUDIOで良い感じにデザインする

1. ZapierとInstagramをつなげる

ZapierでCreate Zapします。

TriggerにInstagramを選択し、認証と認可をしてあげます。Trigger EventはNew Media Posted in My Account

テストして情報取れてそうだったらOK。普通にZapierの指示に従っていけばできます。

2. Instagramの内容をRSSにマッピングする

Set Up ActionでRSSの情報のどこにInstagramの情報を当て込むのかをマッピングします。めっちゃズラーっとあるんですけど、入れるべき情報は5つでよくて以下の通りで多分大丈夫です。あとはSTUDIOが良い感じに空気を呼んでくれます。

  • Feed URL(必須)
    https://zapier.com/engine/rss/0000000/<ここにすきな英数字入れる>
  • Max Records
    STUDIOに表示させたいInstagramの投稿数を入れてください。多くて、5個とかでいいんじゃないですかね。
  • Item Title (必須)
    Captionを選択。STUDIO上で表示されるInstagramの投稿文です。
  • Source URL(必須)
    Permalink を選択。STUDIO上で表示しているInstagramの投稿をクリックしたときに飛ぶリンクです。Slackとかもそうですけども、SNSってそれぞれの投稿にユニークな(一意の、この世で一つの)URLを払い出してて、そのURLがここに入る感じです。
  • Content(必須)
    Media URL を選択。

※ここいらないかもですが、必須なのでなんとなく入れています。詳しい人教えて!本当はきれいにマッピングしたいんですけど、なぜかXMLにうまく反映されないので、とりあえずここで。2021/07/13現在。

3. RSSをSTUDIOに登録する

RSSをSTUDIOに登録します。RSS のURLは、ZapierのSetup Actionの上の方にありますのでコピーして、STUDIOの新規RSS追加から、Zapier RSSのURLをペーストします。

※ちなみにこのRSSのURLに普通にアクセスすると、下記のような感じでXML(簡単なデータをやりとりするのにすごい良い感じの言語)が表示されます。ここの情報をSTUDIOが表示してくれる仕組みですね。

4. STUDIOで良い感じに表示させる

すると、まずはこんな感じで出てきます。画像の部分を Media Thumbnail から、Enclojsure_URLにします。すると画像が出ます!

だけど、数を増やせません!なんでや…!!?

そりゃそうで、RSSが発行されたのはたった今で、Zapierで作成したのは、「新しく投稿されたInstagramの情報をRSS Feed する」というもので、過去の情報なんてあるわけもなく、作る時にテストした1つの投稿だけです。

ここから、投稿するたびに新しい情報がXMLに記述され増えていきますので、

  1. ZapierでRSS Feedを作る
  2. Instagramで表示させたい数だけいくつか投稿する
  3. STUDIOでデザイン

という流れがスムーズだと思います。

いくつか投稿すると、XMLが更新されて表示アイテム数を増やせるようになります。ただし、STUDIOのデザインエディタ画面とプレビュー画面ではRSSは更新されないので、更新ボタンを押す必要があります。

※本番では毎回更新されますのでご安心を。

更新すると、下記のようにちゃんと表示されます。

それでもすぐに表示させたい

過去の投稿もすぐクライアントに見せたいんじゃーっていう時はどうするかというと、すごく説明がしずらいのですが、Zapierで、TriggerのTestでMediaを順番に選択して過去の投稿をテストしていき、RSSに情報を書き足していきます。

(これ、本当に説明しずらいのでこれで勘弁してください。)

たとえば、STUDIOで4つの投稿を表示させたかったら、Instagramの投稿がA,B,C,Dで並んでいますので、Zapier上でそれらを順番にD→C→B→Aとテストしていくことで、XMLにその順番で書き加えられていきます。

これちょっとうまく伝えられないので、普通にZapier RSSを作った後に、投稿しまくるのがいいと思います…!ごめんなさい、こういう処理はZapierは苦手みたいです!

わかんなかったら、STUDIOのSlackコミュニティで聞いてみてください。わたしが答えます!

最後に

Zapierはトリガーとアウトプットが単純で、そんなにリアルタイム性を求めない時にいいかなーって思います。

Zapierは実行されたタスクの数の上限がプランによって決まっていて、Free Planでも100/monthなので、月に100回以上投稿しなければ大丈夫かと思います。

応用して、この他のSNSなんかの情報も取れれば夢が広がりそうですよね。

レッツノーコードライフ!

しょ〜ぞ〜

新米マーケティングです。飲食店とかの企画や販促、デザインや写真などいろいろやっていました。気付いたら入社していました。よくそれでここまで生きてこられたね、ってたまに言われます。人に言える趣味は料理ぐらいです。