Instagramのコンテンツを表示するjQueryプラグイン「Instafeed.js」

近頃で最も活気のあるSNSといえば、やはりInstagram（インスタグラム）です。
もちろんWebでのマーケティングにおいても、Instagramの活用は一種のトレンドであり、Instagram内でのアカウント運用にとどまらず、フォローや投稿機能を利用したキャンペーンなど様々な形をとった施策が各社で見られます。

そんな中で、キャンペーンサイトなどのWebサイト上に、Instagramの特定のユーザーやハッシュタグの画像を取得して表示したいシーンは多くあると思います。
今回は、投稿の埋め込みとは違う、フィードごと取得して表示することのできるjQueryのプラグイン「Instafeed.js」を試した記録をつけておきます。

完成形

これは私の個人的なアカウントのフィードを表示したものです。
このようにInstagramへ投稿した画像をページ上にずらっと並べることができました。
今回は「サンドボックスモード」で使用しており、読込は20枚までの制限があります。

必要なもの

InstagramAPIのセッティング

具体的な方法は割愛します（たくさん紹介されていますので検索してください）が、Instagramアカウントを使って

• ユーザーID
• クライアントID
• アクセストークン

をの値をそれぞれ取得しておきます。

こちらのサイトからどうぞ。

「Instafeed.js」プラグイン

こちらの公式サイトからプラグインをダウンロードします。

使ってみる

上記プラグインを読み込み、取得しておいた各IDやアクセストークンを記述すると簡単に動きます。

下記は記述例です。
※ID記述部分は空白にしています

出力されるコードをカスタムできたり、枚数を指定したりすることが出来ます。
デモページではBootstrapのグリッドシステムと組み合わせて表示しました。

Instagramを活用するプロジェクトでどんどん使っていきたいです。