Instagram のユーザー情報を取得＋写真をサイトに表示＋それを自動スクロールする　jQuery

Instagram の写真情報を取得してサイトに表示させ、
自動的にスクロールさせる。
これを jQuery とそのライブラリを使って設置してみました。

設置したものが ↓ です。
Test WEBSITE ｜ Silent Cait
以下、この設置したもののままになるようなソースの記述を見本に説明をしています。

Instagram のアカウント取得

アカウントの取得
Instagram
（※ 基本スマホ用アプリで、スマホ写真のシェアを目的としているようなので、主な機能はスマホからでないと使えません。）

Instagram のユーザー情報「アクセストークン」を取得する

１）以下にアクセスして、ログインします。
Instagram Developer Documentation

２）↓「Register Your Application」をクリックします。

３）↓以下の項目を入力していきます。

Application Name：何でもＯＫ（日本語でも）
Description：何でもＯＫ（日本語でも）
Website URL ：設置するＵＲＬ
Redirect URL ：設置するＵＲＬで問題無し
Contact email：必須なので一応入力（でもこの処理でメールが来るわけではなさそう）

ここまで入力したら、隣のタブに移ります。

４）チェック項目に注意

初期設定で、Disable inpliclt OAuth にチェックが入っていますが、これを外さないとエラーになるようです。
両方、チェックを外した状態にして下さい。

５）ロボットではない事を示すキャプチャ入力

Instagram-アクセストークン取得手順（５）

上の画像にはないですが、初めてこの処理をする時は、
画像の数字を入力する項目がありますので、
それを入力してから『 Register 』のボタンをクリック。
（文字が読みにくい場合は、リサイクルマークのような〇の小さいボタンをクリックすると、画像が変わります。
スピーカーボタンを押すと文字列を音声で読み上げてくれます）

６）エラーが無ければ以下のような表示になります。
エラーが出た場合は手順（４）のチェック項目にチェックが入っていないか、確認してください。

この情報を使い、アクセストークンを取得します。

※他の人にウェブ制作などしてもらう場合は、上記の情報のメールアドレス以外を、ウェブ制作してくれる人や業者に情報を渡してください。
もちろん、手順（９）まで進んでからその情報を渡しても大丈夫です。

７）ＵＲＬに（６）で取得した情報を加えてブラウザでアクセスする
【クライアントＩＤ】　→ CLIENT ID
【リダイレクトＵＲＬ】　→　REDIRECT URL
以下のＵＲＬの２ヶ所を自分の情報に書き換えます。

https://instagram.com/oauth/authorize/?client_id=【クライアントＩＤ】&redirect_uri=【リダイレクトＵＲＬ】&response_type=token

８）このＵＲＬにブラウザでアクセスすると、
リダイレクトＵＲＬのサイトが表示されます。

表示されたサイト自体には意味はなく、この時のＵＲＬに、必要な文字列が足されているので、これをまたコピー。
※この画像でのブラウザはスキンを変更しているので、クライアントによってそれぞれ見え方が違うかも知れません

９）手順（８）で表示されたＵＲＬを一旦ここ↓にペーストして見てみましょう。

0123456789.a0b123c.d4567e89f01f234b565ghi78j90k1l2m3
『 . 』（ドット）２つを含む全体が「アクセストークン」で、
この中の最初に
0123456789.
という感じで10ケタの数字があります。
これが、ユーザー固有ＩＤです。

「アクセストークン」
「ユーザー固有ＩＤ」
は、この後の jQuery の設置に使いますので、
必ずテキストエディタやメモ帳などに保存して下さい。
※上のテキストエリアの情報はどこにも保存されませんので注意して下さい。

jQuery でＷＥＢサイトに表示させる

必要なライブラリをダウンロード

まず、必要な jQuery と
jQuery ライブラリを用意します。

<a href="https://jquery.com/download/">Download jQuery | jQuery</a>jquery.com
ここでは、jQuery 本体は、Google CDN へ直リンクして使います。

jQuery 本体とは別にダウンロードするライブラリは以下です。

Instagram の写真を表示してくれる jQuery ライブラリ、『 Instafeed.js 』。<a href="http://instafeedjs.com/">Instafeed.js - a simple Instagram javascript plugin</a>instafeedjs.com

↓こちらは『 Instafeed.js 』の GitHub。
mini ではないファイルはこちらからダウンロードしてください。
画面右側の『 Download ZIP 』をクリック。<a href="https://github.com/stevenschobert/instafeed.js">stevenschobert/instafeed.js</a>github.com

自動スクロールしてくれる jQuery ライブラリ『 jquery.simplyscroll.js 』。<a href="http://logicbox.net/jquery/simplyscroll/">jQuery simplyScroll - Logicbox</a>logicbox.net

