Benim gibi sitede ayrı bir galeri oluşturmayı sevmiyorsanız, birden fazla galeriyi güncellemek, bir resmi oraya buraya yüklemek zor geliyorsa bu konu tam size göre. Instagram hesabındaki fotoğrafları sitenize çekebilirsiniz. Bunu yapmanın iki yöntemi var.

  1. WordPress eklentisi kullanmak
  2. Instagram Apisini kullanarak kendi başınıza entegre etmek

 

Bana 2. yöntem daha cazip geliyor. Eklenti kullanmayı sevmiyorum. Bu yazıda eklentisiz bu işlemi nasıl yapabiliriz onu anlatacağım. Haydi adım adım ilerleyelim.

  1. Tarayıcıdan Instagram’a giriş yapın. Daha sonra developer sayfasına gidin. Link: https://www.instagram.com/developer/
  2. Yeni bir uygulama oluşturun. Yani; Manage Clients > Register a New Client
  3. Karşınıza çıkan formu uygun şekilde doldurun. Security tabındaki “Disable implicit OAuth:” yazısındaki onayı kaldırın.
  4. Aşağıdaki linki adres satırına yapıştırın. CLIENT-ID yazan yeri oluşturduğunuz uygulamanın client id değeri ile, REDIRECT-URI yazan yeri ise uygulamayı oluştururken yazdığınız website url ile değiştirin. Sonra entere basıp o adrese gidin. Instagram sizden izin vermenizi isteyecektir. Uygulamaya izin verin.
  5. İzin verdikten sonra linkiniz aşağıdaki gibi değişecektir. Onu bir kenara not edin. Birazdan lazım olacak.
  6. Sıra geldi verileri çekmeye. Aşağıdaki kod bloğu ile istek gönderip instagramdan izin verdiğimiz uygulama aracılığıyla resimleri sitemizde gösterebileceğiz.

    USER-ID yazan yere 5. adımda kırmızı ile işaretlediğim ilk alandaki veri, ACCESS-TOKEN yazan yere ise #access_token= ifadesinden sonraki veri gelecek.
  7. Şimdi geldi sıra sitemizde göstermeye. Ben .instagram adında bir class oluşturup içine çektirdim. Kod satırlarına bakarsanız instagram classının içine veriler append oluyor. Kafanıza göre değiştirin, düzenleyin.
  8. Ufak hatırlatma: Yukarıdaki kodu site yüklendikten sonra çalıştırın. ($(document).ready(function(){} sayfa yüklendikten sonra çalışmasını sağlayacaktır.) jQuery kütüphanesinden sonraya yazmanız lazım. For döngüsündeki değeri değiştirerek kaç tane fotoğraf gösterileceğini ayarlayabilirsiniz.

Takıldığınız bir yer olursa elimden geldiğince yardımcı olmaya çalışırım.  Demo linki aşağıdadır.

DEMO ADRESİ