Instagramの画像を取得して表示できるjQueryプラグインInstafeed.js

ホームページ制作をしていると「Instagramの特定のハッシュタグで投稿されている画像を一覧表示したい」という場面があります。

今回はInstagramからリリースされているAPIとjQueryプラグインを使って、ホームページ上にInstagramの画像フィードを表示させる方法を紹介します。

好みのハッシュタグの画像を並べるのに便利なInstafeed.js

Instagramに投稿されている画像フィードを取得するために今回はInstafeed.jsというjQueryプラグインを利用します。

まずはInstagram APIの取得準備をする。

そのための下準備として、InstagramのAPIを取得するためのアプリケーション登録をします。

アプリケーション登録といってもそれほど難しいことはしません。

まずはInstagram Developersのページを開きましょう。

instafeed01

あらかじめInstagramにログインしておいてInstagram Developersのページを開くと「Register Your Application」のボタンがあるのでクリックしてアプリケーション登録へ進みます。

instafeed02

新規にアプリケーション登録をするので「Register a New Client」をクリックします。

instafeed03

このような入力画面が出るので、以下の項目を入力してアプリケーション登録を済ませましょう。

  • Application Name…アプリケーション名
  • Description…アプリケーションの概要文
  • Website URL…APIを使用するWebサイトのURL
  • Redirect URI(s)…Auth認証などの後のリダイレクト先URL
  • Contact email…連絡を受け取るメールアドレス

instafeed04

登録が済むとCLIENT IDが使用できるようになります。この画面に表示されているIDをメモしておきましょう。

Instafeed.jsをホームページ内で使用する。

それではいよいよホームページ上にプラグインを導入していきましょう。

プラグインファイルはInstafeed.jsのWebサイトからダウンロードすることが出来ます。

ダウンロードしたファイルをHTMLで読み込みます。

次のサンプルコードのようにjQueryを先に読み込んでおきます。またinstafeedのidを持った要素を置いておけば、その中に画像が取得できます。

次のようなjQeuryを記述して、画像を読み込むハッシュタグや画像数を設定します。

最後にHTMLへinstafeedのIDを持った要素を設置すれば、Instagramから取得した画像が一覧で表示されます。

あとはCSSを変更して見た目を整えてあげれば出来上がりです。

参考URL

instagramの画像を簡単かつ柔軟に表示できるjQueryプラグイン「Instafeed.js」

jQueryでInstagramのフィードを取得して自動スクロールさせる

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »