Instagramの投稿をslick.jsを使ってスライダー表示する方法

みんな大好きInstagram（インスタ）

そのインスタの画像データをホームページに読み込ませて、なおかつ有名スライダーのslick.jsを利用して、表示する数やスワイプで操作できるようにしたいと思います。

必要なもの

インスタグラムのdeveloper登録とアクセストークン＆クライアントIDの取得

この辺りはいろんなサイトに情報が掲載されているのでそちらを参照ください。こちら参考にされてください。

Instagram APIを使ってインスタグラムの画像をウェブサイト上に表示する

インスタグラムのuser id取得

次にインスタグラムのuser idを取得します。これはいわゆるユーザーネームとは違います。

下のurlをコピーして、ASCCESS-TOKENの部分を先ほど取得したアクセストークンに置き換えてください。

https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN

するとユーザーID（１１桁？の数字)を取得できますので、メモにとっておいてください。

instaFeed.jsの導入

こちらからプラグインをダウンロードします。

http://instafeedjs.com/

その後、このように書くことでインスタの画像をホームページ上に表示させることができます。

<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
    clientId: 'CLIENT ID',//クライアントID
    get: 'user', 
    userId: 'USER ID',//ユーザーIDを入れる
    accessToken:'ACCESS TOKEN',//アクセストークン
    links: true ,
    limit: 8,// 取得件数 
    resolution:'standard_resolution', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
    template: '', // 画像URL：{{image}} リンク：{{link}} キャプションテキスト{{caption}} いいね数：{{likes}} コメント数：{{comments}}
 
    success: function(){
      //取得完了時のコールバック
    }
  });
feed.run();
</script>

ただ、このままではただ表示されるだけですので、スライダーを導入します。

slick.jsの導入

slick.jsは有名なjqueryプラグインです。

slickの導入に関してはこちらをご覧ください。

jQueryカルーセルスライダー『slick.js』設置方法と設定オプション一覧

そこでオプションを決めてください。

InstaFeed.jsとslick.jsをくっつける

さて、いよいよ本番です。instafeed.jsで読み込んだデータをslick.jsでスライダーに変えます。

<script type="text/javascript" src="path/to/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="path/to/slick.min.js"></script>
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
    clientId: 'CLIENT ID',//クライアントID
    get: 'user', 
    userId: 'USER ID',//ユーザーIDを入れる
    accessToken:'ACCESS TOKEN',//アクセストークン
    links: true ,
    limit: 8,// 取得件数 
    resolution:'standard_resolution', // thumbnail (default) - 150x150 | low_resolution - 306x306 | standard_resolution - 612x612
    template: '', // 画像URL：{{image}} リンク：{{link}} キャプションテキスト{{caption}} いいね数：{{likes}} コメント数：{{comments}}
 
    success: function(){
      //取得完了時のコールバック
    }
     after: function () {
        $('').slick({
           //ここにオプションを入れる
     });
    }
  });
feed.run();
</script>

これでスライダーができます。

ぜひ一度お試しください。

懸念材料としては、javascriptで書いているためアクセストークンが丸見えになっちゃうことです。

できればphpでajaxで取得した方が安全でしょうね。