instafeed.jsを使ってInstagramのAPIでハッシュタグを指定して画像を取得してみた

2015.8.15

最近友達が次々にInstagramを使い始めて、色々と写真撮って楽しんでいます。

今回触ってみたキッカケは、大学の先生が「Instagramを使ってフォトコンテストをやってみたいんだよね」って(たしか)言っていたことです。

アプリケーション登録

http://instagram.com/developer/でアプリケーションを登録します。

流れとしては、

Register Your Applicationをクリック
右上の新しいアプリを登録ボタンをクリック
アプリケーション名などの情報を登録。
CLIENT IDやREDIRECT URLなどの情報が表示される。

4.で表示されるものは、アクセストークンの取得や実際にアプリで使うものです。

この辺りのアプリケーションの説明は色んな記事で紹介されているのでそこを。

instafeed.jsで情報を取得してみる

このinstafeed.jsというjQueryのプラグインがかなり使いやすくて、設置も簡単なうえ下記を指定して情報を取得出来るようです。

人気のある画像
ハッシュタグ
位置情報
ユーザー

人気のある画像やハッシュタグなんかは使いやすそうですね。

また画像の他以下のものが取得できます。

画像のリンク
投稿者コメント
likeの数
コメント数
撮影した場所(位置)情報
ユニークID
画像のjsonオブジェクト

使い方

    :
    <body>
        <ul id="instafeed"></ul>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="path/to/instafeed.min.js"></script>
        <script type="text/javascript">
            var feed = new Instafeed({
                get: &#039;tagged&#039;,
                tagName: &#039;awesome&#039;,// 取得したいハッシュタグ名
                links: true,
                limit: 20,// 取得する数
                resolution: &#039;low_resolution&#039;,
                template: &#039;<li><a href="{{link}}"><img src="{{image}}" alt="{{caption}}"></a></li>&#039;,
                clientId: &#039;Instagram APIで取得したクライアントIDをココに&#039;
            });
            feed.run();
        </script>
  </body>
</html>

あとはこれをCSSで整形すればOKですね。驚きの簡単さ。

templateというオプションで情報を表示する際のテンプレートを指定できるので上の様に指定すると画像とそのリンクが表示されます。

その他詳しくはinstadeed.jsのサイトを御覧ください。

注意

今回はJavaScriptを使って情報を取得しましたが、JavaScriptで全て行うとクライアント側にファイルが見えてしまうため、アクセストークンなんかも見えちゃって良くないんだとか。認証の辺りをPHPなどのサーバーサイドでやると良いらしい。

詳しくは下記記事を。

まとめ

一応パッと思いついたやりたかったことは出来ました。

あとLike押せるといいんですけどね…　それは出来なさそうなので他の手を使ってみます。