ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

インスタグラムの画像をJavaScriptでホームページに表示させる方法

こんにちはー、デザイナーのNNです。新宿は再開発ラッシュですね。ビルの解体や補強で名店が消えていくのが寂しいです・・・

今回はJavaScript「Instafeed」を使って、ウェブページにインスタグラムの画像を表示する方法をご案内します。

ウェブページにインスタグラムの画像を表示させるにはJavaScriptの「Instafeed.js」を利用します。新しいインスタグラムのAPIにも対応しています。

JavaScriptを利用するので、APSのECサイトにもインスタグラムを表示させることができます。

下記のサンプルではインスタグラム画像を3件表示させています。
インスタグラム画像を表示させたサンプル

それでは早速、設定を進めていきましょう。

Instafeed.jpの設定方法

JavaScriptの「Instafeed.js」をウェブページに設定します。
記述する箇所や、JSファイルへのパスは適宜ご変更ください。

HTML
<div id="instafeed"></div>
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
  var feed = new Instafeed({
    accessToken: 'アクセストークン'
  }); feed.run();
</script>

ウェブページへの記述は以上です。

インスタグラムの画像表示件数を設定するオプションもあります。
Instafeedオプション

後はインスタグラムのアクセストークンを取得して記述するとインスタグラムの画像が表示されます。

インスタグラムのアクセストークンの取得方法

アクセストークンの取得にはFacebookのビジネスマネージャーアカウント、インスタグラムのアカウント情報が必要となります。

手順として下記になります。

  1. Facebook for Developersでアプリを作成
  2. インスタグラムと連動
  3. トークンを取得

以上となります。トークン取得までは結構複雑になります。

ページの内容はクライアント様・スタッフ限定となります。

サンプル

アクセストークンの取得が大変ですが、インスタグラムの表示件数やレイアウトもカスタマイズしやすいので、どんなウェブサイトにも利用することができます。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