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

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

使用方法 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>
instagramの画像を簡単かつ柔軟に表示できるjQueryプラグイン「Instafeed.js」サンプル

sponsors

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

記事作成:
記事URL:

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