Загрузите больше вместо перехода на следующую страницу, используя нумерацию страниц / API
Я работаю над проектом по отображению избранных фотографий Instagram в альбоме с помощью хэштега, поскольку API Instagram ограничивает 35 изображений на вызов API. Я понял, что мне нужно было использовать AJAX (что я очень плохо) или смесь PHP и AJAX. Я выбрал последнее, потому что не хотел, чтобы мой токен доступа и идентификатор пользователя были доступны в коде моей галереи.
<?PHP
function jsongram($next=null){
$userid = "xxx";
$accessToken = "xxx";
$url = ("https://api.instagram.com/v1/users/{$userid}/media/recent/?access_token={$accessToken}");
if($url !== null) {
$url .= '&max_id=' . $next;
}
//Also Perhaps you should cache the results as the instagram API is slow
$cache = './'.sha1($url).'.json';
//unlink($cache); // Clear the cache file if needed
if(file_exists($cache) && filemtime($cache) > time() - 60*60){
// If a cache file exists, and it is newer than 1 hour, use it
$jsonData = json_decode(file_get_contents($cache));
}else{
$jsonData = json_decode((file_get_contents($url)));
file_put_contents($cache,json_encode($jsonData));
}?>
<html>
<head>
</head>
<body>
<?php
$data_array = array();
foreach ($jsonData->data as $data){
if (stripos($data->caption->text,'egypt') === false) {
}
else{
$data_array[] = $data;
$data = (str_split($data->caption->text));
$data = (array_filter($data));
}
}
foreach ($data_array as $data):{
$igimglow = $data->images->low_resolution->url;
$igimgstd = $data->images->standard_resolution->url;
$igimgthumb = $data->images->thumbnail->url;
$igcaption = str_replace('#', '', (preg_replace('/(?:#[\w-]+\s*)+$/', '', $data->caption->text)));
$igtime = date("F j, Y", $data->caption->created_time);
$iglikes = $data->likes->count;
$igcomments = $data->comments->count;
$iglong = $data->location->longitude;
$iglat = $data->location->latitude ;
$igusername = $data->user->username;
$igfullname = $data->user->full_name;
$iglink = $data->link;
$igfilter = $data->filter;
$igtags = implode(',',$data->tags);
?>
<img src="<?php echo ($igimglow);}?>">
<?php endforeach ?>
<?php
if(isset($jsonData->pagination->next_max_id)) {
$result .= '<div><a href="?next=' . $jsonData->pagination->next_max_id . '">Next</a></div>';
}
return $result;
}
?>
<div id="container">
<?=jsongram(@$_GET['next']);?>
<div id="result"></div>
</div>
</body>
</html>
Вот живой пример приведенного выше кода:
http://johnricedesign.com/examples/pn.php
Как показано выше, на 2-й странице отображаются фотографии с тегом «Египет». Я хотел бы заменить ссылку «Далее» для автоматической загрузки на той же странице кнопкой «Загрузить еще» — насколько мне известно, использование AJAX — единственный способ сделать это. Однако я не знаю, как это сделать, или даже с чего начать. Вторая очевидная проблема, с которой я столкнулся, заключается в том, что, хотя я удаляю фотографии, на которых нет надписи «Египет», у меня все еще остается много пустых мест, я предполагаю, что это будет довольно просто исправить после использования AJAX. ,
Последние пять дней я вырывал свои волосы, пытаясь это сделать. Вы помогаете, советуете, мудрости, заранее высоко ценим.
Решение
Я изменил API для работы с client_id, а не access_token. Вы можете изменить его обратно, это не будет иметь никакого эффекта.
Демо-версия: https://tjay.co/l/instagrampagination
ajax.php
<?php
function jsongram($next = null)
{
$userid = "xxx";
$accessToken = "xxx";
$url = ("https://api.instagram.com/v1/users/{$userid}/media/recent/?client_id={$accessToken}");
if ( !empty($next) ) {
$url.= '&max_id=' . $next;
}
// Also Perhaps you should cache the results as the instagram API is slow
$cache = './' . sha1($url) . '.json';
// unlink($cache); // Clear the cache file if needed
// If a cache file exists, and it is newer than 1 hour, use it
if (file_exists($cache) && filemtime($cache) > time() - 60 * 60) {
$jsonData = json_decode(file_get_contents($cache));
} else {
$jsonData = json_decode(file_get_contents($url));
file_put_contents($cache, json_encode($jsonData));
}
return $jsonData;
}
function instaFormat($jsonData)
{
$data_array = array();
$response = array();
foreach($jsonData->data as $data) {
if ( !empty($data->caption->text) && stripos($data->caption->text, 'egypt') !== false ) {
$data_array[] = $data;
$data = (str_split($data->caption->text));
$data = (array_filter($data));
}
}
$response['next'] = $jsonData->pagination->next_max_id;
foreach($data_array as $data) {
$igimglow = $data->images->low_resolution->url;
// $igimgstd = $data->images->standard_resolution->url;
// $igimgthumb = $data->images->thumbnail->url;
// $igcaption = str_replace('#', '', (preg_replace('/(?:#[\w-]+\s*)+$/', '', $data->caption->text)));
// $igtime = date("F j, Y", $data->caption->created_time);
// $iglikes = $data->likes->count;
// $igcomments = $data->comments->count;
// $iglong = $data->location->longitude;
// $iglat = $data->location->latitude;
// $igusername = $data->user->username;
// $igfullname = $data->user->full_name;
// $iglink = $data->link;
// $igfilter = $data->filter;
// $igtags = implode(',', $data->tags);
$response['data'][] = '<img src="'.$igimglow.'">';
}
return $response;
}
if ( isset($_POST['next']) ) {
echo json_encode(instaFormat(jsongram($_POST['next'])));
die();
}
index.php
<!doctype html>
<html>
<body>
<div data-pictures></div>
<div><button type="button" data-get-next>Next</button></div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
jQuery(function($) {
$(document).on('get-feed', function(e, next_id) {
var data = {
next: next_id
};
$.post('ajax.php', data, function(response) {
var container = $('[data-pictures]');
response = $.parseJSON(response);
container.html('');
$('[data-get-next]').attr('data-get-next', response.next);
$.each(response.data, function(i, val) {
$(val).appendTo(container);
});
});
});
$('[data-get-next]').click(function() {
var next_id = $(this).attr('data-get-next');
$.event.trigger('get-feed', next_id);
});
$.event.trigger('get-feed', 0);
});
</script>
</body>
</html>
Другие решения
Других решений пока нет …