Help us understand the problem. What is going on with this article?

Instagram APIを使ってWebページに表示する

More than 1 year has passed since last update.

みんな大好きInstagram

Instagramに投稿したデータを取得してみたかったので、まとめました。(今更感)
今回は、SandBoxの機能を使って実装。

Instagram API

Instagram APIは2016年6月に仕様が変更され、Instagram APIを使うにはInstagramの承認が必要になる。(ただ、審査がとても厳しいらしい。。)

SandBox

  • 未承認の場合に制限付きでAPIが使える
  • 読み込めるデータは最新20件
  • 最新20件まで取得

アカウント作成

アプリをダウンロードし、アカウントを作成する
※今回、作成方法は省略します

https://www.instagram.com/

アプリケーション登録

1.png

https://www.instagram.com/developer/ へアクセス

  • Register Your Application をクリック

2.png

  • Register a New Client をクリック

6.png

  • Security タブをクリック
  • Disable implicit OAuth: チェックを外す

3.png

  • 必要な項目を入力後、Register をクリック
* Application Name : アプリケーション名
* Description : アプリケーション説明
* Company Name : 会社名(任意ですので、空欄で大丈夫)
* Website URL : WebサイトURL
* Valid redirect URIs : 認証リダイレクトURL(Website URLと同じ)
* Privacy Policy URL : 個人情報保護方針のURL(任意ですので、空欄で大丈夫)
* Contact email : 連絡先メールアドレス

※ 後から、内容の編集可能。

4.png

  • こちらで登録完了

アクセストークン取得

https://instagram.com/oauth/authorize/?client_id=「取得したCLIENT ID」&redirect_uri=「設定したValid redirect URIs」&response_type=token
  • 上記URLに「取得したCLIENT ID」と「設定したValid redirect URIs」を記述し、アクセスする

7.png

  • Authorize」をクリック

5.png

http://リダイレクトURL.com/#access_token=XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
  • リダイレクトURLで指定したページに遷移、アクセストークンが表示される
https://api.instagram.com/v1/users/self/media/recent?access_token=取得したアクセストークン
  • 上記のURLで自分のアカウントのJSONデータを取得できる

Webページに表示する

JavaScriptのみでも表示できますがセキュリティを考えてPHPを使います。(javascriptアクセストークンがみえてしまうので。。)
※html,CSSは良しなに調整してください。

HTML

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Instagtam API 0084</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="common/instagram.css">
</head>
<body>
  <h1><i class="fa fa-instagram fa-fw"></i>Instagtam API 0084</h1>
  <ul class="instagram"></ul>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="common/instagram.js"></script>
</body>
</html>

PHP

instagram.php
<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //アクセストークン
    $access_token = "XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; //取得したアクセストークンを設置
    //JSONデータを取得して出力
    echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");
    //終了
    exit;
}
?>

JavaScript

instagram.js
$(function(){
    var $container = $(".instagram");
    var html = "";

    $.ajax({
        url: "common/instagram.php",//PHPファイルURL
        type:"POST",
        dataType: "json"
    }).done(function(data){
        //通信成功時の処理
        $.each(data.data,function(i,item){
            var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
            var link = item.link; //リンクを取得
            html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
        });
    }).fail(function(){
        //通信失敗時の処理
        html = "<li>画像を取得できまへん。</li>";
    }).always(function(){
        //通信完了時の処理
        $container.html(html);
    });
});
  • "XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" の箇所に取得したアクセストークンを設置する

CSS

instagram.css
body {
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

.instagram {
  width: 90%;
  margin: 0 auto 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}

.instagram li {
  padding: 20px;
}

.instagram li img {
  width: 320px;
  height: auto;
}

@media screen and (max-width: 47.9375em) {
  .instagram li {
    width: 40%;
    padding: 10px;
  }

  .instagram li img {
    width: 100%;
  }
}

参考文献

Instagram公式
Instagramドキュメント
InstagramAPIでの画像取得

0084ken
多分web屋です。 何にも特化してない人です。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした