Elinizde özel kodlanmış bir HTML siteniz var, aktif bir Instagram hesabınız var ve ikisi arasındaki uçurum bu kadar zor kapatılmamalı. Instagram’ın yerleşik gömme çözümleri sınırlı özelleştirme sunar, Graph API ise token yönetimi, hız sınırları ve özel bir frontend gerektirir. Sitenizde temiz, otomatik güncellenen bir akış istediğinizde ikisinden de ideal değildir.
Instagram Feed pulls content from your account automatically and lets you configure layouts and styling in a visual editor. No API keys, no server-side logic – just a two-line snippet to copy-paste. Below is a walkthrough of all three methods so you can choose the best fit for your setup and maintenance needs.”>Ayrıca kodsuz bir yaklaşım da var: Instagram Feed gibi bir widget aracı hesabınızdaki içeriği otomatik olarak çeker ve görsel bir editörde düzenleri ve stilleri yapılandırmanıza olanak tanır. API anahtarları yok, sunucu tarafı mantığı yok – sadece iki satırdan oluşan bir kopyala-yapıştır parçacığı. Aşağıda, kurulum ve bakım ihtiyaçlarınız için en uygun olanı seçebilmeniz adına üç yöntemin adım adım açıklaması yer alıyor.
- Herhangi bir HTML sayfasında canlı, otomatik güncellenen bir Instagram akışını 5 dakikadan kısa sürede nasıl elde edersiniz
- Web sitenizin türü için en uygun akış düzeni hangisidir (portföy, e-ticaret, blog)
- Widget, Yerel Gömme ve API yaklaşımları arasındaki temel farklar
- Akış performansı, filtreleme ve mobil optimizasyon için pratik ipuçları
Zaten ne istediğini biliyorsan ve adımlara ihtiyacın varsa, aşağıdaki hızlı başlangıç seni sıfırdan yayıma 5 dakikadan kısa sürede çıkarır.
Hızlı Başlangıç: Instagram’ı HTML’ye Ekle
İşte en hızlı yol — 4 adım, kod bilgisi gerekmez.
- Instagram Akış editörünü açın ve bir şablon seçin.
- Kullanıcı adınızı girin ve akışı özelleştirin.
- Gömme kodunuzu oluşturmak için tıklayın “Web Sitesine Ekle”.
- HTML dosyanızın <body> bölümüne yapıştırın ve değişiklikleri yayınlayın.
Aşağıdaki etkileşimli düzenleyicide Instagram akış widget’inizi oluşturun ↓
HTML Web Sitesinde Instagram’ı Eklemenin Üç Yolu
HTML sayfanıza Instagram içeriğini eklemenin birden çok yolu vardır; ihtiyaç duyduğunuz kontrol miktarına ve görüntülemek istediğiniz gönderi sayısına bağlıdır.
| Yöntem | Zorluk | Özelleştirme | Otomatik Güncellemeler | En Uygun Olduğu Alanlar | Maliyet |
|---|---|---|---|---|---|
| Elfsight Instagram Akış Bileşeni | Kod yok | Yüksek (düzen, renkler, filtreler, açılır pencere, CTA düğmeleri) | Evet (her 48 saatte bir) | Tasarım Kontrolü ile Tam Akış Görünümü | Ücretsiz Plan / Ücretli Katmanlar |
| Instagram’in Kendi Gömme Özelliği (Tek Gönderi) | Basit HTML | Hiçbiri (Instagram stiline sabit) | Hayır | 1–3 Belirli Gönderiyi Gömme | Ücretsiz |
| Instagram oEmbed API | Geliştirici Seviyesi | Tamamı (Ön yüzü siz oluşturursunuz) | Evet (yenileme mantığını siz yönetirsiniz) | Tam kontrole sahip özel beslemeler | Ücretsiz (Meta geliştirici hesabı gerekir) |
Özetle: Widget yaklaşımı, düzen özelleştirme ve otomatik güncellemeli akışlarla çoğu kullanım durumunu kapsar — arka uç kodu gerekmez. Instagram’ın yerleşik gömme özelliği tek gönderi veya Reels için en iyi sonucu verir; API tabanlı yol ise tam programatik kontrole ihtiyaç duyan ancak token yenileme ve hız sınırlarına uyum gibi sürekli bakım gerektiren özel uygulamalar için daha uygundur.
Instagram Akışı İçin Doğru Şablonu Seçin
Beslemi yapılandırmadan önce sayfada hangi rolü oynaması gerektiğine karar verin. Ürün sayfası sosyal kanıt beslemesi, görsel portföy veya hashtag beslemesinden farklı bir kurulum gerektirir.
| Şablon | Kapsadığı İçerik | Düzen | En Uygun Olduğu Alanlar |
|---|---|---|---|
| Profil Widget | Tam profil başlığı (avatar, ad, gönderi/izleyici/izleyen sayıları, Takip Et düğmesi) + slider navigasyonlu gönderi ızgarası | Kaydırıcı | Marka sayfaları, “Hakkımızda” bölümleri, influencer portföyleri — Instagram’da tam bir kimlik oluşturmak istediğiniz her yer |
| Izgara | “Instagram’da Bizi Takip Edin” başlığı + çok satırlı ızgara ve Daha Fazla Göster düğmesi, profil istatistikleri yok | Izgara | Özel Instagram sayfaları, altbilgi sosyal bölümleri, görsel portföyler — içerik, hesaptan daha önemli olduğunda |
| Küçük Widget | Merkezi kompakt başlık (avatar, ad, istatistikler, Takip Et düğmesi) + ok yönlendirmeli 2×2 ızgara | Kaydırıcı (Kompakt) | Yan menüler, dar içerik sütunları, küçük yerleşimler — profil bağlamını kaybetmeden dar alanlara uyum sağlar. |
| Etiket Vitrini | Etiket Başlığı Başlık Olarak + Kaydırıcı Düzeni, Profil Bilgileri Yok | Kaydırıcı | Kampanya sayfaları, UGC galerileri, etkinlik öne çıkanlar — gönderileri hesap yerine konuya göre gösterir |
| Post Kaydırıcısı | Profil başlığı + tek büyük gönderi ve oklarla gezinme (aynı anda yalnızca bir gönderi görünür) | Kaydırıcı (Tek) | Öne çıkan bölümler, öne çıkan içerik gösterimleri, blog yan çubukları — daha az gönderide yüksek etki için gösterim |
Şablonu web sitesi türünüze göre uyumlandırma
E-ticaret ve Ürün Sayfaları
Hashtag Gösterimi veya Izgarasıyla gidin. Ürün açıklamasının yanında Hashtag kaynaklı bir akış, görsel sosyal kanıt olarak işlev görür — ürünü kullanan gerçek müşteriler, stüdyo çekimleri değil. Emplifi’nin 2025’in üçüncü çeyreğine göre, kullanıcı tarafından oluşturulan içerik içeren sosyal paylaşımlar dönüşüm oranlarını 10× daha yüksek yaptı. Görsel odaklı kalması için Tile gönderi şablonunu kullanın ve ürün sayfalarına doğrudan bağlayacak CTA düğmelerini ayarlayın.
Portföyler ve Yaratıcı Web Siteleri
Profil Widget veya Izgara. Profil Widget sayfanızda mini bir Instagram profili olarak hizmet verir — takipçi sayısı ve Takip Et düğmesiyle ziyaretçilere abone olmaları için bir neden sunar. Başlıksız ızgara sayfalarda özel galeri sayfalarında daha iyi çalışır. Düzgün bir ızgara için görsel oranını 1:1 olarak ayarlayın; moda fotoğrafçılığı gibi dikey ağırlıklı içerikler için Portre (Portrait) modunu kullanın.
Bloglar ve içerik siteleri
Küçük Widget veya Post Kaydırıcısı. Küçük Widget, yazılı içeriği boğmadan bir kenara konumlanır. Post Kaydırıcısı, büyük formatta tek bir gönderiyi öne çıkaran bir kahraman öğe olarak çalışır. Her ikisi de akışı makale ile rekabet etmeyecek kadar kompakt tutar ve makaleye eşlik eder.
Etkinlik ve Kampanya Sayfaları
Hashtag Gösterisi. Kaynağı etkinliğinizin hashtag’ine ayarlayın ve akış, her 48 saatte bir yenilenen katılımcı içeriklerinden oluşan bir duvara dönüşür. Konferanslar, ürün lansmanları ve topluluk girişimleri için etkili — ziyaretçiler pazarlama metni yerine gerçek etkileşimi görürler.
Tam Entegrasyon Rehberi: HTML Web Sitesinde Instagram Akışınızı Kurma
Artık sayfanız için hangi düzenin uyduğunu bildiğinize göre gerçek widget’ı oluşturalım. Düzenleyici sizi sırasıyla her sekmede adım adım yönlendirir — kaynaklar, düzen, gönderi görüntüleme, stil ve ayarlar.
Adım 1: Şablon Seçin
Açın Instagram Besleme Editörü, ve bir şablon seçim ekranı göreceksiniz. Şablonlar başlangıç noktalarıdır — tasarımı, üstbilgi stilini ve gönderi görüntüleme ayarlarını önceden yapılandırır, böylece sıfırdan başlamıyorsunuz.
Yukarıda belirtildiği gibi beş ana seçenek mevcut. İstediğinize en yakın şablonu seçin; sonrasında tüm ayarları değiştirebileceksiniz.
Adım 2: Instagram kaynağınızı ekleyin
Bir şablon seçiminin ardından Kaynaklar sekmesine yönlendirileceksiniz. Burada widget’a hangi Instagram içeriğini görüntüleyeceğini söylersiniz.
Seçebileceğiniz iki kaynak türü var:
- Hesap — kamuya açık bir Instagram kullanıcı adı veya URL girin. Akış bu hesabın gönderilerini gösterecek. Profilin açık olması gerekir — özel, yaş kısıtlı veya ülke kısıtlı hesaplar çalışmaz.
- Etiket — görüntülemek için bir etiket girin; etiketli gönderileri gösterir. Markalı kampanyalar veya kullanıcı tarafından oluşturulan içerik koleksiyonları için faydalı.
Aynı sekme altında belirli gönderileri göstermek için filtreler ayarlayabilir, maksimum sayısını belirleyebilir ve onları yayın tarihine veya kaynak listesi konumuna göre sıralayabilirsiniz.
Adım 3: Düzeni seçin
Sayfada gönderilerin nasıl düzenleneceğini yapılandırmak için Düzen sekmesine geçin. Ekranda iki düzen seçeneği göreceksiniz – Izgara ve Slayt – ayrıca sütunlar, satırlar, başlık ve akış başlığı için ayarlar.
Yukarıdaki yerleşim bölümünde verilen önerileri uygladıysanız, bunları burada hayata geçiriyorsunuz. İşinize yarayacak birkaç pratik not:
- Sütunlar ve Satırlar Otomatik (duyarlı, ekran boyutuna uyum sağlar) veya Manuel (tam sayıları siz belirlersiniz). Manuel daha hassaslık sağlar, ancak Otomatik mobil uyumu ekstra iş olmadan sağlar.
- Başlık profil avatarı, ad, biyografi, takipçi sayısı ve takip düğmesinin akışın üstünde görünmesini sağlar. Bağımsız Instagram bölümleri için açık konuma getirin; akış başka içeriklerin içinde gömülü olduğunda kapatın.
- The Kaydırıcı Ayarları bölümü (Kaydırıcı seçildiğinde görünür), gezinme okları, sayfalama ve otomatik dönme hızını yapılandırmanıza olanak tanır.
Bu adım en uzun süren kısım — farklı genişliklerde sütun sayılarıyla deney yapmak için bir dakika ayırın. 1200px genişlikte iyi görünen bir şey, 768px’de sıkışık hissedebilir; Auto modu bu farkı beklediğinizden daha iyi yönetir.
Adım 4: Gönderi Görüntüsünü Yapılandırın
Gönderi sekmesi ziyaretçilere her gönderi küçük resminde ne göreceğini ve tıklayınca ne olacağını belirler. Seçebileceğiniz iki görüntüleme stilinden biri: Klasik (tarih, açıklama, beğeniler vb. gösterilir) ve Karo (yalnızca fotoğraf gösterimi, fareyle üzerine gelindiğinde açılan katman).
Altında Gönderi Öğeleri, küçük resim üzerindeki hangi ayrıntıların görüneceğini açıp kapatın:
- Beğeni Sayısı — fare üzerinde iken etkileşim sayılarını gösterir
- Yorum Sayısı — Yorumlar için de aynı.
- <strong>Metin</strong> — küçük resimde başlık önizlemesini gösterir
Popup ayarlarıyla da aynı işlemi yapabilirsiniz: belirli öğeleri (kullanıcı adı, takip düğmesi, beğeni sayısı, yorumlar ve daha fazlasını) gösterip gizlemek için.
Tıklama Sonrası İşlem
Bu açılır menü, ziyaretçinin bir gönderiye tıkladığında ne olacağını belirler. “Açık Pencere” varsayılan — sayfayı terk etmeden tam boyutlu bir görüntü/video ile başlık, beğeniler, tarih ve CTA düğmeleri gösterir.
Eylem Çağrısı
CTA Düğmeleri bölümü, ürün sayfalarına, Çevrimiçi Randevu Formlarına veya herhangi bir URL’ye bağlanan özel düğmeler eklemenize olanak tanır — bunlar açılır pencere içinde gönderi içeriğiyle birlikte görünür.
Adım 5: Akış stilini özelleştirin
The Stil sekmesi, feed’inizi sitenizin görsel kimliğine göre uyumlandırdığınız yerdir. Tek tip renk şeması yerine, widget her öğe için renk kontrolü sunar.
Başlangıç olarak Renk Şeması açılır menüsünden başlayın — bu, hover katmanı, açılır pencere ve gezinme öğeleri üzerinde önceden tanımlanmış bir palet uygular. Varsayılan şemalar markanızla uyuşmuyorsa, her bölümü genişleterek renkleri bireysel olarak ayarlayın:
- Başlık — arka plan, metin, Takip Et düğmesi, Takip Et düğmesi metni
- Gönderi — örtüşen arka planı ve örtüşen metin renkleri
- Oklar / Daha Fazla — gezinme düğmesi ve metin renkleri
- Popup — çoklu, her biri ayrı ayrı özelleştirilebilir öğeler
Tüm renk alanları HEX girişi destekler, böylece tam marka değerlerini yapıştırabilirsiniz. Dahili kontrollerin sunduğundan daha fazlasını stillendirmek isterseniz — özel yazı tipi boyutları, gönderi küçük resimlerinin köşe yarıçapı veya boşluk ayarları — bu sekmenin altında bulunan Özel CSS düzenleyicisi bunu sağlar.
Adım 6: Ayarları düzenleyin
Ayarlar sekmesi iki şeyi kapsar: dil ve özel JavaScript.
Dil
The Custom JS alanı gelişmiş entegrasyonlar için — olay izleme, koşullu davranışlar veya akışı sayfanızdaki diğer scriptlerle bağlama. Çoğu kurulum için buna dokunmanıza gerek yok.
Adım 7: Widget’i HTML sitenize ekleyin
Yapılacak tek şey, kopyaladığınız parçayı kod düzenleyicinize (VS Code, Sublime Text, Notepad++, veya barındırma dosya yöneticiniz) yapıştırmaktır:
- Görünmesini istediğiniz sayfanın HTML dosyasını açın.
- HTML’nin <body> bölümünde akışın görüntüleneceği yeri bulun.
- Tam kurulum kodunu oraya yapıştırın. Dosyayı kaydedin ve sunucunuza yükleyin.
Statik widget’lar için (sayfa içeriğine gömülü bir ızgara veya kaydırıcı), akışın görünmesini istediğiniz konuma tam olarak kodu yapıştırın.
Kayan widget’lar için, kodu </body> etiketinin kapanışından hemen önce yapıştırın — widget kaydırmaya bakmaksızın ekranda yüzer.
Sorun Giderme: Hızlı Kontrol
- Feed görünmüyor: Kodun <body> etiketleri içine yerleştirildiğinden emin olun; <head>, <style> veya <script> etiketlerinin içine yerleştirmeyin.
- “No posts found” error: The Instagram account may be private, or the username may be misspelled. Double-check the source in the widget editor.
- Yerel olarak yüklenir ancak canlı sunucuda çalışmaz: Bazı widget’lar aktif bir internet bağlantısına ihtiyaç duyar. file:// protokolüyle test etmek çalışmayabilir — dosyanızı barındıran sunucuya yükleyin veya yerel bir sunucu kullanın.
- Yeni gönderiler görünmüyor mu: Akış içerikleri önbelleğe alınır ve her 48 saatte bir otomatik olarak güncellenir. 48 saat sonra hâlâ görünmüyorsa Elfsight destek ile iletişime geçin.
HTML’e Instagram İçeriğini Gömmenin Başka Yöntemleri
Widget yaklaşımı en geniş ihtiyaç yelpazesini karşılar, ancak tek seçenek bu değildir. Gereksinimlerinize bağlı olarak dikkate alabileceğiniz iki alternatif aşağıda.
Seçenek 1: Instagram Yerel Gömme (Tekli Gönderi)
Instagram’ın yerleşik gömme özelliği, herhangi bir kamu gönderisi veya Reels için HTML snippet’ini kopyalamanıza ve doğrudan sitenize yapıştırmanıza olanak tanır. Üçüncü taraf araçlara gerek yok, hesap oluşturmanıza gerek yok — sadece Instagram’da üç tıklama ve HTML dosyanıza bir yapıştırma.
- Instagram’ı masaüstü tarayıcınızda açın ve gömmek istediğiniz herkese açık gönderiye gidin.
- Gönderinin sağ üst köşesindeki üç noktaya (⋯) tıklayın ve Göm öğesini seçin.
- Açılır pencerede, Gömme Kodunu Kopyala düğmesine tıklayın.
- HTML dosyanızı açın ve gönderinin görünmesini istediğiniz yere, <body> bölümünün içinde kodu yapıştırın.
- Dosyayı kaydedin ve sunucunuza yükleyin.
Seçenek 2: Instagram oEmbed API
Geliştiriciler için programatik kontrol gerektiğinde, Instagram’ın oEmbed API uç noktası herhangi bir kamu gönderi URL’si için gömülü HTML’yi döndürür. Gönderi URL’si ve bir erişim belirteciyle GET isteği gönderirsiniz; API, <code>html</code> özelliğinde yer alan gömülebilir HTML’yi içeren bir JSON nesnesiyle yanıtlar.
- Bir Meta Geliştirici Hesabı kurun ve bir Meta uygulaması oluşturarak erişim belirteci alın.
- Bir GET isteği gönderin
https://graph.facebook.com/v19.0/instagram_oembed?url={POST_URL}&access_token={TOKEN} - JSON yanıtından HTML özelliğini ayıklayın ve sayfanıza ekleyin.
- Yanıtı önbelleğe alın — API’nin kullanıcı başına saatte 200 çağlık bir hız sınırı vardır, bu yüzden her sayfa görüntülemesinde çağırmayın.
Bu yöntem, çok sayfalı dinamik içerik akışı gerektiğinde veya Instagram içeriğini mevcut bir uygulamaya entegre etmek istediğinizde anlamlıdır. Bu rotayı inceliyorsanız, Instagram Graph API geliştirici rehberi kurulumun tamamını kapsar; token yönetimi ve hız sınırları dahil.
Instagram içeriğinin ötesine mi bakıyorsunuz?
Birden çok sosyal platformda faal olan markanız varsa, yalnızca bir Instagram akışı sınırlı hissedebilir. Ayrı Instagram, TikTok ve Facebook gömülü içeriklerini bir araya getirmek yerine, bir Sosyal Akış bileşeni her şeyi tek bir birleşik içerik merkezine toplar — sayfalarınızı temiz tutar ve çapraz platform sosyal kanıtını tek bir yerde sergiler.
Instagram Widget’iniz İçin Optimizasyon İpuçları
Akışı kurdunuz — şimdi daha fazlasını elde etmek için çalıştıralım. Bu ipuçları temelin ötesine geçer ve Instagram’da zaten ürettiğiniz içerikten daha çok değer elde etmeye odaklanır.
- Ziyaretçilere ne gösterileceğini seçin. Kaynaklar sekmesi Göster/Gizle filtrelerini içerir — belirli bir hashtag veya anahtar kelime içeren gönderilere akışı daraltabilir veya sayfa bağlamına uymayan gönderileri hariç tutabilirsiniz.
- Harekete geçirici çağrı (CTA) kurun. Her gönderi açılır penceresinde özel CTA düğmeleri eklenebilir; bunlar ürün sayfalarına, rezervasyon formlarına veya açılış sayfalarına yönlendirebilir. Bu, pasif gezinmeyi aktif yönlendirmeye ve dönüştürme yoluna dönüştürür.
- Gösterilecek gönderileri sınırla. Fazlası her zaman daha iyi değildir. Sıkı ve taze bir ızgara, geniş bir arşivden daha niyetli görünür — akışı en az 6 veya 9 en son gönderiyle sınırlayın.
- Mobil görünümü test edin. Manuel sütun ayarları kullanıyorsanız, mobil değeri bağımsız olarak yapılandırın — masaüstünde dört sütun olarak çalışan bir düzen, mobilde genellikle iki sütuna düşer.
- Instagram profilinizi herkese açık tutun ve doğrulanmış hesap durumuna getirin. Widget yalnızca herkese açık profillerden içerik çeker. Hesabınız özel olarak ayarlanmışsa, yeni paylaşımlar akışta görünmez; hesap tekrar herkese açık olduğunda ve önbellek yenilendiğinde görünür.
Sık Sorulan Sorular
Özel HTML sitesine Instagram akışı nasıl gömülür?
Instagram akışımı HTML’e ücretsiz olarak gömebilir miyim?
HTML sayfamda gömülü Instagram beslemesi otomatik olarak güncellenir mi?
Instagram HTML Gömme Mobil Cihazlarda Çalışır mı?
Instagram Reels ve videoları HTML gömülü olarak gösterebilir miyim?
Sonuç
Artık HTML sitenizde çalışan bir Instagram akışı var — düzeninize uygun şekilde yapılandırılmış, markanıza göre stil verilmiş ve manuel müdahale olmadan her 48 saatte bir kendini güncelleyecek şekilde ayarlanmıştır. Kodsuz widget yaklaşımını mı seçtiniz yoksa başka bir yöntemi mi, bu akış görsel içerik ve sosyal kanıt katmanı ekler; statik görseller bunu gerçekten taklit edemez.
Henüz başlamadıysanız, Elfsight Instagram Feed widgeti sayfasına gidin, bir şablon seçin, hesabınızı bağlayın ve HTML’inize kodu yapıştırın. Ücretsiz plan size dakikalar içinde çalışan bir akış sağlar — oradan yerleşimi, renkleri ve filtreleri kendi zevkinize göre özelleştirin.
