Not Displaying Instagram Photos on a Website

Hello, in this post I’ll try to help you with how we can display the photos we publish on Instagram on our website.

The steps to be done are first to make the necessary settings on the Instagram Developer page and create our PHP code.

Let’s get started.

First, by clicking HERE , you log in to Instagram’s Developer page.

By pressing the Register a New Client button, you go to the authorization setup page.

The fields in the Details tab are filled in. Since this section has general fields such as application name, contact information, and description, I didn’t feel the need for a detailed explanation. The part to pay attention to is the Website URL: Valid redirect URIs: fields. In these sections, you need to enter your website where your Instagram photos will be displayed.

Then, by clicking the Security tab, the Disable implicit OAuth: option is unchecked.

Then, by pressing the Manage Client button at the very top, we note down the security key somewhere for the authorization we created.

And finally, in the link below, we write this security key where it says [CLIENT_ID_HERE] . In the field that says http://localhost , we write your website where you want the photos to be displayed and paste it into your web browser’s address bar.

https://instagram.com/oauth/authorize/?client_id=[CLIENT_ID_HERE]&redirect_uri=http://localhost&response_type=token

We expect a result like the animation below.

(At this point, don’t expect a result to be returned in your browser’s content display area. The result will be returned in the address bar.)

As you can see above, it will return the Access Token to us in the address bar. We need to note this down.

That’s all we need to do on the Instagram side; now let’s move on to the PHP side..

In the code block below, near the end of the $url line, we paste the value returned above into the part that says ACCESS_TOKEN_ANAHTARINIZI_BURAYA_YAZIYORSUNUZ, and we enter the number of photos in the GOSTERILECEK_FOTO_ADET part.

$url = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=ACCESS_TOKEN_ANAHTARINIZI_BURAYA_YAZIYORSUNUZ&count=GOSTERILECEK_FOTO_ADET';

$endata = file_get_contents($url);
$dedata = json_decode($endata);


foreach($dedata->data as $val){
  if( $val->type == 'image' ){
    // echo '<a href="'.$val->images->standard_resolution->url.'"><img src="'.$val->images->thumbnail->url.'" alt=""></a>';

      echo '<div class="col-lg-3">';
        echo '<img class="img-thumbnail img-responsive" src="'.$val->images->standard_resolution->url.'" alt="">';
      echo '</div>';
  } //if
}//foreach

//Ulaşılabilecek veriler

$val->type	Dosya türü
$val->filter	Resimde kullanılan filtre adı
$val->created_time	Oluşturulma tarihi
$val->link	Resmin instagram linki
$val->likes->count	Resmin beğenilme sayısı
$val->caption->text	Resme girilen açıklama
$val->images->thumbnail->url	Küçük resim linki
$val->images->thumbnail->width	Küçük resmin genişliği
$val->images->thumbnail->height	Küçük resmin yüksekliği
$val->images->low_resolution->url	Orta boyut resmin linki
$val->images->low_resolution->width	Orta boyut resmin genişliği
$val->images->low_resolution->height	Orta boyut resmin yüksekliği
$val->images->standard_resolution->url	Standart boy resmin linki
$val->images->standard_resolution->width	Standart boy resmin genişliği
$val->images->standard_resolution->height	Standart boy resmin yüksekliği

The result will be as follows.

Bonus:

If you want to fetch your Instagram photos by HashTag

First, similar to what was described above, you will need to get authorization for this from the link below.

https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID_HERE&redirect_uri=http://siteniz.com&response_type=code&scope=public_content

Then, if you update the $url part in the PHP code similar to the following, you can fetch photos by tag.

$tag='gmk';

$url = 'https://api.instagram.com/v1/tags/'.$tag.'/media/recent?access_token=ACCESS_TOKEN_NUMARANIZ';

Note: Please share with attribution.

Update: You can find below the code shared by our friend Muhammet for the issue of albums not being visible.

//Güncel ve Sorunsuz Çalışan instagram Fotoğraflarını Web Sitesinde Gösterme Kodu

function fetch_data($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 20);
$result = curl_exec($ch);
curl_close($ch);
return $result;
} 

$display_size = "standard_resolution"; // you can choose between "low_resolution", "thumbnail" and "standard_resolution"
$result = fetch_data("https://api.instagram.com/v1/users/self/media/recent/?access_token=Buraya_Acces_Token_Code&count=70");
$result = json_decode($result); 
echo "";
foreach ($result->data as $photo) {
$img = $photo->images->{$display_size};
echo "<img src='{$img->url}' />";
}
echo "";

If anyone still has problems, they can also try the code block below.

<?php
//Instagram Feed

function fetchInstagram($url){
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_TIMEOUT, 20);
  $result = curl_exec($ch);
  curl_close($ch); 
  return $result;
}

$count		= 1;
$user_id	= "user-id-BURAYA-GIRILECEK";
$access_token	= "access-token-BURAYA-GIRILECEK";
$display_size	= "standard_resolution";
$ig_feed	= "https://api.instagram.com/v1/users/$user_id/media/recent?count=$count&access_token=$access_token";
$result = fetchInstagram($ig_feed);
$result = json_decode($result);

foreach ($result->data as $photo) {
  $img = $photo->images->{$display_size};
  echo "<img src='{$img->url}' />";
}
?>