Categories: Web Yöneticisi

İ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;
    $(function() {
     $.ajax({
     type: "GET",
     dataType: "jsonp",
     cache: false,
     url: "https://api.instagram.com/v1/users/<?=$user_id?>/media/recent/?access_token=<?=$access_token?>",
     success: function(data) {
     for (var i = 0; i < <?=$num_to_display?>; i++) {
     $(".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>"); 
     } 
     
     }
     });
    });
    
    &lt;?=$user_id?&gt;, &lt;?=$access_token?&gt; 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

hgtucel

View Comments

  • Aslında beni çok yakından ilgilendiren bir konu lakin demoyu görebilseydim daha iyi olacaktı. Yada var da ben mi göremiyorum :(

      • hala daha 20 den fazla göstermiyor? 1-2-3 yazıyorum evet sınırlıyor ancak 20 den fazla göstermiyor?

  • Anlatım düzeni güzel fakat ben yapamadım, yardımcı olabilecek misiniz ?

      • Tüm kısımları doğru yaptığımı düşünüyorum sonu olarak hiç bir şey çıkmıyor. Eğer müsait iseniz teamviewer'dan bakabilir misiniz ?

  • Merhaba, öncelikle paylaşım için çok teşekkür ediyorum. bir sorunum var, instagram i döngüsünde 20 tane fotoğraf veriyor. bunu arttırmanın bir yolu varmıdır acaba? yani 20 fotoğraftan daha fazlasını içeri alabiliyor muyuz?

    Teşekkür ederim
    Sercan Kaval

    • Rica ederim. Geç cevap için özür dilerim.
      Fotoğraflarınıza limit girmek için ise =$num_to_display?> alanı yerine değeri girin.
      Konuya da ekledim bu arada.

  • Merhabalar sadece belli kullanıcı resimlerini mi alabiliyoruz yoksa tüm resimleri yada genel tüm kullanıcılara bakabiliyor muyuz gizli profil olmayan

    • Tabi belirlenen kullanıcı adı. Amaç zaten kendi hesabınızdaki fotoğrafları çekip yayınlamak.

  • İyi günler hocam. bir siteye instagram resimlerini çekmeye çalışıyorum. ama google'daki bütün userid veren siteler çalışmıyor şuan. instagram sayfamın user idsini nasıl öğrenirim

  • Peki ..... kişisi sizin fotoğrafınızı çekti ne demek ben onu anlamıyorum asıl.

  • Hocam merhabalar,
    Çok gariptir ki ben sürekli beyaz sayfa görüyorum.
    İnternette başka örnekler var Codepen'de canlı canlı çalışıyor hatta kendi API keyimi yerleştirdiğimde bile sorunsuzca benim görsellerimi çekiyor ama ben aynı kodları bir PHP sayfasına koyup hosting'e attığımda sadece beyaz sayfa görüyorum ve cidden anlam veremiyorum.
    Yardımcı olabilir misiniz ? lütfen.
    :)

Son Makaleler

macOS Klavye <" Karakter Sorunu Çözümü

macOS işletim sistemli bilgisayarlarda usb ile harici klavye tanımladığınızda <" karakterlerinde problem yaşanıyor. Klavyede "…

4 sene ago

Cocoapods could not find compatible versions for pod “firebase_core”: Hatası Çözümü

Flutter, React Native ile veya native olarak iOS uygulaması geliştirirken firebase kurulumunda problemler çok yaşanıyor.…

4 sene ago

PortakalBahcem.Com Nasıl ? Alışveriş Deneyimi

Portakalbahcem.com üzerinden 4kg finike portakalı satın aldım. İnstagram üzerinden reklam ile tanıştığım bu siteden yaptığım…

4 sene ago

Düzce Üniversitesi Kar Yağışı Eşliğinde – Öğrencilik Zamanlarından

Düzce Üniversitesinde ikinci sınıfta öğrenci iken bir internet sıkıntısı yaşamış ve okulun kütüphanesinden yararlanmak için…

4 sene ago

Windows ile Linux Kurulu (Dual Boot) Bilgisayarda Saat Sorunun Çözümü

Bilgisayarınızda Windows'un yanına Linux kurulu ise muhtemelen saatin yanlış göstermesi sorununu yaşayacaksınız. Dual Boot yöntemi…

4 sene ago

Modus Kedi – Köpek Kovucu İncelemesi

Modus kedi köpek kovucu satın aldım. İnceleme yapıp, deneyimlerimi paylaşacağım. Piknik alanlarında, bahçeli yerlerde kardeşlerim…

4 sene ago

This website uses cookies.