ブログのフッター部分でも使っているInstagramのAPIを使ってWEBサイトで投稿写真を表示 + カルーセルでスライドさせる方法についてのメモです。
やり方はとっても単純なんだけど知っているとかなり便利で使えます。
WordPressのプラグインは一切使わずに、JQueryのInstafeed.jsを使ってInstagramの写真を連携し、Owlを使ってカルーセルを実現します。※パターン1
※Instagramアプリケーション開発者登録からアクセストークンを取得するまでの一連の流れは、他のブログガーさんたちが詳しく紹介されているのでここでは省きます。
InstagramのAPIで連携したInstagramの写真をカルーセルで表示させるためのテクニックです。
合わせて、APIを使う際のAccess_tokneやClient_idなどは外から見えるとセキュリティ的によろしくないので、AJAXを使ってアクセスできないところに隠します。
こちらはAJAXを使ってAccess_tokneやClient_idを隠すで説明しています。※パターン2
※パターン2ではJQueryのinstafeed.jsは使わずにphpで対応しますので、全く別のやり方になります。 ※jsに直接、Access_tokneやClient_idを書き込んでいるサイトを良く見かけますがセキュリティ上よろしくないので注意が必要です。
目次
カルーセルとは
メリーゴーランドや空港の回転コンベアーなど、くるくると回るものを指し、WEBデザインにおいては、横に自動でスクロールするスライドギャラリーの様なもののことを指します！
InstafeedとOwlを使ってInstagramの写真をカルーセルで表示
Instafeed.jsをダウンロード
以下のサイトからダウンロード↓↓
http://instafeedjs.com/ 
instafeed.jsを使います。
※使い方も詳しく書いてあるので目を通しておくと後々スムーズに進みます。
Owlをダウンロード
以下のサイトからダウンロード↓↓
http://owlgraphic.com/owlcarousel/
owl.jsとowl.cssを使います。
※カルーセルのスタイルは豊富にあるので自分の好みに合わせてください。
※スマートフォンやタブレット用に表示させたり、スライドのスピードを変更したりできます。かなり高機能なおすすめのプラグインです。
実装
owl.cssとowl.js、instafeed.jsを読み込みます。
|
1 2 3 |
<link rel="stylesheet" type="text/css" href="css/owl.css"> <script type="text/javascript" src="js/instafeed.js"></script> <script type="text/javascript" src="js/owl.js"></script> |
※パスはそれぞれの環境に合わせてください。
次に、Javascriptに以下を書き込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function(){ var feed = new Instafeed({ get: 'user', userId: '******', accessToken: '**********************************************************', clientId: '**************************************', limit: 15, resolution: 'standard_resolution', //612×612のサイズで出力 after: function () { var owl = $('.owl2row-plugin'); owl.owlCarousel({ }); }, template: '<div class="item"><a href="{{link}}" target="_blank"><span><img src="{{image}}" alt="{{caption}}"/></span></a></div>', }); feed.run(); }); |
resolutionを読み込んでおくと高解像度の写真を表示することができます。
***の箇所はInstagramアプリケーション開発者登録をした時の値を書き込んでください。
次に表示したい場所に以下を書き込みます。
|
1 2 3 4 5 6 7 8 |
<section class="instagram container-fluid mt-md "> <div class="row"> <div id="owl2row-plugin" class="owl-carousels"> <div id="instafeed" class="owl2row-plugin"> </div> </div> </div> </section> |
id=”owl2row-plugin”でOwlのプラグインを呼び出し、id=”instafeed”でInstagramの写真を表示しています。
開くと写真がカルーセルで連動されました♪
このままだとUserIdやaccessToken、clientIdが見えてしまっていてますので、事項でこれらを見えなくしていきます。
AJAXを使ってAccess_tokneやClient_idを隠す
AJAXって何?
Ajaxとは、Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。
従来、Webブラウザを使ったWebアプリケーションでは、データをサーバに通知して処理結果を得るにはページ全体をロードしなおさなければならず、ネイティブアプリケーションのような操作性を得ることは難しかった。Ajaxでは、指定したURLからXMLドキュメントを読み込む機能を使い、ユーザの操作や画面描画などと並行してサーバと非同期に通信を行うことで、サーバの存在を感じさせないシームレスなWebアプリケーションを実現することができる。
ちなみに、JavaScriptのHTTP通信機能自体は同期通信にも非同期通信にも対応しており、受信するデータ形式もXMLとプレーンテキストの両方を選べるため、プレーンテキストを同期通信する従来型のWebアプリケーションをページ遷移を伴わずに実現するといった使い方もできる。
http://e-words.jp/w/Ajax.html
https://api.instagram.com/v1/users/self/media/recent?access_token=******************** アドレスバーに上記のURLを入力して実行すると文字列が返ってきます。
それらをデコード(PHPの変数に変換)します。
さきほど作ったjsではUserIdやaccessToken、clientIdなどを隠すことができないので作り変えます。
作るファイルは、phpファイル2つとjsファイルの合計3つ。
config.php
|
1 2 3 4 5 6 |
<?php define("USER_ID", "*********"); define("CLIENT_ID", "*********"); define("CLIENT_SECTET", "*********"); define("ACCESS_TOKEN", "*********"); ?> |
instagram.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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=15'; $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; } ?> |
上記では日付、画像、リンク、キャプションを取得しています。
‘&count=15’の箇所で取得する件数を調整できます。
※上記は15件
original.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function() { $.ajax({ type: 'GET', url: 'ここにinstagram.phpのファイルパスを書く', data: { mode: 'top' }, success: function(res) { dat = JSON.parse(res); for (var i=0 ; i<=14 ; i++){ $('.instagram').eq(0).append('<div class="item"><a href="' + decodeURIComponent(dat.insta[i].links) + '" target="_blank"><img src="' + decodeURIComponent(dat.insta[i].images) + '"></span></a></li>'); } }, complete : function(res) { $('.instagram').owlCarousel({ }); } }); }); |
instagram.phpの取得件数を変えた場合には、i<=14の箇所も変えます。
上記では、日付とキャプションは表示していません。
これでUserIdやaccessToken、clientIdを隠すことができ、Instagramの写真をカルーセルで表示することができました。
ちなみに細かい設定は以下で出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
$(function() { $.ajax({ type: 'GET', url: 'ここにinstagram.phpのファイルパスを書く', data: { mode: 'top' }, success: function(res) { dat = JSON.parse(res); for (var i=0 ; i<=14 ; i++){ $('.instagram').eq(0).append('<div class="item"><a href="' + decodeURIComponent(dat.insta[i].links) + '" target="_blank"><img src="' + decodeURIComponent(dat.insta[i].images) + '"></span></a></li>'); } }, complete : function(res) { $('.instagram').owlCarousel({ items : 7, itemsCustom : false, itemsDesktop : [1199, 7], itemsDesktopSmall : [979, 7], itemsTablet : [768, 5], itemsTabletSmall : false, itemsMobile : [479, 3], singleItem : false, itemsScaleUp : false, slideSpeed : 200, paginationSpeed : 800, rewindSpeed : 1000, autoPlay : false, stopOnHover : false, navigation : false, navigationText : ["prev", "next"], rewindNav : true, scrollPerPage : false, pagination : true, paginationNumbers : false, responsive : true, responsiveRefreshRate : 200, responsiveBaseWidth : window, baseClass : "owl-carousel", theme : "owl-theme", lazyLoad : false, lazyFollow : true, lazyEffect : "fade", autoHeight : false, jsonPath : false, jsonSuccess : false, dragBeforeAnimFinish : true, mouseDrag : true, touchDrag : true, addClassActive : false, transitionStyle : false, beforeUpdate : false, afterUpdate : false, beforeInit : false, afterInit : false, beforeMove : false, afterMove : false, afterAction : false, startDragging : false, afterLazyLoad: false }); } }); }); |
詳しくは公式サイトで紹介されているので試してみてください@_@/
LEAVE A REPLY