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

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

DEMO

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

• 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を活用することで様々なことができるようになるのでどんどんカスタマイズして良質なサイトを作成していきましょう。