GUISE KIT

InstagramのAPIを使ってタグやらユーザー投稿やらを呼び出す「Instafeed.js」

2016/05/10追記

検索で来てる人が多かったので補足
こっちの記事で書いたのですが、Instafeed.jsを使うとアクセストークンがソース上でモロ出しになってしまうので、
セキュリティ上これを使うのはちょっと危ないかもしれません。
別のエントリーで書きましたがPHPを使えるのであればこちらを使ったほうがいいと思います。(小並感)
アクセストークンがモロ出しで悪用されたのでInstagramの呼び出しは自分で書こう
Instagram APIから画像データを取得する方法


仕事でインスタの埋め込みが発生しそうになったのでとりあえず自分のサイトに埋め込んで見ることに
色々調べた結果、「Instafeed.js」が使いやすそうだったので実践してみる。

事前準備

クライアントの設定

Instafeed.jsを使う為には諸々の準備が必要なのでまずはそこから

Instagram Developer Documentation

Instagram Deceloppers」からアプリケーション登録をします。
Register Your Applicationからアプリケーション一覧へ。

Manage Clients • Instagram Developer Documentation

Register New Clientから新規追加

Register a Client • Instagram Developer Documentation

入力して登録。

edit

登録できたら設定を編集する

security

Securityのタブへ

disavle implicit OAuth

「Disable implicit OAuth」のチェックを外す。

ハッシュタグを表示するならここまででオッケー
ユーザーの表示するならこの下も必要

アクセストークンの取得

認証用のコードが必要なので以下のURLから

https://instagram.com/oauth/authorize/?client_id=******&redirect_uri=******&response_type=token

「******」にはClient設定で表示されてるやつを入力してページを開くと
REDIRECT URLに入れたページを表示されるはず
そうするとURL欄が下記のようになってる

http://hogehoge.com/#access_token=00000000.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

これの0の部分がユーザーIDでXの部分がアクセストークンになっているのでメモ帳に保存します。

jsの読み込み

<script src="/js/instafeed.min.js" type="text/javascript"></script>

公式サイトから落として読み込みする。

呼び出しコードを貼る

ハッシュタグとユーザーで違うので注意

$(function() {
var feed = new Instafeed({
get: 'tagged',
tagName: '表示したいタグ',
clientId: 'クライアントIDを入れる',
limit: 12,
template: '
<ul>
<li class="col-lg-1"><a href="{{link}}"><img src="{{image}}" /></a></li>
</ul>
 
'
});
feed.run();
});

ハッシュタグ

$(function() {
var feed = new Instafeed({
get: 'user',
userId: '00000000',
accessToken: '00000000.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
limit: 12,
template: '
<ul>
<li class="col-lg-1"><a href="{{link}}"><img src="{{image}}" /></a></li>
</ul>
 
'
});
feed.run();
});

ユーザー

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

後は読み出したい場所にそれっぽいコードを置きます。

こんな感じでトップページ下に置いてみました。
事前準備がクッソ面倒だけど、慣れたら頑張れると思う。