簡単！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＋jQueryプラグインHierarchy Select

簡単！フォーム送信中の誤動作を防ぐjQuery BlockUI Pluginのサンプル

簡単！Bootstrapで作るタブメニュー＆ナビゲーション

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