手軽におしゃれな写真をシェアできるサービス「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) |
|
取得したい投稿の種類を指定します。 | ||||
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: '
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アカウントのフォローもどうぞ!