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 {
 background: #7d1c1c;
 font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
 font-weight: 100;
 letter-spacing: 2px;
 color: white;
 -webkit-backface-visibility: hidden;
}
h1 {
 font-size: 50px;
 font-weight: 100;
 text-align: center;
 text-transform: uppercase;
 color: #d02f2f;
}
.instagrams {
 width: 1000px;
 margin: 0 auto;
}
.instagram {
 position: relative;
 width: 31%;
 margin: 1%;
 padding-bottom: 31%;
 float: left;
 overflow: hidden;
}
.instagram .user {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0 15px;
 background: #531313;
 text-overflow: ellipsis;
}
.instagram .user img {
 position: absolute;
 top: 15px;
 right: 15px;
 width: 70px;
 border-radius: 200px;
 vertical-align: middle;
 box-shadow: 0px 0px 0px 5px #d02f2f;
 -webkit-transform: translateY(100px);
 -moz-transform: translateY(100px);
 -ms-transform: translateY(100px);
 -o-transform: translateY(100px);
 transform: translateY(100px);
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s;
}
.instagram .user img:hover {
 border-radius: 0;
 box-shadow: none;
}
.instagram .user h1 {
 width: 70%;
 margin: 0;
 font-size: 20px;
 line-height: 100px;
 font-weight: 100;
 color: white;
 text-align: left;
}
.instagram > img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 transition: all 0.5s;
}
.instagram:hover > img {
 -webkit-filter: grayscale(100%);
 -webkit-transform: translateY(100px);
 -moz-transform: translateY(100px);
 -ms-transform: translateY(100px);
 -o-transform: translateY(100px);
 transform: translateY(100px);
}
.instagram:hover > .user img {
 -webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
 -ms-transform: translateY(0px);
 -o-transform: translateY(0px);
 transform: translateY(0px);
}
* {box-sizing: border-box;}

 

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

Html : 

<div class="instagrams">
</div>

jQuery adresi : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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.

<script>
 $instagrams = $('.instagrams');
$.ajax({
 type: "GET",
 url: "https://api.instagram.com/v1/users/kullanici id buraya /media/recent/?access_token=bu bolume acces token kodunu girin",
 dataType: "jsonp",
 success: function (json) {
 $(json.data).each(function(e) {
 $instagrams.append(
 '<div class="instagram">' +
 '<div class="user">' +
 '<img src="' + this.user.profile_picture + '" />' +
 '<h1>' + this.user.full_name + '</h1>' +
 '</div>' +
 '<img src="' + this.images.low_resolution.url + '" />' +
 '</div>'
 );
 });
 }
});
 </script>

 

Bu Yazıyı Paylaş

5 yorum "Web siteye Instagram resimlerini çekme"

  1. Batuhan dedi ki:

    Ö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. Salih dedi ki:

    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

  3. ibrahim dedi ki:

    Çok teşekkürler güzel paylaşım

  4. Tuba dedi ki:

    Sandbox üzerinden limitli olarak gelmekte tüm resimleri almak için instagram apisinde live mode da olmanız gerekiyor

    1. Zeynep dedi ki:

      nasıl yani tam anlayamadım kusura bakmayın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla