15 Ağustos 2018 Çarşamba

Instagram gönderilerini sayfada göstermek (Instafeed.js)

By Berkay 13:24 Instagram, JavaScript, jQuery, plugin Leave a Comment

İçinde bulunduğumuz dönemde sosyal ağların önemi çok büyük. Instagram da tartışmasız en büyük sosyal ağlardan bir tanesi. Sadece kişisel hesaplar değil, sahibi olduğumuz işletmeler için de Instagram hesabı açarak aktif olarak kullanıyoruz.

Bu yazıda Instafeed.js plugin'ini kullanarak Instagram hesabımızdaki gönderilerimizi sayfamızda göstereceğiz.

Öncelikle instagram hesabımız için access token almamız gerekecek. Daha sonra plugin'imizi sayfamıza ekleyeceğiz ve istediğimiz gibi düzenleyeceğiz.

1 - Instagram access token oluşturma

Instagram hesabımıza login olduktan sonra https://www.instagram.com/developer/ adresine gidiyoruz ve aşağıdaki görselde işaretlediğim "Manage Clients" butonuna tıklıyoruz.

Daha sonra Register a New Client butonuna tıklıyoruz.

Açılan formdaki bilgileri giriyoruz ve Register butonuna tıklıyoruz.

Application Name: Herhangi bir isim verebiliriz. Oluşturduğumuz client'ın ismi olacak.
Description: Açıklama giriyoruz.
Company Name: Site adresini yazabiliriz.
Website URL: Site adresi
Valid redirect URIs: Site adresi
Privacy Policy URL: Site adresi
Contact email: Email adresimiz

Bilgileri girdikten sonra Register diyerek client'ı oluşturuyoruz.

Successfully registered 'client adı'
Yazısıyla karşılaştık. Client'ımız başarıyla oluşturuldu.

2 - Plugin'i çalıştırma

Şimdi http://instagram.pixelunion.net/ adresine giderek access token bilgimizi alıyoruz.

Sayfamızı oluşturuyoruz.

<!DOCTYPE html>
<html>
<head>
<script src="instafeed.min.js"></script>
<style>
    #instafeed .item {
        float: left;
    }
</style>
</head>
<body>
<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: 'self',
  accessToken: '8303600137.1677ed0.9..........',
  template: '<div class="item"><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></div>'
 });
 
    feed.run();
</script>
<div id="instafeed"></div>
</body>
</html>