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になります!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript" src="..js/Instafeed.min.js"></script> <script type="text/javascript"> var userFeed = new Instafeed({ get: 'user', userId: 〇〇〇〇〇〇, accessToken: '〇〇〇〇〇〇〇', limit: 4, resolution:'low_resolution', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612 sortBy: "most-recent", template: ' <li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}" /></a></li> ', }); userFeed.run(); </script> |
インスタグラムの最新記事を表示させたい箇所には、下記ソースを
1 |
<ul id="instafeed"></ul> |
ここまでがJavaScriptでInstagramの最新投稿を表示させる手順となります
WordPressならプラグインなど使えば簡単に取得できる作業なのに・・・こっちだと初めてやった時はかなり時間を要しました・・・
今後仕様変更などが無ければ(;^ω^)これでうまくいくと思いますので、一度お試しを!