みなさん、こんにちは。
コーディング担当の よっしーさん です。
今回は「ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう！」の第2弾です。
前回の記事で「利用者登録」「アプリケーション登録」まで完了しました。
今回は、その情報を使ってサイトにインスタグラムの写真一覧を表示させるコードをご紹介します。
前回の記事：ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう！その１
1. 登録情報の確認
前回の登録までが完了すると
Manage Clients ページに遷移します。
赤枠部分「MANAGE」ボタンを押すと、下の様な登録した情報を編集できるページに遷移します。
赤枠部分の「 Client ID 」、Security タブの「 Valid redirect URIs 」を使用するので記録しておきます。
次に、左メニュー「 Authentication 」ページへ移動して、アプリケーションのコードに必要な情報を取得します。
2. アプリケーションのコードに必要な情報を取得
「 Authentication 」ページの最下部にある、赤枠部分「 Step One: Direct your user to our authorization URL 」に記載されているアドレスを使用します。
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
上のアドレスの「 CLIENT-ID 」「 REDIRECT-URI 」の部分を、さきほど記録した「 Client ID 」「 Valid redirect URIs 」に置き換えて、ブラウザでアクセスすると、下の様なページに遷移します。
赤枠部分「 Authorize 」ボタンを押すと「 Valid redirect URIs 」に登録した URL に移動するので、ブラウザのアドレス欄を確認します。
#access_token=xxxxxxxxxx.xxxxxxxxxx.xxxxxxxxxx
ブラウザのアドレス欄の URL にある xxxx の部分がアクセストークンです。ドットで区切られている先頭の xxxx の部分が「 ユーザID 」です。この「アクセストークン」と「 ユーザID 」を記録します。
3. jQuery本体とプラグイン「 Instafeed.js 」をダウンロード
jQuery：https://jquery.com/
Instafeed.js：http://instafeedjs.com/
今回は、jQuery のバージョン 1.7.2 を使用しました。
4. HTML に表示させるコードを記述
いよいよサイトにインスタグラムの写真を表示させます。
4-1. jQuery とプラグインを読み込み
src のパスは、サイトの構造に合わせてください。
<script src=”js/jquery-1.7.2.min.js”></script>
<script src=”js/Instafeed.js”></script>
4-2. 表示用のコードを記述
表示させる HTML のタグを記述します。
<ul id=”instafeed”></ul>
下のコードを、先ほど読み込んだ jQuery とプラグインの下に記述します。
<script>
$(function() {
var userFeed = new Instafeed({
target: ‘instafeed’, // 表示させる要素の ID
get: ‘user’,
userId: ‘xxxxxxxxxx’, // ユーザ ID
sortBy: ‘most-recent’,
links: true,
limit: 12, // 表示数
resolution: ‘low_resolution’,
template: ‘<li><a target=”_blank” href=”{{link}}” style=”background-image:url({{image}});”></a></li>,
accessToken: ‘xxxxxxxxxx’ // アクセストークン
});
userFeed.run();
});
</script>
表示させる要素の ID：
リストタグで書き出すので、<ul id=”instafeed”> を指定しています。
ユーザ ID：
記録しておいた「 ユーザ ID 」を指定します。
アクセストークン：
記録しておいた「 アクセストークン 」を指定します。
この他にもオプションがたくさんあります。
http://instafeedjs.com/ を参考にカスタマイズしてください。
以上で、リストで表示されるはず・・・・・・・・・です。
スタイルシートでカッコよく整えてください。
どうですか？表示されましたか？
素敵な写真をどんどんインスタグラムにアップロードしましょう。
サイトが華やかになりますよ～。
以上、「ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう！」でした。
Go for it !!! ﾉｼ
