自分のアカウントの写真をブッコ抜きなことをする場合にはOAuthが必要なんだけど、今回やりたいのは特定のタグ付けされた写真を引っこ抜くだけ。
なので、大げさに「触ってみた」なんてタイトルにしましたが、URL一個叩くだけです。
まず必要なのはclient_id。Instgramの開発者ページにアクセスして発行するだけ。
後は、popularを引っこ抜きたければ、
https://api.instagram.com/v1/tags/teizanbu/media/recent?client_id={client_id}
特定のタグ、例えば「teizanbu」の写真なら、
https://api.instagram.com/v1/tags/{tag_name(teizanbu)}/media/recent?client_id={client_id}
これでOK。簡単やね〜。
オマケでサンプルのソースを晒します。
というステージを用意して、
<link rel="stylesheet" href="galleryview-3.0b1_2/jquery.galleryview-3.0.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="galleryview-3.0b1_2/jquery.timers-1.2.js"></script> <script type="text/javascript" src="galleryview-3.0b1_2/jquery.easing.1.3.js"></script> <script type="text/javascript" src="galleryview-3.0b1_2/jquery.galleryview-3.0.min.js"></script>
こんな感じで必要なものを読み込みます。ちなみに今回使ってるのはjQueryプラグイン「GalleryView」。
あとは、
<script type="text/javascript"> jQuery(document).ready(function(){ var clientId = '0123456789abcdef0123456789abcdef'; var tagName = 'teizanbu'; var jsonUrl = 'https://api.instagram.com/v1/tags/' + tagName + '/media/recent?client_id=' + clientId + '&callback=?'; jQuery.getJSON(jsonUrl, function(json, status) { console.log(jsonUrl); for (i in json.data) { jQuery('#gallery').prepend('<li><img frame="'+json.data[i].images.thumbnail.url+'" src="'+json.data[i].images.standard_resolution.url+'" title="" /></li>') } jQuery('#gallery').galleryView({ transition_speed: 500, panel_animation: 'crossfade', panel_width: 612, panel_height: 612, frame_width: 70, frame_height: 70 }); }); }); </script>
こんな感じでJSを走らせます。ぶっちゃけInstgramに関連するのは3〜6行目あたりのみ。あとはgalleryview。ホントは「boob」とか「sexygirl」なんかのタグでサンプル作りたかったんだけど、いい大人なので自粛してみました。