jQueryプラグインのinstafeed.jsを使って、インスタグラムのフィードを表示する

Instagramに投稿されたデータをAPIを使用して、取得し表示する。

  1. Instagramのデベロッパーにアクセスする
  2. アプリを登録する、日本語で内容を入力してOK
  3. Disable implicit OAuth: チェックを外す
    これを外しておかないと、アクセストークンが取得できない
  4. 下記のようなURLにアクセスすると、アクセストークンがURLに表示される
    書式:https://api.instagram.com/oauth/authorize/?client_id=【CLIENT ID】&redirect_uri=【REDIRECT URI】&response_type=token
    サンプル:https://api.instagram.com/oauth/authorize/?client_id=123456789&redirect_uri=https://example.com/&response_type=token
  5. instafeed.jsをダウンロード
  6. jQueryコアファイルの読み込みの記述の後ろに、instafeed.jsのプラグインファイルを読み込ませる
  7. コードサンプルのように表示する
  8. CSSやHTMLをサイトにあわせて編集する

コードサンプル

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script src="js/instafeed.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
$(document).ready(function() {
var userFeed = new Instafeed({
userId: '123456789', //ユーザーID
accessToken: '0000000000.00000000.00000000000000000000000000000', //アクセストークン

get: 'user', //ユーザーから取得
sortBy:'most-recent', //並び順

target: 'instafeed1', // 表示させるボックスのIDを指定「#」は無しで
links: true , //画像リンク取得
limit: 4, //取得する画像数を設定
resolution: 'low_resolution', //画像サイズを設定
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}"></a></li>'
});
userFeed.run();
});
</script>
<ul class="clearfix" id="instafeed1"></ul>
</body>
</html>