Create a Instagram location Image Fetcher in PHP

Today I will show you how to create a simple Instagram location image fetcher in PHP by using google map REST API and Instagram REST API. This application will use google map API to get latitude and longitude of a specific location and then give that latitude and longitude to Instagram API to fetch recent 20 public photos tagged with that location.

If you are not familiar with REST then REST stands for Representational State Transfer which is a way of accessing web services. 75% of web services use REST. You can access a REST service by using a simple HTTP GET or POST requests. The API give output most probably in JSON format and you can decode it in PHP and use it in your application.

Now lets starts

There are two parts in this application.

1) Fetch Latitude and Longitude of a specific location using google map API

You can get both latitude and longitude of a location by a simple GET request in the following URL. You will get JSON output.

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA

Now lets checks its PHP codes

<?php

$map_url = 'https://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($_POST['location']);
	
$map_json = file_get_contents($map_url);
$map_array = json_decode($map_json,true);
	
$lat = $map_array['results'][0]['geometry']['location']['lat'];
$lng = $map_array['results'][0]['geometry']['location']['lng'];

2) Get Latest Images by using Instagram API

The Instagram location API required latitude and longitude and a ACCESS TOKEN . Here is the REST API URL. The output is also in JSON Format.

https://api.instagram.com/v1/locations/search?lat=48.858844&lng=2.294351&access_token=ACCESS-TOKEN

Now in order to get access token there are again two methods

First Method

Register your app in Instagram developer console https://www.instagram.com/developer/ and get access token by using again using GET Request like below

https://instagram.com/oauth/authorize/?client_id=56df9______b9cad&amp;redirect_uri=http://localhost/test/instagram/&response_type=token&scope=basic+public_content+follower_list+comments+relationships+likes

But this access token can be used to fetch your own information only not any other users. Inorder to fetch public users information you need to submit your app in instagram which is a very complex process so second method

Second Method (Recommended and Easy)

Just visit following link to get the Access Token.

Once you get the access token then the PHP code for fetching Images of that location is given below.

<?php

$instagram_url = "https://api.instagram.com/v1/media/search?lat=".$lat."&lng=".$lng."&access_token=".$access_token;

$instagram_json = file_get_contents($instagram_url);

$instagram_array = json_decode($instagram_json,true);

The Complete Code is given below

<?php
if(!empty($_POST['location'])){
	
	$access_token = "51---3e";
	
	$map_url = 'https://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($_POST['location']);
	
	$map_json = file_get_contents($map_url);
	$map_array = json_decode($map_json,true);
	
	$lat = $map_array['results'][0]['geometry']['location']['lat'];
	$lng = $map_array['results'][0]['geometry']['location']['lng'];
	
	$instagram_url = "https://api.instagram.com/v1/media/search?lat=".$lat."&lng=".$lng."&access_token=".$access_token;

    $instagram_json = file_get_contents($instagram_url);

    $instagram_array = json_decode($instagram_json,true);
	
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>InstaLocator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>Instagram Location Image Searcher</h1>
</div>
  
<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
			<form action="" method="POST">
			  <div class="form-group">
				<label for="location">Location Name</label>
				<input type="test" class="form-control" name="location" value="<?php if(!empty($_POST['location']))echo $_POST['location'];?>">
			  </div>
			  <button type="submit" class="btn btn-primary btn-block">SEARCH</button>
			</form>
        </div>
    </div>
	<p>&nbsp;</p>
	<div class="row">
	    
	    <?php
		if(!empty($instagram_array))
		{   ?>
			
			    
					<div class="col-md-8 col-md-offset-2">
					<h2 style="text-align:center;">Location : <?php echo $_POST['location']; ?></h2>
					<p>&nbsp;</p>
					<?php 
					foreach($instagram_array['data'] as $image)
			        {?>
					    <div class="well">
						<img class="img-responsive" style="padding-left:40px;" src="<?php echo $image['images']['standard_resolution']['url'] ?>" alt="Instagram Photos">
						<p>&nbsp;</p>
						</div>
					  <?php
						}
					}
					?>	
					</div>
			    

    </div>
</div>

</body>
</html>

I used Some Bootrap for giving it a basic look. You can customize it according to you. The sample output image is given below.

Instagram Location Fetcher App - Shareurcodes.com