こんにちは、福岡のホームページ制作シンス株式会社の越水です。
ホームページ制作をしていると「Instagramの特定のハッシュタグで投稿されている画像を一覧表示したい」という場面があります。
今回はInstagramからリリースされているAPIとjQueryプラグインを使って、ホームページ上にInstagramの画像フィードを表示させる方法を紹介します。
目次
好みのハッシュタグの画像を並べるのに便利なInstafeed.js
Instagramに投稿されている画像フィードを取得するために今回はInstafeed.jsというjQueryプラグインを利用します。
まずはInstagram APIの取得準備をする。
そのための下準備として、InstagramのAPIを取得するためのアプリケーション登録をします。
アプリケーション登録といってもそれほど難しいことはしません。
まずはInstagram Developersのページを開きましょう。
あらかじめInstagramにログインしておいてInstagram Developersのページを開くと「Register Your Application」のボタンがあるのでクリックしてアプリケーション登録へ進みます。
新規にアプリケーション登録をするので「Register a New Client」をクリックします。
このような入力画面が出るので、以下の項目を入力してアプリケーション登録を済ませましょう。
- Application Name…アプリケーション名
- Description…アプリケーションの概要文
- Website URL…APIを使用するWebサイトのURL
- Redirect URI(s)…Auth認証などの後のリダイレクト先URL
- Contact email…連絡を受け取るメールアドレス
登録が済むとCLIENT IDが使用できるようになります。この画面に表示されているIDをメモしておきましょう。
Instafeed.jsをホームページ内で使用する。
それではいよいよホームページ上にプラグインを導入していきましょう。
プラグインファイルはInstafeed.jsのWebサイトからダウンロードすることが出来ます。
ダウンロードしたファイルをHTMLで読み込みます。
次のサンプルコードのようにjQueryを先に読み込んでおきます。またinstafeedのidを持った要素を置いておけば、その中に画像が取得できます。
1 2 | <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="instafeed.min.js"></script> |
次のようなjQeuryを記述して、画像を読み込むハッシュタグや画像数を設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { var feed = new Instafeed({ get: 'tagged', //ハッシュタグから取得 tagName: '東京タワー', //好きなハッシュタグを設定 sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 20, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '<li><a href="{{link}}"><img src="{{image}}" target="_blank" /></a><span>{{caption}}</span><span>like:{{likes}},comments:{{comments}}</span></li>', clientId: 'xxxxxxx' //Instagram DevelopersのクライアントID }); feed.run(); }); |
最後にHTMLへinstafeedのIDを持った要素を設置すれば、Instagramから取得した画像が一覧で表示されます。
1 | <ul id="instafeed"></ul> |
あとはCSSを変更して見た目を整えてあげれば出来上がりです。
参考URL
instagramの画像を簡単かつ柔軟に表示できるjQueryプラグイン「Instafeed.js」
jQueryでInstagramのフィードを取得して自動スクロールさせる
福岡市の中小企業向けホームページ制作・リニューアルならシンス株式会社。
