恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

jQueryとAPIを活用してLightbox付きのインスタグラムギャラリーを自動更新でWebサイトに反映する

投稿日:2018-04-23 更新日:




insta_jquery_api

 

jQueryとAPIを活用してLightbox付きのインスタグラムギャラリーを自動更新でWebサイトに反映することができます。
インスタグラムで投稿を行えば、自動的にサイト側でも更新されるので非常に便利です。

用意するものは以下の通りです。

  • jQuery
  • Lightbox
  • Instagramのアカウント
  • Instagramのアクセストークン

 

Lightboxのダウンロードは以下のサイトから行えます。
http://lokeshdhakar.com/projects/lightbox2/

アクセストークンとは

Webサイトにインスタグラムの画像を表示させたい場合、インスタグラムのアカウントを使ってアクセストークンを取得する必要があります。

アクセストークンとは認証済みのユーザーを識別するための文字列で、これがないとインスタグラムのアカウントの情報を引っ張ってくることができません。

アクセストークンは以下のサイトで簡単に取得することができます。
http://instagram.pixelunion.net/

 

 

アクセストークンを取得できたら、早速本題のコードを打ち込んでいきましょう。

まず始めに、jsファイルに以下のコードを貼り付けて、先ほど取得したアクセストークンを貼り付けましょう。DEMOでは、インスタグラムで個人的なサンプルのアカウントを作成して使用しています。

$(function(){
  var accessToken = 'xxxxxxxxxx.xxxxxxx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //アクセストークン
  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
    $.each(insta.data,function (photos,src) {
      if ( photos === 15 ) { return false; } //表示する画像の枚数
      $('<a href="'+src.images.standard_resolution.url+'" data-lightbox="group"><li style="background-image:url('+src.images.standard_resolution.url+')"></li&gt;</a>').aendTo('#js-insta') 
    });
  });
});

 

そしてHTMLのbodyの中で、画像を表示させたい場所にjs-instaのIDをつけてあげましょう。
DEMOでは、以下の様にHTMLを入力しています。

<div class="container">
  <h1>Instagram</h1>
  <ul id="js-insta"></ul>
</div>

 

すると、画像をWebページに表示することができました。簡単ですね。

ポイントは、インスタグラムから呼び出した画像のタグにdata-lightbox=”group”を加えている点です。これによって、画像をクリックするとlightboxが機能するようになっています。

次に、cssで画像のレイアウトを整えてギャラリーにしたいと思います。

.container{
  width: 100%;
  text-align: center;
}

ul li{
  display: inline-block;
  margin: 0 5px;
  width: 250px;
  height: 250px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
}

 

これで完成です。

後はお好みで出力する画像の枚数を調整しましょう。

このように、APIを活用することで様々なことができるようになるのでどんどんカスタマイズして良質なサイトを作成していきましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。