お役立ち 2018-05-16

HPにJavaScriptでInstagramの最新投稿を表示させよう！

こんにちは！郡浜です

今日はホームページにJavaScriptでInstagramの最新投稿を表示させる手順をご説明します♪

初めてだとややこしい・・・アクセストークンの取得の仕方から説明していきますので、どうぞご参考に！

★★★★★★★★★★★★★★★★

まずはインスタグラムにログインしてください
https://instagram.com/accounts/login/

ログインしたら
以下からデベロッパー（開発者）として登録します
http://instagram.com/developer/clients/manage/

上図のように入力欄に記入して、I accept the APIにチェックをしたら「Sign up」をクリック

「Register a New Client」をクリックして新規作成します

・Applictaiton Name：アプリケーションの名前
・Dscription：アプリケーションの説明などを入力
・Company Name：会社名入力
・Website URL：サイトのURLを入力
・Valid redirect_URIs：アクセストークンを取得する際にリダイレクトされるURL（基本的にはリダイレクトのみに使用するので何でもOK）
・Privacy Policy URL：自サイトにプライバシーポリシーのページがあれば入力
・Contact email：連絡先用のメールアドレスを入力

 

さらに「Security」タブに合わせて
「Disable implicit OAuth:」のチェックを外す

「Register」を押してアプリを作成します。

CLIENT IDが出ますので、下記URLの◯◯◯と□□□に「CLIENT ID」と「redirect_URI」を入力してアクセス

https://api.instagram.com/oauth/authorize/?client_id=◯◯◯&redirect_uri=□□□&response_type=code

すると、このような画面に飛びますので「Authorize」をクリック

認証後、REDIRECT URLで設定したページに飛ばされます。

飛ばされた先のURLバーに表示されているURLの末尾に「?code=」で始まる英数字がくっついていますが、これが「コード」となります。

?code=
から後ろをメモしましょう

ブラウザで下記にアクセスしてアクセストークンを取得します。
【クライアント ID】と【リダイレクト URI】は取得したものを入れてください。

https://www.instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【REDIRECT URL】&response_type=token

するとURLバーに表示されているREDIRECT URLの後ろに
#access_token=
が表示されています！これがアクセストークンですのでメモしましょう！

 

ここまでがアクセストークンの取得作業です、ふぅ・・・

 

次にInstafeed.min.jsをホームページに読み込ませていきます。

http://instafeedjs.com/
はこちらから。

ヘッダーには下記のような形でJavaScriptを読み込ませて、
accessToken:
には取得したアクセストークンを、
userId:
は取得したアクセストークンの一番最初の.（ドット）までがユーザーIDになります！

 

インスタグラムの最新記事を表示させたい箇所には、下記ソースを

 

 

ここまでがJavaScriptでInstagramの最新投稿を表示させる手順となります

WordPressならプラグインなど使えば簡単に取得できる作業なのに・・・こっちだと初めてやった時はかなり時間を要しました・・・

今後仕様変更などが無ければ(;^ω^)これでうまくいくと思いますので、一度お試しを！