Instagram APIでタグに関連する画像を取得する

2015.12.06

Instagramのタグに関連する画像を取得してみます。

※2016/06/18
APIの仕様が変更になり、インスタグラムへの申請と承認が必要になっています。詳しくは下記をご確認ください。
Permissions Review • Instagram Developer Documentation

サンプルコード

APIを使ったデータの取得をPHPで、表示部分をJavaScriptで実装してみます。
基本的な使い方は以前記事を投稿していますので、そちらをご確認ください。
Instagram APIを使ってみる | cly7796.net

PHP

1
2
3
4
5
6
7
8
9
10
<?php
$accessToken = 'アクセストークンをここに入れる';
$tagname = rawurlencode('ラブライブ'); // タグを指定
 
$url = 'https://api.instagram.com/v1/tags/' . $tagname . '/media/recent?access_token=' . $accessToken;
$jsonData = file_get_contents($url);
 
// jsonデータの整形・出力
$json = json_decode($jsonData, true);
echo json_encode($json["data"]);

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$(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'] + '" width="150" 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>';
 
                        // 投稿者
                        insert += '<div class="instagram-user">';
                        insert += '<img src="' + data[i]['user']['profile_picture'] + '" width="50"  alt="" class="user-icon" />';
                        insert += '<p class="user">投稿者:<br />' + data[i]['user']['username'] + '</p>';
                        insert += '</div>';
 
                        // caption
                        if(data[i]['caption'] != null) {
                            insert += '<p class="caption">' + data[i]['caption']['text'] + '</p>';
                        }
 
                    insert += '</div>'; // instagram-data END
 
                    // いいね
                    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 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);
        }
    });
});

指定したタグが付いた最新の投稿を取得しています。
取得できる情報はこちらのページのRESPONSEをご確認ください。
タグに関連した画像を取得するデモページ
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031