画像を読み込んでホームページ内に一覧表示させるために、InstagramからAPIでアクセストークンとユーザIDを取得してみる。(2019年5月 現在)
1：インスタグラムにログインする
画像を読み込むインスタグラムのアカウントにログインします。
2：アプリケーション登録
ログインしたら一番下のフッターメニューの「API」をクリック。
画面がかわるので、Developer Signupで対象サイトURLなどを入力。初回は電話番号が必須らしい。
登録申請すると、管理画面から[Resister Your Aplication]でアカウント作成して、Register new Client IDで新しいアカウントを作成します。
基本項目はなんでもよいのですが、Valid redirect URIs:(基本的に読み込ませたいサイトURL)は覚えておきます。
3：アカウント作成
アカウントを作成すると[Manage Clients]にinsta_appが追加されるので、Client ID xxxxxxxxxxxを確認。
以下のアドレスにアクセスして、CLIENT-ID(取得したクライアントID)とREDIRECT-URI(登録時のValid redirect URIs)の部分を作成したアカウント情報でアクセス。
https://www.instagram.com/oauth/authorize/?client_id=CLIENT-ID(取得したクライアントID)&redirect_uri=REDIRECT-URI(登録時のValid redirect URIs)&response_type=token
このとき、エラーメッセージなどが表示される場合は、引数が間違っているので正確にコピペしてつなげる必要がある。
例)リダイレクトURLが登録したものと違っている。
error_message “Redirect URI does not match registered redirect URI”
4:API認証
情報が正しいと、This app is in sandbox mode and can only be authorized by sandbox users.という認証画面に遷移するので、承認ボタンをクリックで完了。
そうするとリダイレクトサイトURLに移動するので、アドレスバーにアクセストークンが表示される。
https://リダイレクトURL/#access_token=xxxxxxxxx.xxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxx(アクセストークン)
これでアクセストークンは取得できる。
5：ユーザーIDの取得
以前はユーザーIDは登録時に生成されていたが、APIが終了してしまったというこで、アクセストークンで取得しなければならない。
以下のようにアクセスすることで、APIから情報が取得できるので、一番上のID情報がユーザーIDになる
https://api.instagram.com/v1/users/self/?access_token=xxxxxxxxx.xxxxxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxx(アクセストークン)
ページヘッダには以下が必要。
<script type=”text/javascript” src=”js/jquery-2.1.4.min.js”></script>
<script type=”text/javascript” src=”js/instafeed.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
var userFeed = new Instafeed({
target:’instafeed’,
get: ‘user’, //ユーザーから取得
userId: ‘user idをいれる’, //ユーザーID(先ほど確認した’user_id’)
sortBy: ‘most-recent’,//最新記事から順に取得
links: true , //画像リンク取得
limit: 10, //取得する画像数を設定
resolution: ‘low_resolution’, //画像サイズを設定
template: ‘<li><a href=”{{link}}” target=”_blank”><img src=”{{image}}”></a></li>’,
accessToken: ‘access tokenを入れる’ //アクセストークン
});
userFeed.run();
});
</script>
ホームページ内にインスタグラムの画像を表示させるために必要なアクセストークンとユーザーIDは以上の手順で取得できました。
※2019年7月時のもので、仕様変更している場合があるので、都度、確認が必要です。
