cosenary/README.markdown

## README.markdown

      
    Raw
  

              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.

  
## ajax.php
<?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
  ));

## index.php
<!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>
	<?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>