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

投稿日: 投稿者: kishiken

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にログインして下さい。

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のハッシュタグ投稿一覧を埋め込む方法

この記事が気に入ったら
いいね ! しよう

シェアする
ツイートする

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

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

  1. ピンバック: instagramの自分の投稿を自分のサイトに表示 – IDEAs

コメントは停止中です。