制作コラム

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

みんな大好き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で取得した方が安全でしょうね。

Tags:

一覧に戻る

ホームページ
制作業務

コーポレートサイト制作

コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。

More

ブランドサイト・集客サイト制作

ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。

More

採用サイト制作

採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。

More

ECサイト制作

ECサイトは、事業の形態や規模によって求められる内容や機能が異なります。
アルラボではお客様の事業内容や求められる結果に応じてさまざまな形態のECサイトをご提案しています。

More

サービス一覧

Webマーケティング
集客対策業務

リスティング広告運用

検索ユーザーに貴社のビジネスの接点を作るリスティング広告。
限られた予算の中で費用対効果を重視した最適なリスティング広告運用を行います。

More

SNS・YouTube広告運用

検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。

More

SEO対策

サイトの検索表示順位を上昇させるSEO対策。
内部施策を標準化し、サイトの構造を正しくクローラーに伝え、適切な検索キーワードからユーザーが求める情報とは何なのかを追求します。

More

コンテンツマーケティング

ユーザーにとって価値のあるコンテンツを継続的に発信し、幅広いワードでアプローチするユーザーをキャッチします。

More

MEO対策

近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。

More

Webアクセス解析

ユーザーの属性や特徴、そして行動を分析し、コンバージョンに繋がる課題を解決します。ウェブサイトを着実に成長させる指標としてアクセス解析からの改善提案を行います。

More

お問い合わせ
Contact

私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。

ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。

お問い合わせ・ご相談

ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。

お問い合わせ・ご相談

お電話でのお問い合わせ

お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。

0952-20-1501(佐賀)

092-717-3446(福岡)

平日:9:00~17:00