jQueryでInstagramのフィードを取得して自動スクロールさせる

手軽におしゃれな写真をシェアできるサービス「Instagram」。
写真が正方形というところがすごく素敵です。フィードを取得できないかなぁと思ったら、APIやプラグインが揃っていたのでさっそく試してみました。自身のアカウントや人気タグのフィードをランダムで取得し、横方向に自動スクロールさせてみます。今回使用したのは、以下の2つのjQueryプラグイン。

jQuery simplyScroll

横方向に延々と自動スクロールしてくれるjQueryプラグイン
http://logicbox.net/jquery/simplyscroll/
Github – logicbox/jquery-simplyscroll
今回、オプションは特に使用しません。

Instafeed.js

Instagramで最新のfeedを取得してくれるjQueryプラグイン
http://instafeedjs.com/
Github – stevenschobert/instafeed.js
オプションが細かく設定できるすぐれたプラグインです。

Instafeed.jsの主なオプション

ハッシュ

キー

用途

clientId (string)

Instagram APIで取得したあなたのClient IDを指定します。
http://instagram.com/developer/

accessToken (string)

User IDとaccessトークンがわからない方は、Instafeed.jsでOAuth認証することによって取得できます。
こちら

target (string)

画像を表示させたいDOM要素のIDを指定します。
デフォルトはinstafeed（たぶん）

template (string)

出力したいHTMLを指定することができます。
こんな具合にね

get (string)

popular – 人気の投稿

tagged – タグ

location – ロケーション

user – ユーザー

取得したい投稿の種類を指定します。

template (string)

出力したいHTMLを指定することができます。
こんな具合にね

tagName (string)

getオプションでtaggedを選ぶならこの設定が必要です

locationId (number)

getオプションでlocationを選ぶならこの設定が必要です

userId (number)

getオプションでuserを選ぶならこの設定が必要です

その他sortByやbeforeやafterなどの実行前後の動作指定用オプションがあります。詳しくは以下をご覧ください。
http://instafeedjs.com/#standard

ではさっそく自身のアカウントのフィードを取得してみます。

html

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

JS

var userFeed = new Instafeed({
  get: 'user', //ユーザー名から取得します
  userId: 2945393597, //ユーザーIDを指定
  accessToken: '2945393597.1fa4ab2.a312a92e8a9f4911b8f601de98c448fd', //アクセストークンを指定
  limit: 10, //取得投稿の上限を設定
  sortBy: "random", //ランダムで並び替え
  template: '',
  after: function() {
    $('#scroller ul').simplyScroll(); //Instafeed実行後、simplyScrollを実行して横スクロールさせる
  },
});
userFeed.run();

CSS

.simply-scroll-container { position:relative; }
.simply-scroll-clip { position:relative; overflow:hidden; }
.simply-scroll-list { margin:0; padding:0; overflow:hidden; }
.simply-scroll-list li { float:left; width:150px; height:150px; margin:0; padding:0; list-style:none; }

上記の設定で動かしているのがコレです。

アパレルや飲食店など、画像がユーザーへの訴求効果大となるWebサイトにはもってこいですね！どうぞお試しください。

ついでにネクストのInstagramアカウントのフォローもどうぞ！