:: Instafeed.jsとOwl.jsで実現するカルーセルスタイルのInstagram写真のAPI連携

/ , , / WEB制作・開発

ブログのフッター部分でも使っている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を書き込んでいるサイトを良く見かけますがセキュリティ上よろしくないので注意が必要です。

 

目次

 

1) カルーセルとは
2) InstafeedとOwlを使ってInstagramの写真をカルーセルで表示
3) AJAXを使ってAccess_tokneやClient_idを隠す

 

 

カルーセルとは

 

メリーゴーランドや空港の回転コンベアーなど、くるくると回るものを指し、WEBデザインにおいては、横に自動でスクロールするスライドギャラリーの様なもののことを指します!

 

160206_photo001

 

 

InstafeedとOwlを使ってInstagramの写真をカルーセルで表示

 

Instafeed.jsをダウンロード

以下のサイトからダウンロード↓↓
http://instafeedjs.com/

 

160206_photo002

 

instafeed.jsを使います。
※使い方も詳しく書いてあるので目を通しておくと後々スムーズに進みます。

 

Owlをダウンロード

以下のサイトからダウンロード↓↓
http://owlgraphic.com/owlcarousel/

 

160206_photo003

 

owl.jsとowl.cssを使います。

 

※カルーセルのスタイルは豊富にあるので自分の好みに合わせてください。
※スマートフォンやタブレット用に表示させたり、スライドのスピードを変更したりできます。かなり高機能なおすすめのプラグインです。

 

実装

owl.cssとowl.js、instafeed.jsを読み込みます。

※パスはそれぞれの環境に合わせてください。

 

次に、Javascriptに以下を書き込みます。

resolutionを読み込んでおくと高解像度の写真を表示することができます。
***の箇所はInstagramアプリケーション開発者登録をした時の値を書き込んでください。

 

次に表示したい場所に以下を書き込みます。

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の変数に変換)します。

 

160206_photo004

 

さきほど作ったjsではUserIdやaccessToken、clientIdなどを隠すことができないので作り変えます。
作るファイルは、phpファイル2つとjsファイルの合計3つ。

 

config.php

 

instagram.php

上記では日付、画像、リンク、キャプションを取得しています。
‘&count=15’ の箇所で取得する件数を調整できます。※上記は15件

 

original.js

instagram.phpの取得件数を変えた場合には、i<=14の箇所も変えます。
上記では、日付とキャプションは表示していません。

 

これでUserIdやaccessToken、clientIdを隠すことができ、Instagramの写真をカルーセルで表示することができました。

 

ちなみに、細かい設定は以下で出来ます。

詳しくは公式サイトで紹介されているので試してみてください@_@/

SNS SHARE

LEAVE A REPLY