Instagram Fotoğraflarını Web Sitesinde Gösterme

Merhaba, bu yazımda Instagram’da yayınladığımız fotoğrafları web sitemizde nasıl gösterebiliriz konusunda sizlere yardımcı olmaya çalışacağım.

Yapılması gereken işlemler öncelikle Instagram Developer sayfasından gerekli ayarlamaları yapmak ve PHP kodumuzu oluşturmaktır.

Haydi başlayalım.

Öncelikle BURAYA tıklayarak Instagram ‘ın Geliştirici sayfasına giriş yapılır.

Register a New Client butonuna basarak yetki tanımlama işlemleri sayfasına gidilir.

Details Tabında ki Alanlar doldurulur. Bu kısımda uygulama ismi, iletişim bilgisi, açıklama gibi genel alanlar olduğundan detaylı bir anlatıma gerek duymadım.  Dikkat edilecek kısım ise Website URL: Valid redirect URIs: alanlarıdır. Bu kısımlara instagram fotoğraflarınızın gösterileceği web sitenizi yazmanız gerekir.

Sonra Security Tabına tıklanarak Disable implicit OAuth: seçimi kaldırılır.

Daha sonra en üstte bulunan Manage Client butonuna basarak oluşturduğumuz yetki tanımlaması için güvenlik anahtarını bir yere not ediyoruz.

Ve son olarak aşağıdaki bağlantıda [CLIENT_ID_HERE] yazan yere bu güvenlik anahtarını yazıyoruz. http://localhost yazan alana ise fotoğrafların gösterilmesini istediğiniz web sitenizi yazıp internet tarayıcınızın adres satırına yapıştırıyoruz.

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

Aşağıdaki animasyon gibi bir sonuç bekliyoruz.

(Bu noktada tarayıcınızın içerik gösteren alanında bir sonuç dönmesini beklemeyin. Sonuç adres satırından dönecektir.)

Yukarıda da gördüğünüz üzere adres satırında bize Access Token ‘ı döndürecektir. Bunu not almamız gerekiyor.

Instagram tarafında yapacaklarımız bu kadar, şimdi gelelim PHP tarafına..

Aşağıdaki kod bloğunda $url  satırının sonuna doğru ACCESS_TOKEN_ANAHTARINIZI_BURAYA_YAZIYORSUNUZ yazan kısıma yukarıda dönen değeri yapıştırıyoruz GOSTERILECEK_FOTO_ADET kısmına fotoğraf sayısı giriyoruz.

$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

Sonuç aşağıdaki gibi olacaktır.

Bonus:

Eğer instagram fotoğraflarınızı HashTag’e göre getirmek isterseniz

Öncelikle yukarıda anlatıldığına benzer şekilde aşağıdaki bağlantıdan bunun için yetki almanız gerekecek.

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

Sonrasında PHP kodunda bulunan $url kısmını aşağıdakine benzer şekilde güncellerseniz etiketlemeye göre fotoğraf çekebilirsiniz.

$tag='gmk';

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

Not: Lütfen kaynak göstererek paylaşınız.

Güncelleme: Muhammet arkadaşımızın albümlerin görülmemesi sorunu için paylaştığı kodu aşağıda bulabilirsiniz.

//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 "";

Hala sorun yaşayan olursa aşağıdaki kod bloğunu da deneyebilir.

<?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}' />";
}
?>