Instagram APIを使用し、タグで絞った画像を一覧表示する方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のtipsは【Instagram APIを使用し、タグで絞った画像を一覧表示する方法】になります。方法に関してはとても便利なプラグインがありましたのでそちらを使用してみます。

実装方法

クライアントIDの取得

まずはクライアントIDが必要になります。コチラより開発者登録をしてください。

コード

Potomakのダウンロード
JS
<script src="jquery.1.X.X.js"></script>
<script src="jquery.instagram.js"></script>
<script>
$(function() {
$(".instagram").instagram({
hash: ‘検索対象のタグ(ハッシュ)’,
show: 12,//表示件数
clientId: ‘ここにクライアントID’
});
});
</script>
HTML

<div class="instagram"></div>
補足 – 画像サイズの変更等

このプラグインですと表示される画像のサイズが150px×150pxと小さめです。このサイズを変更する為にはjquery.instagram.jsのL33を以下のように編集します。これに関してはJSONの中身を見ていただければ解るかと思います。ちなみにデモではユーザー名とユーザーアイコンも同時に取得するように編集しています。


//変更前 – L33
.attr(‘src’, photo.images.thumbnail.url)

//中サイズに変更 – 306px × 306px
.attr(‘src’, photo.images.low_resolution.url)

//大サイズに変更 – 612px × 612px
.attr(‘src’, photo.images.low_resolution.url)


 
以上になります。後は好みに応じてCSSで装飾を行ってください。