Instagram 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>');
    }
  }
});