Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
25
Help us understand the problem. What is going on with this article?
@d-uee

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

More than 3 years have passed since last update.

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

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

アプリケーションを登録
上記赤枠のところ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」をダウンロード

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でも指定が可能です。

25
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
d-uee

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
25
Help us understand the problem. What is going on with this article?