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
Help us understand the problem. What is going on with this article?

Instagram APIから画像データ取得のメモ

More than 5 years have passed since last update.

InstagramのAPIは知っていたのですが、自分自身の投稿した画像データを取得する方法をやったことがなかったので、実践してみました。

今更ですが、よく使うと思うのでメモしておきます。

アプリケーションの登録

01.png

自分のInstagramアカウントでログイン
アプリケーションの登録を行う。

  • Applictaiton Nameは、登録するアプリケーション名を入力
  • Dscriptionは、用途などを入力
  • Websiteは、自分のサイト情報を入力
  • OAuth redirect_uriは、アクセストークンを取得する際にリダイレクトされるURL(自分はサイトURLを入力しました)

アクセストークンの取得

アプリケーションを登録したら、クライアントIDを取得することができます。

03.png

https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=token
  • 【CLIENT-ID】は、取得したクライアントIDを入力
  • 【REDIRECT-URI】は、先ほど登録したリダイレクトURLを入力

上記のアドレスをブラウザで叩くと、アクセストークンが返ってくる
#access_token=のコードが必要なので、メモしておきます。

http://hogehoge.com/#access_token=************************

取得したデータをウェブサイトで表示させる

取得したJSONデータから、WEBサイトに表示させる。
参考サイトのサンプルコードですが、どのようにデータを取得し表示するか次第ですが、案件ごとにカスタマイズができそうですね。

instagram.js
$(function() {
  $(".instagram").text("loading...");
    $.ajax({
      url: "https://api.instagram.com/v1/users/self/media/recent",
      data: { access_token: "【ブラウザで叩いて返ってきたコードを入力】" },
      dataType: "jsonp",
      error: function(jqXHR, textStatus, errorThrown) {
        $(".instagram").text(textStatus);
      },
      success: function(data, textStatus, jqXHR) {
        $(".instagram").text("");
        for (var i = 0, length = 5; i < length; i++) {
          var d = data.data[i];
          $(".instagram").append(
          $("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url))));}
        }
    });
});
gallery.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォトギャラリー</title>
</head>
<body>
<div class="instagram"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="instagram.js"></script>
</body>
</html>
  • jQueryバージョン:1.11.1

参考サイト

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