こちらの記事を見て自分の投稿した写真を表示してみようと思い作成しました。
apiの取得
基本的には参考にした記事に書いてあります。
手順としては
- Instagram Developer Documentationからアプリケーションの利用登録をする
- 発行されたCLIENT ID と REDIRECT URIを入力してアクセストークンを取得する
https://instagram.com/oauth/authorize/?client_id=取得したCLIENT ID&redirect_uri=登録したREDIRECT URI&response_type=tokenリダイレクトされてURLバーにアクセストークンが表示されます
http://daybreak-dawn.org/#access_token=取得したアクセストークン - アクセストークンを取得すると、以下のURLで自分のアカウントのJSONデータを取得できます。
https://api.instagram.com/v1/users/self/media/recent?access_token=取得したアクセストークン - あとはJavaScriptで表示できるようにいじる
という流れです。
JavaScript
JavaScriptで表示する部分は以下になります。jQueryを使用しています。HTMLのdiv.instagramに出力しています。
2015/02/06修正
- apiのURLを「https://api.instagram.com/v1/users/3/media/recent/」から「https://api.instagram.com/v1/users/self/media/recent/」に修正
- count の数字を表示したい件数に変更
$(function(){
var photoViewNum = 50 //表示する件数
$(".instagram").html('<p class="txt01">ロード中...</p>');
$.ajax({
url: "https://api.instagram.com/v1/users/self/media/recent/",
data: {
access_token: "アクセストークンをいれる",
count: photoViewNum
},
cache: false,
dataType: "jsonp",
error: function() {
$(".instagram").html('<p class="txt01">情報の取得に失敗しました。リロードするか時間を開けてアクセスして下さい。</p>');
},
success: function(data) {
$(".txt01").remove();
$(".instagram").append('<ul class="img">')
for (var i = 0, length = photoViewNum; i < length; i++) {
$(".instagram .img").append($("<li>").append($("<a>").attr("href", data.data[i].link).attr("target", "_blank").append($("<img>").attr("src", data.data[i].images.standard_resolution.url))));
}
}
});
});特に設定をしないと20件しか取得してくれないので、dataの所のcountを-1にして全て取得にしています。その後の処理で出力する枚数分表示しています。（countにその数値を指定すると違う枚数が表示されるので・・・）2016/04/12追記：最大でも33件程度しか表示できないようです。
他にも期間を指定することもできますので、以下のページをご覧下さい。
デモ
制作したページはこちらからどうぞ！
コメント