Instagram APIの使用方法

• Web Create
• 2016.09.08

Instagram APIを使用するたびに忘れてしまうので、簡単に使い方をまとめてみました。

アプリケーションを登録

下記のURLからInstagram Developerに移動します。
https://www.instagram.com/developer/

画像赤枠の「Manage Clients」ボタンをクリックして「Developer signup」画面に移動します。

必要な項目を入力してSignup

再度、上のメニューから「Manage Clients」ボタンをクリックして「Register a New Client」ボタンからアプリケーションの登録を行います。

Applictaiton Name        ：アプリケーションの名前
Dscription                    ：アプリケーションの説明などを入力
Website URL                ：APIを使用するサイトのURLを入力
Vaild redirect URis        ：アクセストークンを取得する際にリダイレクトされるURL

入力が完了したら「Register」ボタンを押して登録します。

登録が完了すると「Client ID」を取得できます。
この「Client ID」を使用して次は「アクセストークン」を取得します。

アクセストークンを取得

下記コード内の【CLIENT-ID】の箇所に先ほど取得した「Client ID」を入力
【REDIRECT-URL】のにはアクセストークンを取得する際にリダイレクトされるURL、こちらは適当でも問題無いです。

https://api.instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URL】&response_type=token&scope=public_content

上記のコードをブラウザのURLに入力してアクセスすると下記の画面に移動します。

「Authorize」ボタンをクリックすると【REDIRECT-URL】に入力したページに移動します。

ブラウザのURLにアクセストークンが表示されるので、
このアクセストークンを使用してページ内にInstagram内の画像を表示させます。

アクセスした際に下記の様なエラーが出てしまう場合は「Disable implicit OAuth」のチェックを外して再度アクセスしてみてください。
{“code”: 403, “error_type”: “OAuthForbiddenException”, “error_message”: “Implicit authentication is disabled”}

Disable implicit OAuth   ：チェックを外す
Enforce signed header  ：チェックしないまま

jQueryを使用して表示

jqueryとinstafeed.jsを読み込んでおいてください。

instafeed.js
http://instafeedjs.com/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript">
$(function(){
	var accessToken = 'XXXXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    var userid = XXXXXXXXXX; // ユーザーID
    var count = $('#Instagram').find('#insta-list').data('count');
    $.ajax({
        url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent/?access_token=' + accessToken + '&count=' + count,
        dataType: 'jsonp',
        success: function(data) {
            var insert = '';
            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']['low_resolution']['url'] + '"  alt="" width="345" height="345">';
                    insert += '</a>';
                insert += '</li>';
            };
            $('#Instagram').find('#insta-list').append(insert);
        }
    });
});
</script>

	<div id="Instagram">
		<p class="title">INSTAGRAM</p>
		<ul id="insta-list">
		</ul>
	</div>

ユーザーIDとアクセストークンを入力すると、
上記のように表示されます。

#insta-list{
    text-align: center;
}
#insta-list li{
    display: inline-block;
}

あとはcssで自由に配置してみてください。