WordPress に Instagram API を使ってタグのギャラリー表示②

前回の記事↓から少し改造しました。

WordPress に Instagram API を使ってタグのギャラリー表示

改造ポイント

タグをHTML側で指定可能に
ページ内に複数のギャラリーを表示

コード

HTML

<div class="instagram">
<h3>タグ：<span class="tag">家族</span></h3>
</div>
<div class="instagram">
<h3>タグ：<span class="tag">空</span></h3>
</div>

</div>

</div>

「class=”instagram”」の中で、タグの文字列を「class=”tag”」で囲む。

タグ名を表示させたくない場合はstyleで消すと良いと思います。

<div class="instagram">
<span class="tag" style="display:none;">家族</span>
</div>

</div>

jQuery

/js/instagram.js

jQuery(function($) {
    $(function(){
        $.each($(".instagram"), function(i, val) {
            var $tag = $(val).find('.tag').text();
            var html = '';

            $.ajax({
                url: '/php/instagram.php',//PHPファイルのURL
                type:'POST',
                data: {
                    'tag': $tag
                },
                dataType: 'json'
            }).done(function(data){
                //通信成功時の処理
                html += '<ul>';
                $.each(data.data,function(i,item){
                    var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
                    var link = item.link; //リンクを取得
                    html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
                });
                html += '</ul>';
            }).fail(function(){
                //通信失敗時の処理
                html = "<li>画像を取得できません。</li>";
            }).always(function(){
                //通信完了時の処理
                $(val).append(html);
            });
        });
    });
});

jQuery(function($) {

$(function(){

$.each($(".instagram"), function(i, val) {

var $tag = $(val).find('.tag').text();

var html = '';

$.ajax({

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

type:'POST',

data: {

'tag': $tag

dataType: 'json'

}).done(function(data){

//通信成功時の処理

html += '<ul>';

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

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

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

html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";

});

html += '</ul>';

}).fail(function(){

//通信失敗時の処理

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

}).always(function(){

//通信完了時の処理

$(val).append(html);

});

HTMLで取得したタグをPHPにPOST

php

/php/instagram.php

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

<?php

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

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

//アクセストークン

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

$page = $_POST['tag'];

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

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

//終了

exit;

}

POSTされたタグをセットしてGET

css

/*--------------------------------------------------------
Instagram
--------------------------------------------------------*/
.instagram ul {
	padding: 0;
	margin-bottom: 20px;
}
.instagram li {
	list-style: none;
	display: inline-block;
	width: 30%;
	margin: 10px;
}

/*--------------------------------------------------------

Instagram

--------------------------------------------------------*/

.instagram ul {

padding: 0;

margin-bottom: 20px;

}

.instagram li {

list-style: none;

display: inline-block;

width: 30%;

margin: 10px;

}

表示

タグ：日常

タグ：家族

捕捉

前回、ギャラリー表示したはずの「フクロウ」が最近表示されてないなーと調べてみたら、

Instagram の API は最初 Sandbox Mode となっている
Sandbox Mode では最新の20件しか取得出来ない
APIのフルアクセスには審査が必要で、個人のHPに表示させたいだけじゃだめ

ということで、最新20件よりも過去のデータは取ってこれないんですね、残念。

参考にさせて頂きました

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

改造ポイント

コード

HTML

jQuery

php

css

表示

タグ：日常

タグ：家族

捕捉

参考にさせて頂きました

関連記事

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

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