Instagramの写真を動的にWEBサイトを表示させるには、
Instagram API (SandBox モード)を使う必要があります。
APIを使い、instafeed.jsというプラグインを利用すれば、
最新の写真(上限20枚まで)を動的に表示させる事ができます。
目次
動作サンプル
表示に必要なこと
今回は、
- APIを使うためのInstagram Developerページでの登録方法。
- APIを使ってページに表示させるためのプラグインinstafeed.jsの使い方。
をを説明します。
USER ID、CLIENT ID、ACCESS TOKENを取得する
- USER ID
- CLIENT ID
- ACCESS TOKEN
上記の情報を取得する方法を説明します。
STEP1
PCのブラウザから、Instagramにログインして下さい。
STEP2
ログイン後、以下のデベロッパーページアクセスして下さい。
https://www.instagram.com/developer/
「Register Your Application」というボタンを押します。
STEP3
「Register a New Client」 をクリック
STEP4
まずは、「Security」というタブをクリックしてください。
「Disable implicit OAuth」のチェックを外して下さい。
STEP5
次に「Details」というタブをクリックして下さい。
以下必須項目を入力してください。必須項目が空欄だと、赤い色がつきます。
必要な項目を入力後、「Register」 をクリックしてください。
- Application Name : アプリケーション名*必須
- Description : アプリケーション説明*必須
- Company Name : 会社名*任意
- Website URL : WebサイトURL*必須
- Valid redirect URIs : 認証リダイレクトURL*必須
- Privacy Policy URL : 個人情報保護方針のURL*任意
- Contact email : 連絡先メールアドレス*任意
STEP6
以下のように、CLIENT IDが取得できるかと思います。この文字列をコピーし、後ほど使用します。
アクセストークンを取得する
STEP1
下記のURLのClLIENT IDと認証リダイレクトURL(httpsのURL)の箇所に上記で取得した情報を入力します。
https://www.instagram.com/oauth/authorize/?client_id=ClLIENT ID&redirect_uri=認証リダイレクトURL(httpsのURL)&response_type=token
出来たURLをWEBブラウザのURL欄に入力し、表示させます。
STEP2
すると、WEBブラウザのURL欄に、以下のように、access_tokenが取得できます。
https://kishiken.com/#access_token=2399935.cffa174.93c5d3155975447fa8f74935b0e0fdef
ちなみに、下記のURLにアクセストークンを入力すると、登録したインスタアカウントのJSONデータが取得できます。
https://api.instagram.com/v1/users/self/media/recent?access_token=取得したACCESS TOKEN
STEP3
USER IDはアクセストークンの最初の数値なので、それをメモって下さい。
https://kishiken.com/#access_token=2399935.cffa174.93c5d3155975447fa8f74935b0e0fdef
instafeed.jsでWEBページに表示する
Instafeed.jsをダウンロードする
Instafeed.jsの本家サイトより、ダウンロードして下さい。
downloadボタンを押すとファイルがダウンロードできます。
http://instafeedjs.com/
JavaScript
javascriptの以下の部分に、取得したuser id、access Token、client idを入力します。
userId: ‘2399935‘
accessToken:’2399935.cffa174.93c5d3155975447fa8f74935b0e0fdef‘
clientId: ‘cffa1746841a4ffea7052980791b7171‘
その他、表示に関するオプションもあります。
オプションの設定方法は、本家サイトを確認ください。
以下は主なオプションです。
sortBy: ソート順
none
(default) – As they come from Instagram.most-recent
– Newest to oldest.least-recent
– Oldest to newest.most-liked
– Highest # of likes to lowest.least-liked
– Lowest # likes to highest.most-commented
– Highest # of comments to lowest.least-commented
– Lowest # of comments to highest.random
– Random order.
links: クリックした際のリンクの有無
- true
- flase
limit: 写真表示数
- 数値で入力
resolution:写真サイズ
thumbnail
(default) – 150×150low_resolution
– 306×306standard_resolution
– 612×612
template: HTMLで出力する際のテンプレート
以下はjavascript サンプルです。
コピーしてそのまま使用できます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="/common/vender/jquery/instafeed.min.js"></script> <script> $(document).ready(function() { var feed = new Instafeed({ target: 'instafeed', get: 'user', userId: '2399935', accessToken:'2399935.cffa174.93c5d3155975447fa8f74935b0e0fdef', clientId: 'cffa1746841a4ffea7052980791b7171', links: true , limit: 8, resolution: 'standard_resolution', template: '</p> <div class="col-sm-3 col-xs-6 col-md-3 insta-box mb-10"><a href="{{link}}"><img src="{{image}}" target="_blank"></a></div> <p>' }); $('#btn-more').click(function() { feed.next(); }); feed.run(); }); </script> <script type="text/javascript"> var loadButton = document.getElementById('btn-more'); var feed = new Instafeed({ // every time we load more, run this function after: function() { // disable button if no more results to load if (!this.hasNext()) { loadButton.setAttribute('disabled', 'disabled'); } }, }); // bind the load more button loadButton.addEventListener('click', function() { feed.next(); }); // run our feed! feed.run(); </script>
HTML
<div class="container"> <div id="instafeed" class="row"> <!--ここに一覧を表示する--> </div> <div class="text-center"> <button id="btn-more" class="btn btn-default">もっとみる</button> </div> </div>
CSS
今回はBOOTSTRAPを使用しました。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="/common/css/bootstrap-theme.css"> <style> .insta-box img{ max-width:100%; height:auto; } </style>
こちらも合わせてお読み下さい。
“簡単!Instafeed.jsでWEBページにインスタの写真一覧を埋めこむ方法” への1件のフィードバック
コメントは停止中です。