instagramのフィードをjQueryプラグインで表示する「instafetch」

昨今インスタグラムがいたるところで叫ばれるようになっています。
そこで、jQueryプラグインでサクッと表示させます。
Instafetchです。
instagramのフィードをjQueryプラグインで表示する「instafetch」サンプル

使用方法 Instafetchからファイル一式をダウンロード。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="instafetch.js"></script>
<script type="text/javascript">
$(function() {
//表示処理
var displayInstaBlocks = function(response, params) {
var data = response.data;
var container = document.createElement('div');
var blockList = document.createElement('ul');
for(var i = 0; i < response.data.length; i++) {
// List Item
var listItem = document.createElement('li');
var instaImg = document.createElement('img');
instaImg.src = response.data[i].images.low_resolution.url;
listItem.appendChild(instaImg);
blockList.appendChild(listItem);
}
document.getElementById(params).appendChild(blockList);
};

//設定
var fetcher = new Instafetch('クライアントID');
fetcher.fetch({
user: 173645757, //表示するユーザー
limit: 30, //表示件数
tag: 'タグ', //タグで絞込
callback: displayInstaBlocks,
params: 'instafeed'
});
});
</script>

上記を記述するとあとは、paramsで設定したidを表示させたい場所に書けば表示されます。
<div id="instafeed"></div>
なおクライントIDは下記で。
Instagram Developer Documentation
また、ユーザーのIDは以下で確認ができます。
Lookup Your Instagram User ID

表示処理については、一般的なものでlikesやコメント数なども取得が可能です。

nstagramのフィードをjQueryプラグインで表示する「instafetch」サンプル

sponsors

「instagramのフィードをjQueryプラグインで表示する「instafetch」」をシェアする

記事作成:
記事URL:

TOP > > > instagramのフィードをjQueryプラグインで表示する「instafetch」