Instagram API + Slider Pro でインスタグラムの最新フィードをスライダー表示 - Web

HPのサイドバーにインスタグラムのカルーセルを埋め込みました。→

PHP

<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //アクセストークン
    $access_token = 'アクセストークン';
    //JSONデータを取得して出力
    echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");
    //終了
    exit;
}
?>

<?php

//POSTリクエストの場合のみ受付

if($_SERVER['REQUEST_METHOD'] == 'POST'){

//アクセストークン

$access_token = 'アクセストークン';

//JSONデータを取得して出力

echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");

//終了

exit;

}

jQuery

function instaFeed() {
  $.each($('#instaFeed'), function(i, val) {
    var html = '';
    $.ajax({
        url: '/PATH/instagram.php',//PHPファイルのURL
        type:'POST',
        dataType: 'json'
    }).done(function(data){
        //通信成功時の処理
        html += '<div class="insta-slides sp-slides">';
        $.each(data.data,function(i,item){
            var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
            var link = item.link; //リンクを取得
            var caption = item.caption.text; 
            var created_time = new Date( Number(item.created_time +'000') );
            var y = created_time.getFullYear();
            var m = created_time.getMonth()+1;
            var d = created_time.getDate();
            var weekDayList = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            var weekDay = weekDayList[ created_time.getDay() ] ; // 曜日

            html += '<div class="sp-slide">';
            html += '<a href="' + link + '" target="_blank">';
            html += '<img class="sp-image" src="' + imgurl + '">';
            html += '<p class="sp-layer sp-white sp-padding" data-horizontal="2%" data-vertical="4%" data-width="96%" data-position="bottomRight" data-show-transition="left" data-show-delay="200" data-hide-transition="right" data-hide-delay="400">';
            html += '<span>' + y + '.' + m + '.' + d + ' ' + weekDay + '</span>';
            html += caption;
            html += '</p>';
            html += '</a>';
            html += '</div>';
        });
        html += '</div>';

    }).fail(function(){
        //通信失敗時の処理
        html = "<li>画像を取得できません。</li>";
    }).always(function(){
      $.when(
        $(val).append(html)
      ).done(function(){
        $('#instaFeed').sliderPro({
          width: '100%',//横幅
          arrows: true,//左右の矢印
          buttons: false,//ナビゲーションボタン
          keyboard: false
        });
      });
    });
  });
}

function instaFeed() {

$.each($('#instaFeed'), function(i, val) {

var html = '';

$.ajax({

url: '/PATH/instagram.php',//PHPファイルのURL

type:'POST',

dataType: 'json'

}).done(function(data){

//通信成功時の処理

html += '<div class="insta-slides sp-slides">';

$.each(data.data,function(i,item){

var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得

var link = item.link; //リンクを取得

var caption = item.caption.text;

var created_time = new Date( Number(item.created_time +'000') );

var y = created_time.getFullYear();

var m = created_time.getMonth()+1;

var d = created_time.getDate();

var weekDayList = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];

var weekDay = weekDayList[ created_time.getDay() ] ; // 曜日

html += '<div class="sp-slide">';

html += '<a href="' + link + '" target="_blank">';

html += '<img class="sp-image" src="' + imgurl + '">';

html += '<p class="sp-layer sp-white sp-padding" data-horizontal="2%" data-vertical="4%" data-width="96%" data-position="bottomRight" data-show-transition="left" data-show-delay="200" data-hide-transition="right" data-hide-delay="400">';

html += '<span>' + y + '.' + m + '.' + d + ' ' + weekDay + '</span>';

html += caption;

html += '</p>';

html += '</a>';

html += '</div>';

});

html += '</div>';

}).fail(function(){

//通信失敗時の処理

html = "<li>画像を取得できません。</li>";

}).always(function(){

$.when(

$(val).append(html)

).done(function(){

$('#instaFeed').sliderPro({

width: '100%',//横幅

arrows: true,//左右の矢印

buttons: false,//ナビゲーションボタン

keyboard: false

});

}

※ エンターキーでページ遷移するようになってしまった

最初、ページを開いた後にエンターキーを押すとインスタグラムのページに遷移するようになってしまって困った。

コメント欄や検索欄の Enter も飛ばされる…。

原因は Slider Pro はデフォルトでキーボード操作が ON になっている為で、オプションで False を設定する必要があるのでした。

keyboard: false

1	keyboard: false

HTML

<section id="instaFeed" class="slider-pro">
<h2>Instagram</h2>
</section>

<h2>Instagram</h2>

</section>

参考にさせて頂きました

「Instagram API + Slider Pro でインスタグラムの最新フィードをスライダー表示」への2件のフィードバック

匿名より:

2017年7月1日 12:11 PM

同じことで困っていたらこの記事を見て解決しました！！！
ありがとうございます！

返信
1. お母ちゃん より:
  
  2017年7月2日 1:29 PM
  
  お役に立てて良かったです！
  
  返信

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

PHP

jQuery

※ エンターキーでページ遷移するようになってしまった

HTML

参考にさせて頂きました

関連記事

「Instagram API + Slider Pro で インスタグラムの最新フィードをスライダー表示」への2件のフィードバック

コメントはこちらから コメントをキャンセル

「Instagram API + Slider Pro でインスタグラムの最新フィードをスライダー表示」への2件のフィードバック

コメントはこちらからコメントをキャンセル