Mac好きのアラフォーweb製作者ののんびりブログ

Mac好き、iPhone好きのアラフォーのWEB製作者がその日覚えたこと、気がついたことを備忘録的に淡々とつづるブログです。自分が忘れないために残したものが誰かのお役に立てれば…。

instagramのフィードをサイトに取り込むのに手こずった件。【導入編】

前回のinstagramのフィードをサイトに取り込むのに手こずった件。【事前準備編】で、事前準備が整ったインスタグラムのAPI登録ですが、これでようやく折り返し地点。

ここから引き続きサイトへのインスタグラムのフィードの取り込みをやっていきます。

やっとここで「jquery-instagram」をダウンロード。

しかるべきディレクトリに置いて、もちろんjQuery本体の読み込みも忘れずに

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="./js/jquery.instagram.js"></script>
        <title>インスタグラムの取り込みテスト</title>
    </head>
    <body>
        <h1>インスタグラムの取り込みテスト</h1>
        <p>インスタグラムに投稿されている画像のうち<em>ロビ</em>とハッシュタグのついた画像を抽出して、<em>30</em>件表示しています。</p>
        </div>
    </body>
</html>

と、書き始めてみます。

基本的にjQuery(発火させたい要素:セレクタ).instagram()で動作させることが出来るようです。
そこで、このように書きました。

     jQuery(document).ready(function() {
            jQuery('.instagram-feed').instagram({
            hash: 'ロビ',
            show: 15, //表示させる数
            clientId: '前回の手順で発行された「clientId」をここに書く'
            });
        });

ここでは、ハッシュタグに「 ロビ」を指定して、取得させる件数を「 15」にしました。

と、ここでうまくいくはずが、どうも最新版のjquery-instagramではうまく動かなくて、(なにも取得できない…。)ので、いくつか古いバージョンを試したところ、「0.2.1」のバージョンでうまく動きました。
古いバージョンは作者の方があげておられるgithubの中にあります。
URL:potomak/jquery-instagram

f:id:kazzpapa3:20150217204212j:plain

最新バージョンでうまくいかなかった原因や、jquery-instagramで使えるプロパティなんかについてはゆくゆく調べてみたいと思いますが、とりあえず動いたという状況はこちら。

f:id:kazzpapa3:20150217204227j:plain

instagramのフィードをサイトに取り込むDEMO

Instagram

Instagram