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

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

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

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

ブラウザで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”: “10751447”,
 “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を使うと簡単に表示できます。

$(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();
});

フォトギャラリー