ファッション/アパレル系の企業サイトだと、画像投稿系ソーシャルサービスを利用されているのも増えて、公式サイトにもそのデータを表示したい！ケースも増えてきました。

今日はインスタから画像を取得し、bx-sliderでカルーセル表示させるメモです。

■Instagram API

InstagramのAPIの利用方法や取得パラメータについては下記がとても参考になります。
Instagram APIでwebサービスを作りたい全ての人に向けて書きました

■bx-slider

スライダープラグインのダウンロードはこちら
jQuery Content Slider | Responsive jQuery Slider | bxSlider

全体的な流れ

• configファイルの設置
• instagram API からの取得PHPの設置
• javascriptで取得データをhtmlに埋め込み
• 埋め込みデータを元にスライダー化

おおまかには上記のような手順です。

configファイルの設置

<?php
define("USER_ID",       "");
define("CLIENT_ID",     "");
define("CLIENT_SECTET", "");
define("ACCESS_TOKEN",  "");
?>

上記のものにそれぞれユーザーデータなどを入れて、config.phpとして保存します。
httpでアクセス出来ない箇所に置きましょう。

instagram API からの取得PHPの設置

先ほど保存したconfig.phpをインクルード。
APIからデータを取得、整形し、JSONへ。

このファイルは、instagram.phpとして保存。

<?php
include_once('../../config.php');

$resArr = array();

if($_GET['mode']=='top') {
	// 時刻
	$resArr['time'] = urlencode(date('Y/m/d H:i:s'));

	// インスタ
	$CNT = 0;
	$photo_api_url = 'https://api.instagram.com/v1/users/self/media/recent?access_token=' . ACCESS_TOKEN . '&count=10'; // 10件取得
	$photo_datas   = json_decode(@file_get_contents($photo_api_url));

	foreach($photo_datas->data as $VAL) {

		$resArr['insta'][$CNT]['images'] = urlencode($VAL->images->low_resolution->url);
		$resArr['insta'][$CNT]['links']  = urlencode($VAL->link);
		$resArr['insta'][$CNT]['caption']  = mb_strimwidth( $VAL->caption->text, 0, 30, "...", "UTF-8" );
		$resArr['insta'][$CNT]['date']  = $VAL->created_time;
		$CNT++;
	}

	// JSON
	echo json_encode($resArr);
	exit;
}
?>

取得できるパラメータは以下の通り。
僕はキャプションのテキストを引っ張りましたが、このデータにはハッシュタグも含まれていますのでご注意下さい。

javascriptで取得データをhtmlに埋め込み

今度は先ほどのinstagram.phpにアクセスし、データを取得、japascriptで指定要素にappendします。
この例では、htmlに空のdiv.instagramを設けておき、そこにデータを追加します。

$(function() {

	$.ajax({
		type: 'GET',
		url: 'instagram.php',
		data: { mode: 'top' },
		success: function(res) {
			dat = JSON.parse(res);
			for (var i=0 ; i<=9 ; i++){
				var md = new Date( Number( dat.insta[i].date+'000' ) );
				var y = md.getFullYear();
				var m = md.getMonth()+1;
				var d = md.getDate();
				$('.instagram').eq(0).append('<li><a href="' + decodeURIComponent(dat.insta[i].links) + '" target="_blank"><img src="' + decodeURIComponent(dat.insta[i].images) + '"><dl><dt>' + y + '-' + m + '-' + d +'</dt><dd>' + dat.insta[i].caption + '</dd></dl></a></li>');
		}
		},
		complete : function(res) {

			$('.instagram').bxSlider({
			  minSlides: 3,
			  maxSlides: 3,
				moveSlides: 1,
				slideWidth: 110,
				slideMargin: 0,
				pager: false,
				auto: true,
				infiniteLoop: false,
				hideControlOnEnd: true,
				preloadImages: 'all',
				swipeThreshold: 5,
				oneToOneTouch: false
			});
		} // end complete
	});

} // end ajax

});

スライダー化するのはデータ取得してhtmlに追加した後でないと、bx-sliderは正常に動かないのでajaxのコールバック、completeを使って処理後にスライダー化します。

以上です！意外に簡単なので使う場面あればどうぞ。