js フォルダに上記２つを保存します。

ＨＴＭＬファイルに記述（１）

ＨＴＭＬファイルの <head></head>の間の下の方に↓のような感じでコードを記述します（一例です）。
ついでにスタイルシートへのリンクタグも。

<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/instafeed.js"></script>
<script src="js/jquery.simplyscroll.js"></script>
<script>
 // ここの記述は後記で
</script>

ＨＴＭＬファイル内の Instagram の画像を表示させたい部分に以下の記述を。
id 名、 class 名は、変更しないように。
（変更する場合はプログラム内も）

<div id="scroller">
  <ul id="instafeed" class="clearfix"></ul>
</div>

Instafeed.js のファイル内の設定項目

10行目～16行目

target: 'instafeed',
get: 'user',
resolution: 'low_resolution',
sortBy: 'most-recent',
links: true,
mock: false,
useHttp: false

このライブラリ配布サイト instafeedjs で、
下にスクロールすると、設定項目の説明があります（英語）。

target : これはid名なので、id名を変更したい場合は、
設定項目とＨＴＭＬ側の記述が合うように変更。

get ：自分や特定のユーザーの写真を表示する場合は、'user' で。
そのほかの設定は、「人気の写真」など、自分とは関係ない人の写真など。

resolution ：ここは表示写真のサイズが３択になっていて、
low_resolution は、306px × 306px。
thumbnail (default) - 150x150
low_resolution - 306x306
standard_resolution - 612x612

sortBy ：ここは、ソートの方法指定。
most-recent は、新しい→古い順に表示。

links ：ここは、画像をクリックしたら Instagram の写真に
ジャンプするようリンクにするかどうかの設定。
true が「リンクする」 false が「リンクしない」

mock： false,
useHttp： false
この２つは、いじる必要があるのか分からなかったので、そのまま。。。

jquery.simplyscroll.js の設定項目

23行目～34行目

customClass: 'simply-scroll',
frameRate: 24, //No of movements per second
speed: 3, //No of pixels per frame
orientation: 'horizontal',
//'horizontal or 'vertical' - not to be confused with device orientation
auto: true,
autoMode: 'loop', //auto = true, 'loop' or 'bounce',
manualMode: 'end', //auto = false, 'loop' or 'end'
direction: 'forwards', //'forwards' or 'backwards'.
pauseOnHover: true, //autoMode = loop|bounce only
pauseOnTouch: true, //" touch device only
pauseButton: false,
//" generates an extra element to allow manual pausing 
startOnLoad: false //use this to delay starting of plugin until all page assets have loaded

ここでは、
speed： 1, を 3, に変更したのみで、
後はいじっていません。
jquery.simplyscroll.js の配布サイト（英語）で簡単な説明がありますが、
コメントアウトされている記述程度の説明かも。

ＨＴＭＬファイルに記述（２） embed

ＨＴＭＬファイルに記述（１）の記述の下、
embed に、<script> タグに挟む形で以下を記述（一例です）。
userId:
accessToken:
を、取得した自分の情報に書き換えて下さい。

<script>
var userFeed = new Instafeed({
  userId: 【固有ユーザーＩＤ数字10ケタ】,
  accessToken: '【アクセストークン 50桁くらいの文字列】',
  limit: 10, //取得投稿の上限を設定
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" alt="{{caption}}"><p>{{caption}}<br><small>{{model.created_time}}</small></p></a></li>',
  filter: function(image) {
 
	var date = new Date(image.created_time*1000);
 
	m = date.getMonth();
	d = date.getDate();
	y = date.getFullYear();
 
	var month_names = new Array ( );
	month_names[month_names.length] = "１";
	month_names[month_names.length] = "２";
	month_names[month_names.length] = "３";
	month_names[month_names.length] = "４";
	month_names[month_names.length] = "５";
	month_names[month_names.length] = "６";
	month_names[month_names.length] = "７";
	month_names[month_names.length] = "８";
	month_names[month_names.length] = "９";
	month_names[month_names.length] = "10";
	month_names[month_names.length] = "11";
	month_names[month_names.length] = "12";
 
	var thetime = y + '年 ' + month_names[m] + '月 ' + d + '日';
 
	image.created_time = thetime;
 
	return true;
	},

  after: function() {
    $('#scroller ul').simplyScroll();
//Instafeed実行後、simplyScrollを実行して横スクロールさせる
  },
});
userFeed.run();
</script>
</head>
<body>

userId：【固有ユーザーＩＤ数字10ケタ】
アクセストークンの取得の所で入手した、固有ユーザーＩＤで【】ごと書き換えて下さい。
クォートで挟むとダメでした。

