Instagram Feed

İnstagram hesabınızdaki gönderileri websitenizde yayınlamak için kullanılan küçük bir javascript kütüphanesidir. Bu kütüphane herhangi bir bağımlılık gerektirmez. İsteğe bağlı çoklu instagram hesaplarının gönderilerini listelemek için kullanabilirsiniz. Kütüphane boyutu sadece 3KB.

Kullanım

İlk olarak indirdiğiniz kütüphaneyi web sayfanıza dahil edin. Daha sonra html yapılandırmanızı ayarlayın Resimlerin bunu yapmak çok basit!

HTML Yapılandırması

• #instagram-container: En genel kapsayıcınızın id'sinin bu olmasına dikkat edin.
• .instagram-item: Resminizi kapsayacak div elemanınızın class'ının bu olmasına dikkat edin.
• .instagram-url: Resminizi kapsayacak link elemanınızın class'ının bu olmasına dikkat edin.
• .instagram-image: En son katmandaki yani resminizin class'ının bu olmasına dikkat edin.

Önemli Not: Eklediğiniz her .instagram-item elementi bir instagram resmine denk gelmektedir ve eklediğiniz kadar otomatik olarak resimleri eleman sayısına göre ayarlayacaktır.

<div id="instagram-container">
    <div class="instagram-item">
        <a href="#" target="_blank" class="instagram-url">
            <img loading="lazy" data-size="small" class="instagram-image img-fluid">
        </a>
    </div>
    <div class="instagram-item">
        <a href="#" target="_blank" class="instagram-url">
            <img loading="lazy" data-size="small" class="instagram-image img-fluid">
        </a>
    </div>
    <div class="instagram-item">
        <a href="#" target="_blank" class="instagram-url">
            <img loading="lazy" data-size="small" class="instagram-image img-fluid">
        </a>
    </div>
</div>

Javascript Yapılandırması

Javascript yapılandırması oldukça basittir. Bu bölümde yapılması gereken şey istediğiniz hesapların adlarını instagram.addProfile('botbenson') olarak eklemeniz. Burada dikkat etmeniz gereken kısım instagram çoğu zaman hesapları ziyaretçiye kapatır ve bu gibi durumda giriş sayfasına yönlendirir.

Bu durum olduğu taktirde addProfile alanına eklediğimiz kullanıcı adının id alma işlemi başarısız olacaktır. Bu sorunu çözmek için isteğe bağlı olarak 2. parametreyi hesabın id numarası olarak gönderirseniz çift doğrulama ile kullanım şansınızı oldukça fazla arttıracaktır.

Önemli Not: 2. parametre isteğe bağlıdır. İsteyenler kullanmayabilir.

<script type="text/javascript" src="instagram-feed.min.js"></script>
<script type="text/javascript">
	instagram.addProfile('botbenson');
	instagram.addProfile('botbenson2', 777145456);
	instagram.addProfile('botbenson3', 775546452);
	instagram.load();
</script>

Resim Boyutlarını Ayarlamak

Resim Boyutlarını ayarlamak için 5 adet seçeneğiniz vardır. Bunlar aşağıdaki gibidir ve seçtğiniz resim boyutunu resim elementine data-size olarak göndermeniz yeterli olacaktır.

<img loading="lazy" data-size="small" class="instagram-image img-fluid">

Resim Boyutları Listesi

Kod	Boyut
thumbnail	150x150
small	240x240
medium	320x320
large	480x480
xlarge	640x640