カラーミーショップにインスタ画像を埋め込む方法 (新ver.)

情報発信やブランディングにSNSを利用しているお店はとても多いです。
FacebookやTwitterですと、公式の機能で、ウィジェットが提供されています(このブログの右にも、Facebookウィジェットが設置してあります)。はじめての人でも簡単に貼り付けられる機能ですね。

Instagram(インスタグラム、インスタ)も人気のSNSですが、こちらは公式のウィジェットはありません。
ということで、非公式のSnapWidgetを使っている方が多いように思います。
とても簡単に設置できる反面、無料プランだと広告が付きます。

そういう理由から、別の方法について検討しました。

instagram top

Instagramの画像を取ってくる3つの方法

ウィジェット

SnapWidgetInstaWidgetなどがサービスを提供しています。
設置はとても簡単で、5分もかからず設置することができます。
デメリットは、無料プランは広告が付く、デザインはある程度決められているところ。

API(Application Programming Interface

どのウェブサービスでも、わりと付いています。Instagramにも、公式で付いている機能。
「ウェブサービス間でデータのやり取りをするためにあらかじめ用意された機能」のようなものです。
プログラミングが必須で、3つのなかで一番難しい方法になります。
アプリケーションを作成して実行するため、アプリの置き場所としてウェブサーバーを借りる必要があります。
追記)Instagram APIについては2020年までに段階的に廃止されることが告知されています。
今後はInstagram Graph APIというものに移行するそうですが、個人でどうこうするのは厳しそうに感じました。(作成したアプリケーションの審査が必要になそうです)。

RSS配信+YQL

APIを使うよりは比較的楽に設置できる上、ウィジェットみたいにデザイン面の制約もありません。
このあとの説明は難しく感じるかもしれませんが、設置するだけでしたらコピペです(CSS、JavaScriptを学習しているとバッチリ)。

今回はこれを使って、インスタ画像を埋め込む方法について紹介します。

前段階として、InstagramをRSS配信するサービスについて

RSS配信(RSSフィード)はブログではすでにおなじみです。
私はfeedlyというRSSリーダーでブログの更新記事を読んでいますが、そういう使い方ができるのも、ブログが決まったフォーマットで情報を配信しているからです。

一方で、InstagramはRSS配信していません。更新情報をRSS配信するところから検討することになります。
ネット検索すると Feed43 という無料サービスが見つかりましたので、そちらを借りることにします。
RSS Feed43」というキーワードで検索すると解説がたくさん見つかります。詳細はそちらを参照ください。

作業が少しだけややこしいですが、その部分はこのページでも例示します。

1. まずは Feed43 のページを開きます

「Create your first RSS feed」をクリック。利用規約に同意して「Continue」。

2. このサービスを利用するURLを入力する

Address欄にURLを入力して「Reload」。例ではnaeco.jpのインスタアカウントを試します。

Feed43のEdit画面

3. Page Sourceの表示結果を確認する

ごちゃごちゃとした文字列がPage Source欄に表示されます。

Feed43ページソース

中段あたりの選択範囲内(青背景部分)が必要なデータです。
インスタページURLのショートコード("shortcode")、画像URL("display_url")などが含まれています。
日付("taken_at_timestamp")はタイムスタンプで取得しますので、変換してから使用してください。

選択範囲内には不要データとして、comments_disabled、dimensionsも含まれますが、これらもいったん抽出します。

4. 抽出するパターンを定義する

Page Sourceで範囲選択した部分を、Item (repeatable) Search Pattern欄にコピぺして、抽出データ部分を{%}に置き換えます。準備が整いましたら「Extract」。

Feed43抽出パターン定義

Item (repeatable) Search Pattern 例

"shortcode":"{%}","edge_media_to_comment":{%},"comments_disabled":{%},"taken_at_timestamp":{%},"dimensions":{%},"display_url":"{%}","edge_liked_by":{%},"edge_media_preview_like"

上手くいけば、データ抽出できているのが確認できます。

Feed43抽出結果

5. 出力用フォーマットを定義する

