簡単！Instafeed.jsでWEBページにインスタの写真一覧を埋めこむ方法

Instagramの写真を動的にWEBサイトを表示させるには、
Instagram API （SandBox モード）を使う必要があります。

APIを使い、instafeed.jsというプラグインを利用すれば、
最新の写真（上限20枚まで）を動的に表示させる事ができます。

1 動作サンプル
2 表示に必要なこと
3 USER ID、CLIENT ID、ACCESS TOKENを取得する
4 アクセストークンを取得する
5 instafeed.jsでWEBページに表示する

動作サンプル

ライトプラン　詳細はこちら

動作サンプルはこちら

表示に必要なこと

今回は、

APIを使うためのInstagram Developerページでの登録方法。
APIを使ってページに表示させるためのプラグインinstafeed.jsの使い方。

をを説明します。

USER ID、CLIENT ID、ACCESS TOKENを取得する

USER ID
CLIENT ID
ACCESS TOKEN

上記の情報を取得する方法を説明します。

STEP1

PCのブラウザから、Instagramにログインして下さい。

https://www.instagram.com/

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×150
low_resolution – 306×306
standard_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>

ライトプラン　詳細はこちら

動作サンプルはこちら

こちらも合わせてお読み下さい。

簡単！自力でInstagramのハッシュタグ投稿一覧を埋め込む方法

動作サンプル

表示に必要なこと

USER ID、CLIENT ID、ACCESS TOKENを取得する

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

アクセストークンを取得する

STEP1

STEP2

STEP3

instafeed.jsでWEBページに表示する

Instafeed.jsをダウンロードする

JavaScript

HTML

CSS

こんな記事も読まれています。

簡単！bootstrapのボタンデザインサンプル（button design sample）

Google Maps Apiで現在地のスポット情報をマーカーで示すサンプル

簡単！Bootstrapを使ったパララックス（parallax）効果テンプレートの紹介（スマホレスポンシブ対応）

“簡単！Instafeed.jsでWEBページにインスタの写真一覧を埋めこむ方法” への1件のフィードバック