instagramの画像を簡単かつ柔軟に表示できるjQueryプラグイン「Instafeed.js」

写真アプリinstagramで撮影された画像を簡単に表示させてみたいですよね。
そして、キャプションとかlikesも出せたら・・・なんて思うのは当然かと思います。
そう、そんな時はjQueryプラグインのInstafeed.js - a simple Instagram javascript pluginを利用してみましょう。

sponsors

使用方法

Instafeed.jsからファイル一式をダウンロードします。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="instafeed.min.js"></script>
<script>
$(document).ready(function() {
    var feed = new Instafeed({
        get: 'tagged', //popular,tagged,location
        tagName: '東京タワー',
        //locationId: number,
        sortBy:'most-liked', //most-recent,least-recent,least-liked,most-commented,random
        links: true , //false
        limit: 60, //max60
        resolution: 'low_resolution', //thumbnail - 150x150 ,low_resolution - 306x306 ,standard_resolution - 612x612 
        template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a><br />{{caption}}<br />like:{{likes}},comments:{{comments}}</li>',
        clientId: 'e6930bc2e21c4c198e7e36853ea56db3'
    });
    feed.run();
});
</script>
このようにオプションが多くあり、吐き出し方のテンプレートも好みに応じて調整できるため、自サイトにあった表示が可能になります。
最後に表示させたい場所に下記を記述すれば完成です。 <ul id="instafeed"></ul>

サンプル

Javascriptサンプルページ一覧
skuare.net