Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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

View README.markdown

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.

View README.markdown
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
<?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
));
View README.markdown
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
<!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>

Can't make Load more button work

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);
}

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

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

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

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

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.

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

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?

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?

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 :)

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.