InstagramのAPIを使って自身のアカウントの画像を自サイト内ページに表示する

自身のサイトをあんまりまともに更新してなかったのでいくらか手を入れているが、その一環として、とりあえず自身のサイト「knowledge」のトップのキービジュアルにInstagramから引っ張ってくるようにする。その備忘録。

やり方

Instagram側の設定

次の記事を大いに参考とさせていただいた。1年程前の記事だが、これに記載の手順で大体行けた。

InstagramのAPI使用が超厳しくなったので、手順をもう一度さらっておく。 | ハリマニックス株式会社
http://www.harimanics.co.jp/blog/detail/?id=BG0057

ざっくりな手順としては、次の通り。

インスタのデベロッパー向けページにアクセスし、自身のアカウントでログイン。
https://www.instagram.com/developer/

ヘッダー部分の「Manage Clients」を押す。
→「Manage Clients」の画面が開く。

「Register New Client」ボタンを押す。
→「Register new Client ID」画面が開く。

APIの情報を入力し「Register」ボタンを押す。
→「Manage Clients」の画面が開き、登録したアプリケーションがリスト上に表示される。

登録したアプリの「MANAGE」ボタンを押す。
→アプリの編集画面が開く。

画面のタブ「Security」を開き、「Disable implicit OAuth」を外して「Update Client」ボタンを押す。
→設定が更新される。
※これをやっとかないと後の各種情報取得の手順でエラーになる。

次のURLをウェブブラウザで開く。

https://api.instagram.com/oauth/authorize/?client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&response_type=token&scope=public_conten

CLIENT_IDには、アプリの「Client ID」の情報を設定する。
REDIRECT_URIには「Register new Client ID」画面で項目「Website URL」に入力した情報を設定する。

成功すると、ウェブブラウザのURL表示部分に、次のような感じでアクセストークンを取得できる。

[REDIRECT_URI]#access_token=[取得したアクセストークン]

これを元に、次のようなURLを入力して、ユーザーIDを取得する。
※ユーザーIDは、インスタのアカウント名やアプリのクライアントIDとは異なるもの。

https://api.instagram.com/v1/users/search?q=[user_name]&access_token=[取得したアクセストークン]

[user_name]は、アプリの編集画面のタブ「Sandbox」配下の項目「Sandbox Users」で出てくる項目。

成功すると、次のような値が帰り、項目「id」より、ユーザーIDを取得できる。

{"data": 
    [
        {
            "id": "[ユーザーIDを示す数字]",
            "username": "[ユーザー名]",
            "profile_picture": "[プロフィール画像のURL]",
            "full_name": "[インスタのアカウントの編集画面の項目「Name」の値と思われる]",
            "bio": "",
            "website": "",
            "is_business": false
        }
    ],
    "meta": {"code": 200}
}

表示先のウェブサイト側の設定

Instagram側で設定したAPIを使ってウェブページに画像を引っ張ってくるのは、JSライブラリ「instafeed.js」を利用した。

配布元
http://instafeedjs.com/

使い方は次を参考とさせていただいた。

Instagram APIを使用し画像を表示できるjQueryプラグイン - Qiita
https://qiita.com/d-uee/items/eb345764c04dd1a59115

割と簡単。細かい導入手順が知りたい場合は参考とした記事を参照いただくとよいかと。

導入後の所感

Instagram側の設定が慣れてないとややこしいと思う。
ウェブサイト側の設定はinstafeed.jsのおかげか割と簡単に行けると思う。

注意点

アクセストークンの有効期限

公式ドキュメントでは、アクセストークンには有効期限がある事が明記されてるが、いつ切れるかについては明記されてない。
https://www.instagram.com/developer/authentication/

JSで画像がリンク切れしてるか検知して、切れてたら別の画像出す、とかしないといけないかなぁ。

他者のアカウントの画像を引っ張る場合

今回は自身のアカウントの画像を引っ張ってこれればよかったけど、他者アカウントだと更に手続きが必要で手間な模様。

参考（前述の記載以外）

Instagram APIのaccess_token（アクセストークン）には有効期限があります。｜WEB制作備忘録｜VICTRIVE
https://victrive.com/memo/146

knowledge ::short