{%?}は上画像の赤字部分と対応しています。セットする欄は二つ。
・Item Link Template欄にクリック時のリンク先(https://www.instagram.com/p/ショートコード)
・Item Content Template欄に画像URL、お気に入り数、コメント数

それ以外は使いませんので、適当に欄を埋めてください。
「Preview」で結果を確認してみましょう。

Feed43フォーマット定義

6. RSS配信の準備完了

結果を確認して、問題なければ準備完了です。
あとで使うFeed URLはメモしておきます。

Feed43プレビュー

RSS配信を受け取るためのYQL

RSS配信が確認できれば、次は表示するウェブサイトで受け取る必要があります。
具体的には、YQL(Yahoo Query Language)というサービスを利用します。

取ってくるところの細かい話をすると、JSONP、クロスドメインなどの説明が必要になりますが、ここでは省略します(設置するだけなら知らなくても問題ありません)。

自分であれこれいじりたいときは、YQLの資料を読み込んでからいじるとよいでしょう。YQL、RSSで検索すると、参考になるウェブサイトが多数見つかります。

サンプルコード

jQuery, JavaScript

$(function(){
  $.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
    q: "select * from rss where url='https://feed43.com/????????????????.xml'",
    format: "json"
  }, function(json) {
    var container = document.getElementById('feed');

    for (var i = 0; i < json.query.results.item.length; i++) {
      var entry = json.query.results.item[i];
      var imgsrc = entry.description.slice(0,entry.description.indexOf('{\"count\":'));
      var like = entry.description.slice(entry.description.indexOf('{\"count\":')+9,entry.description.indexOf('}{'));
      var comment = entry.description.slice(entry.description.indexOf('}{')+10,entry.description.lastIndexOf('}'));
      container.innerHTML += '<div class="insta"><a href="' + entry.link + '" target="_blank"><img src="' + imgsrc + '" /><div class="overlay"><ul class="edge_media"><li class="icon_lc"><span>'+ like +'</span><span class="mar-r7 spriteHeart"></span></li><li class="icon_lc"><span>'+ comment +'</span><span class="mar-r7 spriteSpeechBubble"></span></li></ul></div></a></div>';
    }
  });
});

HTML

<div id="feed"></div>

CSS

#feed {
  width: 100%;
  clear: both;
}
#feed .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  height:100%;
  margin:0;
  opacity:0;
  padding:0;    
  position: absolute;  
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#feed div:hover.overlay {
  opacity: 1;  
  width: 100%;
  z-index: 100;
}
.insta {
  float: left;
  margin: 1%;
  position: relative;  
  width: 31.33333%;
}
.insta img {
  width: 100%;
}
.edge_media {
  align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  height: 100%;
  margin:0 0 0 15px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}
.icon_lc {
  color:#fff;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin-right: 30px;
}
.mar-r7 {
  margin-right: 7px;
}
.spriteHeart {
  background-repeat: no-repeat;
  background-position: -19px 0;
  height: 19px;
  width: 19px;
}
.spriteSpeechBubble {
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 19px;
  width: 19px;
}
.spriteHeart, .spriteSpeechBubble {
  background-image: url(https://img21.shop-pro.jp/PA?????/042/etc/sprite_icon_lc.png);
}

解説と表示結果

q: "select * from rss where url='https://feed43.com/????????????????.xml'",
ご自身のFeed URLをセットします。

var container = document.getElementById('feed');
HTMLのid属性値(id="feed")と対応しています。

container.innerHTML += '<div class="insta"><a href="' + entry.link + '" target="_blank"><img src="' + imgsrc + '" /><div class="overlay"><ul class="edge_media"><li class="icon_lc"><span>'+ like +'</span><span class="mar-r7 spriteHeart"></span></li><li class="icon_lc"><span>'+ comment +'</span><span class="mar-r7 spriteSpeechBubble"></span></li></ul></div></a></div>';
ここでレイアウトを変えたり、class属性を付けたりします。

https://img21.shop-pro.jp/PA??????/042/etc/sprite_icon_lc.png
ハート&コメントアイコンはご自身のファイル置き場においてください。

表示結果は下図のとおり。

インスタグラムの表示テスト
HTML(<div id="feed"></div>)をインスタ画像を埋め込む場所に書けば表示されます。

カラーミーショップに実装したページを作りました。参考にどうぞ。
参考)https://naeco.shop-pro.jp/?mode=f1

今回のまとめ

今回の流れはこんな感じです(あまり厳密ではないので軽く)。
Instagram→Feed43→YQL→jQuery→カラーミーショップ(HTML)

Feed43、YQLは無料で使えますし、ユーザー登録などの面倒な手続きがないところも使いやすいです。
デザイン面での自由度が高く、ウィジェットでは調整できない部分も作りこむことができます。
そういう要望があるときは検討されてはいかがでしょうか。

ブログは最初からRSS配信していますので、今回のInstagramよりも簡単にできます。
たとえば、ブログのRSSをカラーミーショップのお知らせとして埋め込みたい場合は、YQLを使ってRSS配信を取ってくると楽に実装できます。
作りこめば、サムネイルやタイトルなどを表示して並べることが可能です。
参考)カラーミーショップにブログ記事を表示する方法(YQL編)

RSS配信+YQLのデメリット・注意点は、
・利用している無料サービス(Feed43、YQL)が突然終了するかもしれない点
・YQLの規約でPublicユーザーは2,000リクエスト/1時間までという制約
・サービスが止まっていると反映しないことも(即反映するときもありますし、一日くらい反映しないときもあります。反映タイミングが謎)

追記)これまで利用していたサービス(FEED.EXILEED.COM)が停止したので、記事を全体的に書き直しました。

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。