Instagramの画像をWEBサイトに表示
Instagramを自身のサイトに表示させる時は手順が思ったより多かったのでメモっておこうと思います。
■大まかな流れとして
1.jQueryプラグインInstafeed.jsをダウンロード
2.JSをユーザーアカウントから画像を取得出来るように書き換える
3.InstagramのuserIdを取得する
4.Instagram Access Tokenを取得する
5.確認
【1】jQueryプラグインInstafeed.jsをダウンロード
参考サイトが非常に分かりやすくまとめられているので、順序良く進める事で自身のサイトにInstagramの画像を表示することができます。
●参考サイト:Instagramの画像を取得して表示できるjQueryプラグインInstafeed.js
プラグインページに記載されている内容を参考に一部コードを編集します。
$(document).ready(function() { var feed = new Instafeed({ get: 'tagged', //ハッシュタグから取得 tagName: '東京タワー', //好きなハッシュタグを設定 sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 20, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '
↓
$(document).ready(function() { var userFeed = new Instafeed({ get: 'user', //ユーザーから取得 userId: 'YOUR_USER_ID', //ユーザーID sortBy:'random', //並び順をランダムに links: true , //画像リンク取得 limit: 5, //取得する画像数を設定 resolution: 'low_resolution', //画像サイズを設定 template: '
これで下準備は完了です。
【3】InstagramのuserIdを取得する
プラグインのページも記載されていますがuserIdはアルファベットの方ではなく数字の方になります。
Note that YOUR_USER_ID corresponds to your Instagram account ID (eg: 4385108), not your username.
数字のIDを取得する方法は以下のサイトが参考なります。
●参考サイト:InstagramAPIを利用して特定のユーザの最新画像を表示する iPhoneアプリを作成①
使用している名前によってはいくつか表示されるので、もし迷った場合は[profile_picture]で表示さているプロフィール画像で確認してみるのもありかと思います。
【4】Instagram Access Tokenを取得する
以下に参考サイトへアクセスし「Generate Access Token」をクリックします。
画面遷移後「認証」を完了するとコードが表示されます。
●参考サイト:Get Your Instagram Access Token
【5】確認
3と4で取得した情報をJSに反映したら確認してみましょう。
▼3で取得した数字のIDに変更
userId: 'YOUR_USER_ID', //ユーザーID
▼4で取得しアクセストークンに変更
accessToken: 'YOUR_ACCESS_TOKEN' //アクセストークン
ハマりながらだったので、自分のInstagramが表示された時は「おーーー」となりました。
今回は以上です。