Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Instagram PHP API - Working example: Load more button (AJAX)

Instagram PHP API

How to use

This a working example based on the previous posted workflow.
Feedback is as always welcome.

Original project repository: Instagram-PHP-API

index.php file

The index file contains the Javascript which is responsible for loading new data and a bit of PHP which displays the first results. The script makes use of jQuery's DOM data storage, to store the latest max_id.

ajax.php file

This file represents the API which delivers additional images via pagination.
It requires two GET parameters:

  • tag the tag name you used in your original request (index.php file)
  • max_id next max id

and returns a JSON object e.g.:

{
    next_id: 1340220451361,
    images: [
        "http://distilleryimage7.s3.amazonaws.com/d53ffb38bafa11e181bd12313817987b_5.jpg",
        "http://distilleryimage8.s3.amazonaws.com/647011aebaff11e188131231381b5c25_5.jpg",
        "http://distilleryimage2.s3.amazonaws.com/7206772cbaff11e1b9f1123138140926_5.jpg",
        ...
    ]
}

Example AJAX call: http://example.com/ajax.php?tag=kitty&max_id=1340220451361

Credits

Copyright (c) 2011-2012 - Programmed by Christian Metz
Released under the BSD License.

<?php
/**
* Instagram PHP API
*
* @link https://github.com/cosenary/Instagram-PHP-API
* @author Christian Metz
* @since 20.06.2012
*/
require 'Instagram.php';
use MetzWeb\Instagram\Instagram;
// Initialize class for public requests
$instagram = new Instagram('12345678');
// Receive AJAX request and create call object
$tag = $_GET['tag'];
$maxID = $_GET['max_id'];
$clientID = $instagram->getApiKey();
$call = new stdClass;
$call->pagination->next_max_id = $maxID;
$call->pagination->next_url = "https://api.instagram.com/v1/tags/{$tag}/media/recent?client_id={$clientID}&max_tag_id={$maxID}";
// Receive new data
$media = $instagram->pagination($call);
// Collect everything for json output
$images = array();
foreach ($media->data as $data) {
$images[] = $data->images->thumbnail->url;
}
echo json_encode(array(
'next_id' => $media->pagination->next_max_id,
'images' => $images
));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Instagram more button example</title>
<meta name="author" content="Christian Metz">
<!--
Instagram PHP API class @ Github
https://github.com/cosenary/Instagram-PHP-API
-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
ul {
width: 950px;
}
ul > li {
float: left;
list-style: none;
padding: 4px;
}
#more {
bottom: 8px;
margin-left: 80px;
position: fixed;
font-size: 13px;
font-weight: 700;
line-height: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#more').click(function() {
var tag = $(this).data('tag'),
maxid = $(this).data('maxid');
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
tag: tag,
max_id: maxid
},
dataType: 'json',
cache: false,
success: function(data) {
// Output data
$.each(data.images, function(i, src) {
$('ul#photos').append('<li><img src="' + src + '"></li>');
});
// Store new maxid
$('#more').data('maxid', data.next_id);
}
});
});
});
</script>
</head>
<body>
<?php
/**
* Instagram PHP API
*
* @link https://github.com/cosenary/Instagram-PHP-API
* @author Christian Metz
* @since 20.06.2012
*/
require 'Instagram.php';
use MetzWeb\Instagram\Instagram;
// Initialize class for public requests
$instagram = new Instagram('12345678');
$tag = 'kitty';
// Get recently tagged media
$media = $instagram->getTagMedia($tag);
// Display first results in a <ul>
echo "<ul id=\"photos\">";
foreach ($media->data as $data) {
echo "<li><img src=\"{$data->images->thumbnail->url}\"></li>";
}
echo "</ul>";
// Show 'load more' button
echo "<br><button id=\"more\" data-maxid=\"{$media->pagination->next_max_id}\" data-tag=\"{$tag}\">Load more ...</button>";
?>
</body>
</html>
@nuttelko

Can't make Load more button work

@isratmir

In ajax.php:
$media = $instagram->getTagMedia('your_tag',$auth=false,array('max_tag_id'=>$maxID));

in instagram.class.php:
public function getTagMedia($name, $auth=false, $params=null) {
return $this->_makeCall('tags/' . $name . '/media/recent', $auth, $params);
}

@jdcauley

I cannot get this method to work even on a clean run of your code base

@crazydream3000

Warning: Invalid argument supplied for foreach() in /home/fotog458/public_html/ajax2.php on line 30
{"next_id":null,"images":[]}

@crazydream3000

How can I fix it?
The api request is for media/recent

@NASA777
NASA777 commented Dec 1, 2013

this code was not working at first
but then i replaced

In ajax.php:
$media = $instagram->getTagMedia('your_tag',$auth=false,array('max_tag_id'=>$maxID));

in instagram.class.php:
public function getTagMedia($name, $auth=false, $params=null) {
return $this->_makeCall('tags/' . $name . '/media/recent', $auth, $params);
}

as @isratmir mentioned below and i started to get 1 (same) image all the time.

later one and after checking each line i figured out the problem... (didnt see it at first)

change in this line (your_tag) to an actual tag
$media = $instagram->getTagMedia('your_tag',$auth=false,array('max_tag_id'=>$maxID));

and voila problem solved and i started to get 20 new images per request

@elsplatto

I was getting the 'Creating default object from empty value' warning.
(Using php version 5.4.2)

Adding:
$call->pagination = new stdClass();
After:
$call = new stdClass();

Fixed the issue.

@NiklasPetersson

Hi I can't get this to work i have my own code but trying to but trying to get this load more button.

http://stackoverflow.com/questions/22229428/instagram-api-php-max-id-will-only-load-in-more-pictures-one-time?noredirect=1#comment33767516_22229428

@dogctrl
dogctrl commented Apr 18, 2014

This works, however I get the same results every time a new set is loaded. Could there be something missing?

@maniiiiac

I tried to change the code for getting the recent media from specific user id, but i keep getting the same 20 photos
Has anyone done it before so can help me out with this?

@ronilaukkarinen

I set this up exactly and when clicking button I get nothing. No errors in console, paths and tokens are perfectly fine, ajax request seems to work, ajax.php seems to work when load directly with values replaced, but I just get nothing when pressing the button. If I add for example $('#more').css('border','10px solid red'); inside success: function(data) { it works, but it just doesn't load up any images. Any hint how to get the images to load up?

@gridnik
gridnik commented Jan 5, 2015

I was getting the same result set every time and tried something. It worked.
Beware I'm not a developer but I know the code I suggest is not stable, not production level.
However, saved my day while I was enjoying some coding.
https://gist.github.com/gridnik/1de85cfbb8dae942f084

PS
I'm getting the same results after ~10 loads but I guess it's something about API limitations or not.
Don't know :)

@ivanderos

Good.

@sstechdevang

Hello Respected Communicator and suppoter
I have to post a message with image on Instagram can you please share me referance link or code to solve my problem.
Thanks for your time.

Regards,
D.Gandhi

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.