インスタグラムの画像をJavaScriptでホームページに表示させる方法
こんにちはー、デザイナーのNNです。新宿は再開発ラッシュですね。ビルの解体や補強で名店が消えていくのが寂しいです・・・
今回はJavaScript「Instafeed」を使って、ウェブページにインスタグラムの画像を表示する方法をご案内します。
ウェブページにインスタグラムの画像を表示させるにはJavaScriptの「Instafeed.js」を利用します。新しいインスタグラムのAPIにも対応しています。
JavaScriptを利用するので、ASPのECサイトにもインスタグラムを表示させることができます。
下記のサンプルではインスタグラム画像を３件表示させています。
インスタグラム画像を表示させたサンプル
それでは早速、設定を進めていきましょう。
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のビジネスマネージャーアカウント、インスタグラムのアカウント情報が必要となります。
手順として下記になります。
- Facebook for Developersでアプリを作成
- インスタグラムと連動
- トークンを取得
以上となります。トークン取得までは結構複雑になります。
ページの内容はクライアント様・スタッフ限定となります。
アクセストークンの取得が大変ですが、インスタグラムの表示件数やレイアウトもカスタマイズしやすいので、どんなウェブサイトにも利用することができます。
