インスタ映え、って言葉が流行するぐらいに盛り上がってるInstagram。
ツイッターやFacebookはやってなくてもインスタはやってるという芸能人もいます。
・・・・・・まあ、それなりに面倒くさいですからね前者二つは(笑)

写真ありき、って事が前提のこのInstagramについては深くここで語るのは割愛しますが、「インスタのサムネイル一覧を自身のWebサイトにギャラリー的に並べたい！」って要望を請けまして。

「そんなんRSS吐いてるやろから簡単やろー」と思ってましたが、これがそれなりの手続きが必要でしてね・・・・
よく考えると芸能人のInstagram一覧を自分のブログにあたかもなりすましの如く貼り付ける輩も出てくるでしょうしね。
そんな人はネットにはたっくさんいるってのもよくわかっております(笑)

jQueryプラグインの「instafeed」

まず、Webサイト側に設置するものはjQueryプラグインである「instafeed」。
これで並べるだけの事は可能になります。

http://instafeedjs.com/

ダウンロードは上記から。
上記のサイトに設置方法からオプションから何から全部書いてあります。

InstagramのアカウントにAPIを使用許可を出すための手続き

さて、次はinstagramのAPIを使うために「開発者登録」をしなければなりません。
自分のInstagramのアカウントに移動して自分のアカウントのトップページに移動。

そこのフッターに「API」というテキストリンクがあるのですが、既に運用済みのアカウントの場合、次々に写真が出てくるのでものすごくクリックしにくいです(笑)
写真が出るか、APIをクリックするかどちらが先かのせめぎ合いを楽しんで下さい（違

無事に「API」をクリック出来たらここで開発者登録を。
もう、この一連の作業がややこしくてね。

ここで取得をしなければならんのは

  • User ID
  • Client ID
  • アクセストークン

この3つがないとさっきのInstafeedは動作しませぬ。

この3つを取得するための手続きは株式会社カポタスト様の「Instagram APIを使ってWEBサイトに写真を表示させてみよう」という記事が一番わかりやすかったです。必読。

https://capotast.co.jp/article/detail/21/

（自分で記事を書き直す労力も失うほど面倒くさいので頑張りましょう・・・）

最後にinstafeedをWebサイト側に設置する

ここまでの登録が終わると後は設置するだけです。

<script type="text/javascript">
$(document).ready(function() {
var userFeed = new Instafeed({
	clientId: '********************************',
	get: 'user', 
	userId: '***************', //ユーザーID
	sortBy: 'most-recent',//最新記事から順に取得するためのオプション
	links: true , //画像リンク取得するかどうかのオプション
	limit: 4, //取得する画像数を設定するためのオプション
	resolution: 'low_resolution', //画像サイズを設定
	template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}"></a></li>',
	accessToken: '*********************************' //アクセストークン
    });
    userFeed.run();
});
</script>

これをHead内に設置。オプションなどは配布サイトのを参考にしました。
もちろんこれを記述する前にちゃんとjQueryとinstafeedへのリンクも忘れずに！

あとは設置したい所に

<ul id="instafeed"></ul>

を書けばきっちりとサムネイル一覧が表示されるはずです。
画像の大きさはオプションでは固定3種しかないので、あとはCSSなどで調整をば。
これを例えばスライダーとして表示させたい、という場合は同じくjQueryプラグインの「Slick」とinstafeedのafterオプションで可能です。

・・・・・・ふうう・・・・疲れましたわ。