Instagramのフォトギャラリーをウェブサイトにのせる

自分のウェブサイトにInstagramのフォトギャラリーをのせたくなったので、メモです。

Instagram APIにアクセスして、Clientを作成します。

注意：セキュリティタブのDisable implicit OAuthのチェックを外しておく！

Instagram Developer Documentation

ブラウザでGETでアクセスします。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

CLIENT-IDはClientページに記載されたもので、REDIRECT-URIはセキュリティタブのValid redirect URIsに設定します。

REDIRECT-URIにリダイレクトされます。その際、URLの code=XXXXX を覚えておきます。

続いて、curlを叩きます。

curl -F 'client_id=CLIENT-ID' \
  -F 'client_secret=Clientページに記載されたClient Secret' \
  -F 'grant_type=authorization_code' \
  -F 'redirect_uri=REDIRECT-URI' \
  -F 'code=上記のcode=XXXXXのXXXXX部分' \
  https://api.instagram.com/oauth/access_token

アクセストークンなどが含まれたレスポンスが返ります。その中の access_token が、アクセストークンです。

HTMLに表示するのは、instafeedを使うと簡単に表示できます。

Instafeed.js - a simple Instagram javascript plugin

$(function() {
  var feed = new Instafeed({
    clientId: '上記ClientID',
    get: 'user',
    userId: 'InstagramのUser ID',
    accessToken: '上記アクセストークン',
    links: true,
    limit: 18,
    resolution: 'thumbnail',
    template: '<li><a href="{{link}}"><img src={{image}}></a></li>'
  });
  feed.run();
});

フォトギャラリー