İnstagram Fotoğraflarını Çekme

Bir instagram hesabınız var, birde web siteniz. İnstagramda da aktifsiniz. Ama web sitenize zaman ayıramıyorsunuz. Ziyaretçilerinize fotoğraflarınızla yaşadığınızı gösterebilirsiniz. Üstelik otomatik olarak… (Reklam içeriği gibi oldu biraz )

Eski blogumdan kalma google indexleriyle bloguma “İnstagram Fotoğraflarını Çekme” diye aratarak gelen ziyaretçiler var. Onun için tekrardan paylaşayım dedim. İnstagram APİ’nin  Twitter ve Facebookta olduğu gibi Türkçe kaynak yok. Yabancı kaynaklarda biraz karışık gibi gözükse de uygulamaya geçince gayet kolay.

Kuruluma geçelim.

• Öncellikle instagram.com’a giriş yapın.
• Instagram Developer sayfasına giriyoruz. Sağ üstte kullanıcı isminizin yanındaki İstemcileri Yönet menüsüne tıklıyoruz. Yeşil butonda Yeni İstemci Kaydet butonuna tıklıyoruz.

• Register new OAuth Client sayfasındayız. Buradaki alanları web sayfanıza göre doldurun.
  OAuth redirect_uri: http://jelled.com/instagram/access-token yazıyoruz. Ve Register’e tıklayıp buradaki işimizi bitiriyoruz.
•  Bu işlemden sonra bize CLIENT INFO bilgileri verecek.

• Buradaki CLIENT ID’yi kopyalıyoruz. Buraya tıklayarak Access Token’i oluşturuyoruz. Submit dedikten sonra bir onaylama sayfası gelecek Authorize diyerek onaylıyoruz.  Onayladıktan sonra bize Access Token kodunu ve bazı üye bilgilerimizi veriyor.
•  JSON Kodumuz;
  view source

  print?

  1	$(function() {

  2

  $.ajax({

  3	type: "GET",

  4	dataType: "jsonp",

  5	cache: false,

  6	url: "https://api.instagram.com/v1/users/<?=$user_id?>/media/recent/?access_token=<?=$access_token?>",

  7	success: function(data) {

  8	for (var i = 0; i < <?=$num_to_display?>; i++) {

  9	$(".instagram ul").append("<li><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></a></li>");

  10

  }

  11

  12

  }

  13

  });

  14

  });

  view source

  print?

  1	<?=$user_id?>, <?=$access_token?> alanlarına yukarıda elde ettiğimiz idleri yazıyoruz.

  Edit: 6 Aralık 2015 //
  Fotoğraflarınıza limit girmek için ise <?=$num_to_display?> alanı yerine değeri girin.

Demo

Kaynaklar:

Display Instagram Picture Stream Really Easy with jQuery and json

Display an Instagram feed on a website using jQuery