refirio.org

Memo

メモ > 技術 > サービス: Instagram > Instagram API の使用例
■Instagram API の使用例

※サンドボックスモードで自身のアカウントの写真を表示させる

■開発者登録https://www.instagram.com/developer/
「Register Your Application」から開発者登録

ウェブサイト: http://refirio.org/
Phone number: （自身の電話番号）
What do you want to build with the API?: Display Picture on my website.

「I accept the API Terms of Use and Brand Guidelines」にチェックを入れて「Sign up」

■クライアント（アプリケーション）登録

再度「Register Your Application」をクリックするとクライアントの管理ページへ移動する
「Register a New Client」からクライアントを登録する

Detailsタブ
Application Name: Display Pictures
Description: Display Picture on refirio.org
Website URL: http://refirio.org/
Valid redirect URIs: http://refirio.org/memos/instagram/picture/

Securityタブ
Disable implicit OAuth: （チェックを外す…が、それでいいのかは要調査）
Type the words above: （画像の文字を入力）

それぞれ入力して「Register」
以下のように、アプリケーションの情報が表示される

Display Pictures
CLIENT ID	xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
CLIENT STATUS	Sandbox Mode

「CLIENT ID」が発行されたことを確認する

■アクセストークンの取得

以下のURLにアクセスする
https://api.instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【Valid redirect URIs】&response_type=token
具体的には以下のようになる
https://api.instagram.com/oauth/authorize/?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri...

This app is in sandbox mode and can only be authorized by sandbox users.
Hi _refirio, Display Pictures is requesting to do the following:
Access your basic informationYour media & profile info

と書かれたページに飛ぶので、「Authorize」をクリック

以下にリダイレクトされる。アクセストークンが取得される
http://refirio.org/memos/instagram/picture/#access_token=yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

このトークンを使ってプログラムを作成する

■プログラム例（PHP）

最新の6件を表示する例（Instagramから取得する際に「&count=6」を付ければ、その時点で件数制限することもできる）

<?php

// アクセストークンからInstagramのデータをjsonで取得
$json = file_get_contents('https://api.instagram.com/v1/users/self/media/recent/?access_token=yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy');
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');

// JSONを配列に変換
$array = json_decode($json, true);

// 写真を表示
echo "<!DOCTYPE html>\n";
echo "<html>\n";
echo "<head>\n";
echo "<meta charset=\"utf-8\">\n";
echo "<title>Instagram</title>\n";
echo "</head>\n";
echo "<body>\n";
echo "<h1>Instagram</h1>\n";
echo "<p>\n";

$i = 0;
foreach ($array['data'] as $data) {
    echo "<a href=\"" . $data['link'] . "\" target=\"_blank\"><img src=\"" . $data['images']['thumbnail']['url'] . "\">\n";

    if (++$i >= 6) {
        break;
    }
}

echo "</p>\n";
echo "</body>\n";
echo "</html>\n";

exit;
■プログラム例（JavaScript）

Instagram APIを使ってみる | cly7796.net
http://cly7796.net/wp/javascript/try-using-the-instagram-api/<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(function() {
    $.ajax({
        url: 'https://api.instagram.com/v1/users/self/media/recent/?access_token=yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy&count=6',
        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'] + '">';
                insert += '</a>';
                insert += '</li>';
            };
            insert += '</ul>';
            $('#instagram').append(insert);
        }
    });
});
</script>
<div id="instagram"></div>
■参考ページ

Instagram APIを使ってインスタグラムの画像をウェブサイト上に表示する | 株式会社チップディップ
https://www.tipdip.jp/tips_posts/production/1928/

注意
「Instagram APIのアクセストークンは有効期限を明確に指定していません。
  しかし、アクセストークンが永久に有効であると仮定しないでくださいという注意書きも行なっています。」

Wordpress & instagram API ハッシュタグで画像取得したいだけなのに…結局 Instagram Feed proが解決してくれた | それだよ
http://es.istgut.jp/web-tools/instagram-api.html

注意
「新API基準では、sandbox modeとやらで、取得できる画像が最新20件になったようです。
  これを特定のタグで絞り込んだら、「最新20件の中の特定のタグがついた画像」しか表示されないわけです。
  せめて、「特定のタグがついた最新20件」ならまだ救いはあったのに。」
Memo

Advertisement
