Last Friday I spent the morning looking into the Instagram API thinking it would be cool to have our members be able to share their photos on the site via instagram. So this is a quick and dirty implementation but it works. There are a couple of things to keep in mind though. Instagram has a limit on the number of calls you can make to the API per hour which is set at 5000 so if you have a really busy site you may need to look into another method but for most sites this should be sufficient. The other thing is at this point I am not using the pagination feature of the API so I will only be showing the last 60 images uploaded with out tag. I will be writing the pagination code soon and will add it in another post.

So the first step is to go to the API site http://instagram.com/developer/ and register your application. Give it a name, a description, the URL of your site and the OAUTH redirect which will also be your website since we will not need to authenticate for what we are doing.

So now you should have all of your client info including your client id and client secret we will need these in the code block.

So here is the code.

Create a class called instagram.php and put this code in it.

class instagram {

		const DEFAULT_USER_AGENT = 'http://your.site.com';
//the $type is for future additions to this class for now we have one (tag)
        	public function __construct($type) {

			if(empty($type)) {
				$this->errors['system'] = 'must set a type in instagram';
			} else {
				$this->type = $type;
			}

		}
//this is the method to call in your code to get the response from istagram
		public function do_get($tag) {
//this is the URI to the API I define the client id in a config file so that I can easily change it for other sites using the CMS
			$uri = "https://api.instagram.com/v1/tags/".$tag."/media/recent?client_id=".INSTAGRAM_CIENT_ID."&count=60";
//here we initiate the cURL handler
			$this->handler = curl_init($uri);
//here we call the set options method
			$this->_setOptions();
//this is our response from the API
			$response = curl_exec($this->handler);
//close our connection
			curl_close($this->handler);
//return the response to our view
			return $response;

		}
//this is just a function for debugging
		public function curlErrors() {
			return $this->curlErrors;
		}
//these are the options we must set for the API call to succeed 
		protected function _setOptions() {
			curl_setopt($this->handler, CURLOPT_RETURNTRANSFER, true);
			curl_setopt($this->handler, CURLOPT_FOLLOWLOCATION, true);
			curl_setopt($this->handler, CURLOPT_USERAGENT, self::DEFAULT_USER_AGENT);
			curl_setopt($this->handler, CURLOPT_HTTPGET, true);
			curl_setopt($this->handler, CURLOPT_SSL_VERIFYPEER, false);
		}		
	}

Now we need load the class and tell it what we need. So the way I have my CMS built is for each section of the site there is a controller file that deals with section specific tasks. So that is where I put this code it is called before anything is sent to the browser. Your implementation may vary.

//require the instagram class
        require_once('./path/to/your/class/file/instagram.php');
//create a new instance of the class get is what we are doing(getting something)
        $ig = new instagram('get');
//do_get is the methos in our class that returns the response from the API
	$igObject = $ig->do_get('whatevertagyouwant');
//here we have to turn the returned json response to a php array
	$igArray = json_decode($igObject, true);

So now we have an array of up to 60 images tagged with whatever tag we passed in stored in a variable called $igArray. Now is the fun part where we have to print it out. Instagram returns a lot of information in their response but we will only be using a little of it.  You can do a var_dump($igArray) to see the other stuff available. So here is the code I am using to show the images and the usernames under them.

$i = 0;
	if(count($igArray['data'] > 4)) {
		foreach($igArray['data'] as $data) {
			if($i <= 60) {
				echo '

						
						
						
						
'.$data['user']['username'].'
					
';
			}
			$i++;
		}
	} else {
		echo '
Sorry no Insta iO at the moment!
';
	}

So above we are looping through the data portion of the response from instagram this is where all of the information we need is stored. The $data[‘link’] is the url to the instagram page for the photo. The user info is stored in a sub array $data[‘user’] we only want the username so $data[‘user’][‘username’]. And the images sub array holds 3 separate urls to three sizes of images I am using the low resolution image and then resizing with html which I know is ugly but quick and dirty like I said. Also I am checking at the beginning for at least 4 images if there are not 4 it drops to the else which just lets users know that the feed is down at the moment.

This is the first quick version of this code it does work but I will post updates as it gets more robust and prettier. To see this code in action check out