カラーミーショップにインスタグラムの画像を表示する方法(中級くらい)

昨今は、SNSでショップの最新情報を発信しているお店も多いと思います。
FacebookやTwitterですと、公式の機能で、ウィジェットが提供されています(このブログの右にも、Facebookウィジェットが設置してあります)。

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

そういうこともあり、別の方法で付けてみることにしました。

instagram top

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

ウィジェット

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

API(Application Programming Interface

どのウェブサービスでも、わりと付いています。Instagramにも、公式で付いている機能。
ウェブサービス間でデータのやり取りをするためにあらかじめ用意された機能というようなものです。
プログラミングが必須で、3つのなかで一番難しい方法になります。
アプリケーションを作成して実行するため、アプリの置き場所としてウェブサーバーを借りる必要があります。

RSS配信

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

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

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

ブログはRSS配信していますが、一方でInstagramはRSS配信していません。
まずは、Instagramの更新情報をRSS配信するところから検討することになります。
ネット検索すると、InstagramのデータをRSS配信する無料サービスが見つかりますので、そちらを借りることにします。

(参照)FEED.EXILEED.COM Queryfeed

今回はFEED.EXILEED.COMのサービスを使って、RSS配信するURLを確認してみましょう。無料ですし、ユーザー登録など面倒な手続きがないのもいい感じです。

例として、Instagramアカウント naeco.jp(=ユーザーネーム)の場合。
FEED.EXILEED.COMでRSS配信された中身は下図のとおりで、決められた文章フォーマットになっています。
一般的にはRSSリーダーを通すことで、整形された見やすい記事形式に変換することができます。

http://feed.exileed.com/instagram/feed/naeco.jp

instagram rss feed

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

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

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

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

コーディング

コードをコピペすれば設置できるように作っていますので、上の説明はわからなくても問題ありません。

カラーミーショップに設置する場合は、特に何もせずとも、jQueryが使えるようになっています(別途jquery.jsを読み込む必要はありません)。

コーディングは下記を参考にしています。
(参考)Google Feed API から YQL API へ移行したお話

jQuery

$(function(){
    $.getJSON("https://query.yahooapis.com/v1/public/yql?callback=?", {
        q: "select * from rss where url='http://feed.exileed.com/instagram/feed/naeco.jp'",
        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];

            imgsrc = entry.description.match(/src='(.*?)'/igm);
            container.innerHTML += '<div class="insta">' + '<a href="' + entry.link + '" target="_blank">' + '<img ' + imgsrc + ' />' + '</a></div>';
        }
    });
});

HTML

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

CSS

#feed {
  width: 100%;
}
.insta {
  float: left;
  width: 20%;
}
.insta img {
  width: 100%;
}

解説と表示結果

q: “select * from rss where url=’http://feed.exileed.com/instagram/feed/naeco.jp'”,
naeco.jpの代わりに、取ってくるユーザーネーム入れてください。

var container = document.getElementById(‘feed’);
ここは、HTMLのid属性名(feed)と対応しています。

container.innerHTML += ‘<div class=”insta”>’ + ‘<a href=”‘ + entry.link + ‘” target=”_blank”>’ + ‘<img ‘ + imgsrc + ‘ />’ + ‘</a></div>’;
class属性名を付けたり、変わった配置をしたりするときは、ここにHTMLを書きます。
とはいえ、デザインはほとんどCSSのみでできます。

表示結果は下図のとおり。
上のHTMLを表示させたい場所に書けば、Instagramの画像がそこに差し込まれます。

instagram rss pics

今回のまとめ

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

APIほど手間はかかりませんが、これはこれで難しいと感じる方もいらっしゃるでしょう。
とはいえ、デザイン面での自由度は高く、ウィジェットでは調整できない部分も作りこむことができるはずです。そういう要望があるときには検討されるとよいと思います。

CSSとJavaScriptがわかれば、デザインする上では支障ないと思います。
YQL、JSONP、クロスドメインについては、グッと難しくなってきますので、あまり触れません。

ブログは最初からRSS配信していますので、今回のInstagramよりももう少し簡単にできます。
ブログのRSSをカラーミーショップのお知らせとして表示させたい場合は、YQLを使ってRSS配信を取ってくるのが、楽でよいと思います。作りこめば、サムネイルやタイトルなどを表示して並べることが可能です。
表示できる最大件数はサービス先のRSS配信件数によります。

デメリット・注意点は、
利用している無料サービスがいつか終了するかもしれない点と
YQLの規約でPublicユーザーは2,000リクエスト/1時間までという制約があるところです。