お知らせ・ブログ

HOME > お知らせ・ブログ > WEBクリエイターブログ > ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!その2

CREATORWEBクリエイターブログ

ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!その2

みなさん、こんにちは。
コーディング担当の よっしーさん です。

今回は「ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!」の第2弾です。

前回の記事で「利用者登録」「アプリケーション登録」まで完了しました。
今回は、その情報を使ってサイトにインスタグラムの写真一覧を表示させるコードをご紹介します。

前回の記事:ウェブサイトに Javascript でインスタグラムの写真を表示させてみよう!その1

 

WEBクリエイターブログ:吉田:20170220-1

 

 1. 登録情報の確認

前回の登録までが完了すると
Manage Clients ページに遷移します。

赤枠部分「MANAGE」ボタンを押すと、下の様な登録した情報を編集できるページに遷移します。

 

WEBクリエイターブログ:吉田:20170309-2

赤枠部分の「 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 」に置き換えて、ブラウザでアクセスすると、下の様なページに遷移します。

WEBクリエイターブログ:吉田:20170309-4

赤枠部分「 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 !!!  ノシ

カレンダー
2017年7月
« 3月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
最近の投稿
お問い合せ TEL:0276-60-5440(受付時間:10:00~LAST)/メールのお問い合せはこちら(受付時間:24時間) メールでのお問い合せはこちら

【打ち合わせ等で出張可能な地域】

群馬県

栃木県

埼玉県

茨城県

日本全国どこでも受注可能です。

※上記以外の地域でも、案件の内容によっては出張打ち合わせが可能な場合もあります。お気軽にご相談ください。

ホームページ制作 WEBシステム開発 株式会社ディーアイシー 携帯サイト

お問い合せ

お電話:0276-60-5440

メール:お問い合せフォームはこちら

メールでのお問い合せはこちら