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>

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz

  1. Tuba dedi ki:

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

  2. ibrahim dedi ki:

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

  3. 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

  4. 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.