webmanab.html

menu

できるだけ早く簡単にinstagramのフィードをAPIで取得する -『API』

　

toc
ー

  1. API取得用のクライアントの作成
    1. USER IDの取得
      1. アクセストークンの取得
        1. プラグインInstafeed.jsで表示

          自分のinstagramアカウントの投稿のみをAPIを使って取得したいときの駆け足のtipsです。
          とにかく簡単にJavaScriptのみで実装したい時に参考にしてください。

          API取得用のクライアントの作成

          1. ブラウザでinstagramにログイン
          2. フッターのナビゲーション「API」
          3. メインビジュアルのボタン「Register Your Application」
          4. デヴェロッパー登録
          5. メインビジュアルのボタン「Register Your Application」
          6. 上部のボタン「Register a new Client 」
          7. Detailsタブの Application Name / Description / Website URL / Valid redirect URIs (基本Website URLと同じでok) を入力
          8. Secyrityタブの「Disable implicit OAuth」のチェックをはずす
          9. 「Resister」ボタン
          10. CLIENT IDをコピーしてメモしておく

          USER IDの取得

          1. find instagram user idでidを取得
          2. Usernameを入力
          3. User IDをコピーしてメモしておく

          アクセストークンの取得

          1. https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&response_type=tokenに「CLIENT_ID」と「REDIRECT_URL」を先ほど作成した内容に置き換えてアクセス
          2. 「Authorize」ボタン
          3. 「REDIRECT_URL」のページへ遷移
          4. URLの末尾に「#access_token=*」の形式で「access_token」が返っているのでコピーしてメモ

          プラグインInstafeed.jsで表示

          取得と描画は「Instafeed.js」を利用すると、簡単に出力することができます。

          html


          <div class="instagram" id="instafeed"></div>
<script src="/assets/js/instafeed.min.js"></script>

          javascript


          var myfeed = new Instafeed({

    clientId: '[your client id]',
    get: 'user',
    userId: '[your user id]',
    accessToken:'[your token]',
    links: true ,
    limit: 4, // 件数
    resolution:'standard_resolution',  // 解像度
    template: '<li class="instagram_item"><a class="instagram_target" href="{{link}}" target="_blank" style="background-image: url({{image}});"><span>♡{{likes}}</span></a></li>', // {{image}} {{link}} {{caption}} {{likes}} {{comments}}

    success: function(){
      // コールバック
    }

  });
myfeed.run();

          他にもいろいろなオプションを渡すことで、ソートしたり、好みやデザインに合わせることができます。コールバック関数で、ローダーを管理したりすることもできますね。

          javascript


          var loadButton = document.getElementById('load-more');
  var feed = new Instafeed({
    // every time we load more, run this function
    after: function() {
      // disable button if no more results to load
      if (!this.hasNext()) {
        loadButton.setAttribute('disabled', 'disabled');
      }
    },
});

loadButton.addEventListener('click', function() {
  feed.next();
});

feed.run();

          上記のように、公式では「Load more」ボタンを設置するサンプルが用意されています。

          ただ、このスクリプトを利用すると、アクセストークンなどが丸見えになってしまいます。悪用などされると厄介なので、その辺りはケースに応じて対応したいですね。

          おわります。

          できるだけ早く簡単にinstagramのフィードをAPIで取得する -『API』

          share
          ー

          tag
          ー

          tip