読者です 読者をやめる 読者になる 読者になる

dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

Instagram APIを使って他人のタイムラインを取得してサイトに出力するメモ

Instagram ajax JavaScript API

f:id:kokushin:20160322111303j:plain

2016.07.11 追記

APIの仕様変更で上手く動作しなくなっています。
詳しい情報・対策方法はまた別の記事で。


InstagramのタイムラインってTwitterとかと違って公式でウィジェットが用意されてないんですね...。なので提供されているAPIつかって自分でゴニョゴニョしないといけないでやんす。

というわけで、他人のタイムラインを取得してサイトに出力するまでをメモ書きします。

アクセストークンの取得

Instagram APIを使用するには、セキュリティ上「アクセストークン」と呼ばれるものを用意しないといけません。
手順が結構ややこしいので注意してくださいね。

qiita.com

説明が大変なのでここを参照してください(´艸`)

ユーザーIDを取得する

Instagram USER Search

こちらを使わせていただき、ユーザーIDを検索します。

f:id:kokushin:20160322114623p:plain

ユーザーIDっていうのは、上記の画像だと「25025320 」の部分です。
JSで他人のタイムラインを取得するときはアカウント名ではなくユーザーIDでの指定になるので注意しましょう。

JSで取得する

var data = null,
    imgSrc = null,
    tokenID = 'xxxxxxxx.xxxxxxxxxxxxxxxxxxxxxx', // 取得したアクセストークン
    userID = '123456789', // 取得したユーザーID
    itemNum = 10; // 表示数

$.ajax({
  url: 'https://api.instagram.com/v1/users/'+ userID +'/media/recent',
  data: { access_token: tokenID },
  dataType: 'jsonp',
  success: function(json) {
    for (var i = 0; i < itemNum; i++) {
      data = json.data[i];
      imgSrc = data.images.low_resolution.url;
      $('ul').append('<li><a href="'+ data.link +'" target="_blank"><img src="'+ imgSrc +'"></a></li>');
    }
  }
});

上記のコードだと、ユーザーIDで指定したユーザーの最新の投稿10件を<ul>要素へ出力します。

また、imgSrc = data.images.low_resolution.url;の部分のlow_resolutionを変更することで、取得する画像のサイズを変えることが出来ます。
取得できる画像サイズは以下の三通りです。

  • low_resolution ... 320x320
  • standard_resolution ... 640x640
  • thumbnail ... 150 x 150

表示させる大きさによって選択してやるとレンダリング時間も短縮できます。

他にもいろんな情報が取得出来ますので、console.log(json)して中身覗いてみてくださいね。