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

2018年8月3日

みんな大好きInstagram(インスタ)

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

必要なもの

  • インスタグラムのdeveloper登録
  • アクセストークンとクライアントIDの取得
  • インスタグラムのuser id取得
  • instaFeed.jsの導入
  • 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(11桁?の数字)を取得できますので、メモにとっておいてください。

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で取得した方が安全でしょうね。

この記事を書いた人

代表取締役画像

直塚一仁

株式会社アルラボ 代表取締役
ちよちゃん(ミニチュアダックス)と、ラーメンライスのような炭水化物+炭水化物の組み合わせをこよなく愛する。 家ではゾンビゲームでビクッとするのがデフォ。

今日の一言

毎日びっくりするほど暑いのでお気をつけください。
';