InstagramのAPIを使って、投稿された画像やいいね数、コメントなどの取得を試してみます。
※2016/06/18
APIの仕様が変更になり、インスタグラムへの申請と承認が必要になっています。詳しくは下記をご確認ください。
Permissions Review • Instagram Developer Documentation
アプリケーションの登録
APIを使用するにはInstagramのアカウントが必要になりますので、スマートフォンからアプリをダウンロードしてアカウント登録を行ってください。
アカウント登録を行ったら、PCからInstagramにログインします。
ログイン後、こちらのページからアプリケーションの登録を行います。
Register Your Application をクリック。
Register a New Client をクリック。
各項目を入力して、Registerをクリック。
今回はテストですので、項目は以下のようにしました。
- Application Name: app test
- Description: app test
- Website URL: http://cly7796.net/
- Valid redirect URIs: http://cly7796.net/
- Contact email: 自身のメールアドレス
これでアプリケーションの登録が完了しました。
アクセストークンの取得
次に、APIに利用に使用するアクセストークンを取得します。
以下のURLにアクセスします。
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
CLIENT-IDとREDIRECT-URIの部分は、アプリケーションの登録で取得・設定したものを入れてください。
これで認証画面が出るはずだったのですが、以下のようなエラーが表示されました。
{"code": 403, "error_type": "OAuthForbiddenException", "error_message": "Implicit authentication is disabled"}
クライアント側でアクセストークンを取得する場合、先ほどアプリケーション登録をしたページにある「Disable implicit OAuth」にチェックが入っていると駄目みたいです。
Manage ClientsのEDITをクリック。
Securityタブを選択して、Disable implicit OAuthのチェックを外します。
完了したらUpdate Clientをクリック。
先ほどのURLに再度アクセスすると以下のような認証が表示されるので、Authorizeをクリック。
REDIRECT-URIで指定したページに、アクセストークンが付加された状態でリダイレクトされます。
http://cly7796.net/#access_token=×××××
#access_token= 以降の値がアクセストークンになりますので、保存しておいてください。
これでアクセストークンの取得が完了しました。
ユーザーIDを取得
投稿された画像を取得する場合、投稿者のユーザーIDが必要になります。
(URLなどに表示されるユーザー名とは別のものです。)
まずはAPIを使ってユーザー名からユーザーIDを取得してみます。
JavaScript
$(function() {
var accessToken = 'アクセストークンをここに入れる';
var username = 'nanjolno'; // ユーザーID
$.ajax({
url: 'https://api.instagram.com/v1/users/search?q=' + username + '&access_token=' + accessToken,
dataType: 'jsonp',
success: function(data) {
for (var i = 0; i < data['data'].length; i++) {
// 近いusernameが複数出るので、一致するものを取得
if(data['data'][i]['username'] == username) {
console.log(data['data'][0]['id']); // 5001435
}
};
}
});
});
取得できる情報はこちらのページのRESPONSEをご確認ください。
後ほど記載しますが、アクセストークンが丸見えになるのはあまりよろしくないので、サンプルでは空の状態にしています。
ユーザーID取得のデモページ(アクセストークンを入れていないので動作しません)
投稿された画像の情報を取得
上記で取得したユーザーIDを使って、投稿された画像を取得してみます。
HTML
<div id="sample"></div>
CSS
#sample {
width: 960px;
margin: 0 auto;
}
#sample li {
margin-bottom: 30px;
border-bottom: #ccc 1px solid;
padding-bottom: 20px;
}
#sample .instagram-image {
float: left;
}
#sample .instagram-data {
float: right;
width: 800px;
}
#sample .instagram-like .like-user {
float: left;
margin-right: 20px;
font-size: 11px;
}
#sample .instagram-comments {
clear: both;
padding-top: 10px;
}
#sample .instagram-comments .comments-user {
overflow: hidden;
margin-bottom: 10px;
}
#sample .instagram-comments .comments-user-icon {
float: left;
margin-right: 10px;
}
JavaScript
$(function() {
var accessToken = 'アクセストークンをここに入れる';
var userid = 5001435; // ユーザーID
var count = 10; // 取得件数
$.ajax({
url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent/?access_token=' + accessToken + '&count=' + count,
dataType: 'jsonp',
success: function(data) {
var insert = '<ul>';
for (var i = 0; i < data['data'].length; i++) {
insert += '<li>';
// 画像とリンク先
insert += '<a href="' + data['data'][i]['link'] + '" target="_blank">';
insert += '<img src="' + data['data'][i]['images']['thumbnail']['url'] + '" class="instagram-image" />';
insert += '</a>';
insert += '<div class="instagram-data">';
// 日付
var d = new Date(data['data'][i]['created_time'] * 1000);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
insert += '<div class="date">' + year + '/' + month + '/' + day + '</div>';
// caption
if(data['data'][i]['caption'] != null) {
insert += '<p class="caption">' + data['data'][i]['caption']['text'] + '</p>';
}
// いいね
insert += '<div class="instagram-like">';
insert += '<div class="like-count">いいね数: ' + data['data'][i]['likes']['count'] + '</div>';
if(data['data'][i]['likes']['data'] != null) {
for (var j = 0; j < data['data'][i]['likes']['data'].length; j++) {
insert += '<div class="like-user">';
insert += '<img src="' + data['data'][i]['likes']['data'][j]['profile_picture'] + '" width="50" alt="" class="like-user-icon" />';
insert += '<div class="like-user-name">' + data['data'][i]['likes']['data'][j]['username'] + '</div>';
insert += '</div>';
};
}
insert += '</div>';
insert += '</div>'; // instagram-data END
// コメント
insert += '<div class="instagram-comments">';
insert += '<div class="comments-count">コメント数: ' + data['data'][i]['comments']['count'] + '</div>';
if(data['data'][i]['comments']['data'] != null) {
for (var j = 0; j < data['data'][i]['comments']['data'].length; j++) {
insert += '<div class="comments-user">';
insert += '<img src="' + data['data'][i]['comments']['data'][j]['from']['profile_picture'] + '" width="50" alt="" class="comments-user-icon" />';
insert += '<div class="comments-user-name">' + data['data'][i]['comments']['data'][j]['from']['username'] + '</div>';
insert += '<p class="comments-user-text">' + data['data'][i]['comments']['data'][j]['text'] + '</p>';
insert += '</div>';
};
}
insert += '</div>';
insert += '</li>';
};
insert += '</ul>';
$('#sample').append(insert);
}
});
});
取得できる情報はこちらのページのRESPONSEをご確認ください。
投稿された画像の情報を取得するデモページ(アクセストークンを入れていないので動作しません)
データの取得をPHPで行う
上記サンプルで画像の取得は問題ないのですが、JavaScriptのみでInstagram APIを使おうとすると、アクセストークンが誰でも見られる状態になってしまいます。
アクセストークンが丸見えだと悪用される恐れもあるので、アクセストークンを使ったデータの取得はPHPで行い、json形式で出力して、そのjsonをJavaScriptで取得してみます。
※2015/09/29
データ取得後、必要な情報のみjson形式で出力するように変更しました。
PHP
<?php $accessToken = 'アクセストークンをここに入れる'; $userid = 5001435; // ユーザーID $count = 10; // 取得件数 $url = 'https://api.instagram.com/v1/users/' . $userid . '/media/recent?access_token=' . $accessToken . '&count=' . $count; $jsonData = file_get_contents($url); // jsonデータの整形・出力 $json = json_decode($jsonData, true); echo json_encode($json["data"]);
JavaScript
$(function() {
$.ajax({
url: 'get.php',
dataType: 'json',
success: function(data) {
var insert = '<ul>';
for (var i = 0; i < data.length; i++) {
insert += '<li>';
// 画像とリンク先
insert += '<a href="' + data[i]['link'] + '" target="_blank">';
insert += '<img src="' + data[i]['images']['thumbnail']['url'] + '" class="instagram-image" />';
insert += '</a>';
insert += '<div class="instagram-data">';
// 日付
var d = new Date(data[i]['created_time'] * 1000);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
insert += '<div class="date">' + year + '/' + month + '/' + day + '</div>';
// caption
if(data[i]['caption'] != null) {
insert += '<p class="caption">' + data[i]['caption']['text'] + '</p>';
}
// いいね
insert += '<div class="instagram-like">';
insert += '<div class="like-count">いいね数: ' + data[i]['likes']['count'] + '</div>';
if(data[i]['likes']['data'] != null) {
for (var j = 0; j < data[i]['likes']['data'].length; j++) {
insert += '<div class="like-user">';
insert += '<img src="' + data[i]['likes']['data'][j]['profile_picture'] + '" width="50" alt="" class="like-user-icon" />';
insert += '<div class="like-user-name">' + data[i]['likes']['data'][j]['username'] + '</div>';
insert += '</div>';
};
}
insert += '</div>';
insert += '</div>'; // instagram-data END
// コメント
insert += '<div class="instagram-comments">';
insert += '<div class="comments-count">コメント数: ' + data[i]['comments']['count'] + '</div>';
if(data[i]['comments']['data'] != null) {
for (var j = 0; j < data[i]['comments']['data'].length; j++) {
insert += '<div class="comments-user">';
insert += '<img src="' + data[i]['comments']['data'][j]['from']['profile_picture'] + '" width="50" alt="" class="comments-user-icon" />';
insert += '<div class="comments-user-name">' + data[i]['comments']['data'][j]['from']['username'] + '</div>';
insert += '<p class="comments-user-text">' + data[i]['comments']['data'][j]['text'] + '</p>';
insert += '</div>';
};
}
insert += '</div>';
insert += '</li>';
};
insert += '</ul>';
$('#sample').append(insert);
}
});
});
データの取得元が変更されている以外は以前のサンプルと同じです。
dataTypeがjsonpからjsonに変更になっている点だけ注意ください。
投稿された画像の情報を取得するデモページ2
※2015/09/29
jsonの中身を変更したため、コードを変更しました。
今回はデータ取得をPHP、ページへの表示をJavaScriptで行いましたが、全てPHPで完結してしまっても問題ありません。
【参考サイト】
- HTML – Instagram APIから画像データ取得のメモ – Qiita
- Technology www Me. » instagram apiを利用してみた
- Instagram API Endpoints • Instagram Developer Documentation
- Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法 | 株式会社LIG
コメントが承認されるまで時間がかかります。