accessToken： '【アクセストークン 50桁くらいの文字列】'
アクセストークン全体の文字列で【】ごと書き換えて下さい。

limit： 10, スクロールに取得・表示する画像数をここで指定。

template：
ここには、表示させたいコードを記述。
上記は、画像、その下にキャプション、更にその下に日付を表示する記述になっています。

表示できる項目についても ↓配布サイトで説明があります。
Instafeed.js - a simple Instagram javascript plugin

日付を表示するカスタマイズは、このライブラリ作者ご自身の GitHub 内で案内されています↓。
gist.github.com

スタイルシートの記述 style.css

リセットやマージンなど、任意で調整して下さい。
（設置サイトのものはマージンやパディングなど０にリセットしてから下記の記述をしています。）
以下は一例です。（未熟者の記述です）
キャプションの文章が長いと、レイアウトが違ってくるかも知れませんので、ご自身の場合の表示確認はしっかりしてください。
ここでは、ＨＴＭＬ側の template 設定でキャプション・日付までリンクのタグで挟んでいますので、タグで挟む範囲やリンクの文字色などの設定も、お好みで変更してください。

ul {
  list-style: none !important;
}

/* ── Instagram jQuery simplyScroll ─────*/
.simply-scroll-container {
   position: relative;
}
.simply-scroll-clip {
  position: relative;
  overflow: hidden;
}
.simply-scroll-list {
  overflow: hidden;
}
.simply-scroll-list li {
  float: left;
  margin-left: 34px;
  width: 320px;
  font-size: 12px;
  line-height: 14px;
 }
 
.simply-scroll-list li img {
  display: block;
  border: 7px solid #FFF;
  box-shadow: 0 0 1px #888;
  margin-bottom: 14px;
 }

以上、見本に記述しているソースそのままの設定で、↓このように表示されます（クリックすると設置したサイトにジャンプします）。

もしも参考になるなら、ソースなどご自由にご覧（ご利用）ください。

自分の理解力・経験では解説しているサイトやブログの解読が難しかったですが、以下のサイトを参考にさせていただきました。

<a href="http://www.nextsoft.jp/articles/2015/jquery-instagram-feed.html">jQueryでInstagramのフィードを取得して自動スクロールさせる</a>www.nextsoft.jp

Instafeed.js - a simple Instagram javascript plugin

stevenschobert/instafeed.js · GitHub

<a href="http://syncer.jp/instagram-api-matome">Instagram APIでwebサービスを作りたい全ての人に向けて書きました</a>syncer.jp

<a href="https://github.com/stevenschobert/instafeed.js/issues/55">Can we pull the Date of post? · Issue #55 · stevenschobert/instafeed.js</a>github.com

<a href="http://liginc.co.jp/web/service/other-service/146750">Instagram APIを取得してWebサイトと連携し、投稿写真を自動に掲載する方法 | 株式会社LIG</a>liginc.co.jp

<a href="http://www.sharecoto.co.jp/service/instagram_api.html">Instagramキャンペーン・応用事例：Instagram（インスタグラム）のAPIでできること</a>www.sharecoto.co.jp

Instagram 公式サイト
Instagram Developer Documentation

Instagram を表示する jQuery ライブラリ
Instafeed.js - a simple Instagram javascript plugin

jQuery 自動スクロールするライブラリ
jQuery simplyScroll - Logicbox

ＷＥＢ制作の勉強メモ / 猫脳人間

HTML　CSS　JavaScript　ActionScript　jQuery　WordPress　PHP　Illustrator　Photoshop　Flash … 猫サイズの脳でも覚えるぞと…

Instagram のユーザー情報を取得＋写真をサイトに表示＋それを自動スクロールする　jQuery

Instagram のアカウント取得

Instagram のユーザー情報「アクセストークン」を取得する

jQuery でＷＥＢサイトに表示させる

必要なライブラリをダウンロード

ＨＴＭＬファイルに記述（１）

Instafeed.js のファイル内の設定項目

jquery.simplyscroll.js の設定項目

ＨＴＭＬファイルに記述（２） embed

スタイルシートの記述 style.css

Instagram のアカウント取得

Instagram の ユーザー情報「アクセストークン」を取得する

jQuery で ＷＥＢサイトに表示させる

必要なライブラリをダウンロード

ＨＴＭＬファイルに記述（１）

Instafeed.js のファイル内の設定項目

jquery.simplyscroll.js の設定項目

ＨＴＭＬファイルに記述（２） embed

スタイルシートの記述 style.css

Instagram のユーザー情報「アクセストークン」を取得する

jQuery でＷＥＢサイトに表示させる