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

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

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

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

Instagram Developer Documentation

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

CLIENT-IDはClientページに記載されたもので、REDIRECT-URIはセキュリティタブのValid redirect URIsを設定。https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

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=https://makeitfun.jp' \
> -F ‘code=上記のcode=XXXXXのXXXXX部分’ \
> https://api.instagram.com/oauth/access_token

こんなレスポンスが返ります。

{
“access_token”: “ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ”,
“user”: {
“id”: “xxxxxxxxxx”,
“username”: “shinsuke.nishikawa”,
“profile_picture”: “https://scontent.cdninstagram.com/vp/2117a57a4c075d3620c78bcd055e1d85/5CBBD257/t51.2885-19/s150x150/42080541_1896057637140925_2079116805258870784_n.jpg?_nc_ht=scontent.cdninstagram.com",
“full_name”: “Shinsuke Nishikawa”,
“bio”: “”,
“website”: “”,
“is_business”: false
}
}

ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZがアクセストークンです。

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

Instafeed.js - a simple Instagram javascript plugin

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

フォトギャラリー