Web siteye Instagram resimlerini çekme

4
944
views

instagram çekme

Bir önceki yazımızda instagram üzerinden api kodu ve kullanıcı id öğrenmeyi anlatmıştık. Api kodu ve kullanıcı idesi  kullanarak belli bir instagram hesabından çeşitli veriler çekiliyor.  Şuradaki yazımızda Css3 hover efekti ile hazırlanmış bir örnek paylaşmıştık. Yine aynı örneği instagram üzerinden yayınlanan fotoğrafları çekerek kullanıcaz. Bu şekilde instagram üzerinden websitenize  fotoğraflarınızı çekebilirsiniz.

Css3 hover efekti ile hazırlanmış demo örneği instagram üzerinden jQuery ajax yardımıyla kullanıcı adı, kullanıcı profil resmi ve kullanıcının son yayınlandığı resimler çekilerek websitesi üzerinden yayınlamaya yarayan bir örnek. Mouse ile  reismlerin üzerine geldiğinizde resim rengi siyah beyaz olup aşağı inerken arkasında duran küçük profil resmide  aynı esnada  yukarı çıkıyor. Profil resminin üzerine mouseyi getirdiğinizde ise resmin etrafındaki border kayboluyor ve çember şeklindeki resim dört köşe bir çerçeve şeklini alıyor.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

 

  • Body etiketleri arasına eklemeniz gereken bölümler.

Html : 

jQuery adresi : 

JavaScript : 

Bir önceki yazıda anlattığımız gibi alacağınız api kodunu ve kullanıcı idesini aşağıdaki kodların içine yazmanız gerekiyor.

 

1 oy (6 votes, average: 3,17 out of 5)
Loading...
Önceki İçerikİnstagram api kodu alma ve kullanıcı id öğrenme
Sonraki İçerikFacebook style footer admin panel
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

4 YORUMLAR

  1. Öncelikle emeğiniz için teşekkür ederim. Çok bilgilendirici bir paylaşım. Sayfada daha fazla fotoğraf göstermek için hangi parametreyi değiştirmeliyiz. Cevaplayabilirseniz sevinirim. İyi çalışmalar.

  2. Merhaba, paylasim icin cok tesekkurler, batuhan beyin sordugu soruda bende takildim, tum fotoğrafları getirebilmek icin nasil bir düzenleme yapmamiz gerekir? Yardimci olursaniz sevinirim, saygilar

CEVAP VER

Please enter your comment!
Please enter your name here