Instagram APIを使用し画像を表示できるjQueryプラグイン

  • 17
    Like
  • 0
    Comment

jQueryプラグインを利用して、Instagramの画像を表示できる方法です。

Instagramアプリケーションを登録

https://www.instagram.com/developer/deprecated/

アプリケーションを登録
上記赤枠のところRegister Your Applicationをクリックします。

Register New Client
各項目を入力し、緑のRegisterボタンを押せば完了です。

登録完了
完了するとこのような項目が表示されます。

APIの利用に必要な'userId'を確認

API Consoleにアクセス
https://www.instagram.com/developer/deprecated/api-console/

  • Get users/searchを選択
  • Authenticationを「OAuth 2」に変更
    OAuth 2

  • 「q」にユーザー名を入力

  • Responseの下の方にuser_idが出てくる

「Instafeed.js」をダウンロード

http://instafeedjs.com/

jQueryプラグインを読み込みます。

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

次のようなjQeuryを記述して、画像を読み込むハッシュタグや画像数を設定します。

$(document).ready(function() {
var userFeed = new Instafeed({
    target: '表示したい場所(今回は#instafeed)',
    get: 'user', //ユーザーから取得
    userId: '000000000', //ユーザーID(先ほど確認した'user_id')
    sortBy: 'most-recent',//最新記事から順に取得
    links: true , //画像リンク取得
    limit: 3, //取得する画像数を設定
    resolution: 'low_resolution', //画像サイズを設定
    template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}"></a></li>',
    accessToken: '000000000.000aaaa.0aaaa0000000000aaaa' //アクセストークン
    });
    userFeed.run();
});

下記のようなhtmlが吐き出されます。

<ul id="instafeed">
    <li><a href="https://www.instagram.com/p/〜〜/" target="_blank"><img src="" alt=""></a></li>
    <li><a href="https://www.instagram.com/p/〜〜/" target="_blank"><img src="" alt=""></a></li>
    <li><a href="https://www.instagram.com/p/〜〜/" target="_blank"><img src="" alt=""></a></li>
</ul>
  • ul#instafeedを空の状態でマークアップしておけば自動でliが生成されます。

  • 画像の大きさはCSSでも指定が可能です。