Web sitenize Instagram gönderileri eklemeyi denediyseniz, muhtemelen aynı duvara çarptınız: Instagram’ın yerleşik gömme özelliği tek bir gönderi, tek bir kod kesiti ve otomatik güncelleme yok. Daha iyi bir yol var. Web sitenize yeni fotoğraflar, Reels ve karuselleri otomatik olarak çeken bir Instagram akışı gömebilirsiniz — her paylaşımda manuel değiştirme gerekmez.
Bu rehber, Elfsight Instagram Feed widget kullanarak tam kurulumu adım adım gösterir — WordPress, Wix, Shopify, Squarespace ve özel HTML kabul eden herhangi bir platformda kod yazmadan çalışan bir seçenek. Ayrıca Instagram’ın yerel gömme ve API yaklaşımını da ele alıyoruz, böylece kurulumunuza uygun yöntemi seçebilirsiniz.
- 4 adımlı bir iş akışı ile Instagram akışınızı dakikalar içinde canlıya alın
- Profil akışları, hashtag akışları ve tek gönderi gömme arasından nasıl seçim yapılır
- Düzen, stil ve kaynak yapılandırmasının ayrıntılı kılavuzu
- Manuel iframe yaklaşımı da dahil olmak üzere alternatif yöntemler
- Performans, filtreleme ve mobil görüntüleme için optimizasyon ipuçları
Hızlı Başlangıç: Web Sitenize Instagram Akışını Göm
Ne istediğinizi zaten biliyorsanız, boş sayfadan çalışan bir akışa giden kısa yol şu:
- Açın Instagram Akışı Editörü ve bir şablon seçin.
- Instagram kullanıcı adınızı veya hashtag’inizi Kaynaklar alanına girin.
- Click “Web Sitesine Ekle” düğmesine tıklayarak gömme kodunu alın.
- Kodu Özel HTML bloğuna yapıştırın ve yayımlayın.
Aşağıdaki etkileşimli düzenleyicide Instagram akışınız için widget’ınızı oluşturun ↓
Web Sitenize Instagram Akışını Gömme: Seçenekleriniz
Bunu yapmak için gerçekten yalnızca üç yol var ve hepsi eşit derecede pratik değil. Mevcut yöntemlerin samimi karşılaştırması:
| Yöntem | Zorluk | Özelleştirme | Otomatik Güncellemeler | Maliyet |
|---|---|---|---|---|
| Elfsight Instagram Akışı | Kod yok | Yüksek (düzenler, renkler, açılır pencereler, filtreler, CTA düğmeleri) | Evet (her 48 saatte bir) | Ücretsiz plan veya ayda 5$’dan başlayan ücretli planlar |
| Instagram yerel gömme (oEmbed) | Düşük (gönderi başına kopyala-yapıştır) | Minimal (Instagram’ın varsayılan kart stili) | Hayır (gönderi başına sabit) | Ücretsiz |
| API yaklaşımı | Yüksek | Tam (her şeyi siz yaparsınız) | Evet (kodlayabilirseniz) | Geliştirme Süresi |
Özet: Kodsuz, sürekli güncellenen ve biçimlendirilmiş bir akışı eklemenin en hızlı yolu Elfsight’tır. Yerel gömüler birkaç statik gönderi için çalışır ancak ölçeklenmez; API ise tam kontrol sağlar – kurulum ve sürekli değişiklikler için bir geliştirici gerekir.
Instagram Gömme Türleri: Akış, Duvar, Reels ve Hashtagler
Ziyaretçilere ne göstermek istediğinize bağlı olarak doğru gömme türü değişir. Çoğu kişi varsayılan olarak “tüm akışımı göster” seçeneğini kullanır; bu her zaman en iyi hareket değildir. Her türün gerçek işlevi şu şekildedir:
| Gömme Türü | Görüntüledikleri | En Uygun Olduğu Alanlar |
|---|---|---|
| Profil Akışı | Herkese açık bir Instagram hesabından en son gönderiler | Marka sayfaları, portföy siteleri, “Bizi takip edin” bölümleri |
| Hashtag akışı | Belirli bir hashtag ile etiketlenen gönderiler | UGC kampanyaları, etkinlik kapsama, topluluk içeriği |
| Instagram Duvarı | Bir veya daha fazla kaynaktan veri çeken ızgara düzeni | Özel sosyal kanıt sayfaları, görsel galeriler |
| Reels | Hesabınızdaki Video Reels | Ürün demoları, öğreticiler, kamera arkası içerikler |
| Tek gönderi | Tek bir Instagram gönderisi | Blog yazıları, referanslar, öne çıkan içerikler |
Dikkat Edilmesi Gereken Bazı Noktalar
- Profil akışları require the Instagram account to be public. Private, age-restricted, or country-restricted profiles won’t display content.
- Hashtag akışları belirttiğiniz hashtag ile etiketli gönderileri çeker, ancak Instagram, hashtag kaynaklı gönderiler için kullanıcı adlarını sağlamaz; bu yüzden belirli hesaplara göre bir hashtag akışını filtreleyemezsiniz.
- Reels düzen akışında, düzenli gönderilerle birlikte görünür ve fotoğraflarla aynı en-boy oranında gösterilir (kare ya da yatay). Dikey görünüm için özel CSS gerekir.
- Instagram Hikayeleri üçüncü taraf gömme aracıyla, Elfsight dahil, desteklenmez. Sadece gönderiler, Reels ve karusel içerikler gömülebilir.
Instagram’ı diğer sosyal platformlardan içeriklerle tek bir akışta birleştirmek istiyorsanız, web sitenize bir sosyal medya duvarı nasıl eklenir bakın: Web sitenize bir sosyal medya duvarı ekleyin.
İzlemeyi mi tercih ediyorsunuz? Kurulum sürecine hızlı bir video özeti aşağıda:
Adım Adım: Instagram Akış Widget’ını Kurma
Gömme türü düzenlendiğinde, işte pratik ipuçlarıyla kapsamlı bir rehber. Her adım, Elfsight düzenleyicisindeki bir sekmeye karşılık gelir — ne yaptığı, neyi değiştireceğin ve neyi dokunmaman gerektiği.
Adım 1: Düzenleyiciyi açın ve bir şablon seçin
Düzenleyici, tercihinize göre birkaç başlangıç noktasını gösteren bir şablon galerisiyle açılır: Profil Vitrini, Izgara, Hashtag Vitrini, Gönderi Kaydırıcısı, vb.
Her şablon, düzen, gönderi stili ve renk şemasının önceden yapılandırılmış bir kombinasyonudur. Birini seçtikten sonra her şeyi özelleştirebilirsiniz, bu yüzden hedeflediğiniz görünüme en yakın olanı seçin.
Adım 2: Instagram Kaynağınızı Bağlayın
Sol kenar çubuğundaki Kaynaklar sekmesine tıklayın. İki kaynak türü seçeneğiyle Instagram Kaynağı Ekle panelini göreceksiniz:
- Hesap — herkese açık bir Instagram kullanıcı adı veya profil URL’si girin
- Hashtag — bu etiketle işaretlenmiş tüm kamuya açık gönderileri çekin
Bir widget’a en çok 5 kaynak ekleyebilir, hesapları ve hashtagleri karıştırabilirsiniz. Web sitenizde markanızın hesabıyla birlikte bir Instagram hashtag akışı istiyorsanız, ikisini de aynı widget içinde ayrı kaynaklar olarak ekleyin.
Adım 3: Düzeni seçin
Sonra Düzen sekmesine geçin. Widget iki ana düzen tipi sunar:
- Kaydırıcı — oklar veya kaydırma hareketleriyle gezinen yatay gönderi şeridi
- Izgara — geleneksel bir gönderi ızgarası ve “Daha Fazla Göster” düğmesi
Düzen seçiminin altında ek yapılandırma panelleri bulunur:
- Sütunlar & Satırlar – Otomatik veya Manuel modu seçerek sütun/satır sayısını, aralığı ve genişliği ayarlayın
- Üstbilgi – profil başlığını yapılandırın (avatar, hesap adı, biyografi, takipçi sayısı, Takip Et düğmesi)
- Kaydırıcı Ayarları – oklar, sayfalama, otomatik oynatma ve kaydırma davranışını ayarlayın
- Akış Başlığı – akışın üstüne isteğe bağlı özel bir başlık ekleyin
Instagram duvarını web sitenize eklemek istiyorsanız, 3–4 sütunlu ve birden çok satır içeren Izgara düzeni klasik duvar görünümünü yaratır.
Adım 4: Gönderi Görünümünü Özelleştirin
İleti sekmesi, akış içindeki bireysel gönderilerin görünümünü belirler. Burada iki ana ayar vardır:
İleti Stili
Kullanılabilir gönderi şablonları arasında oklar ile geçiş yapın:
- Tile — clean, photo-only display with no visible details. Hovering reveals an overlay with likes, comments, and a caption.
- Klasik — kullanıcı adı, tarih, açıklama, etkileşim sayıları ve paylaşım düğmesi ile özgün Instagram gönderi düzenini yansıtır.
Görüntü Oranı varsayılan olarak 1:1 (Klasik kare) olup, gerekirse 4:5 (Portre) olarak değiştirebilirsiniz.
Gönderi Öğeleri
Her gönderi kartında hangi ayrıntıların görüneceğini tek tek ayarlayın:
- Kullanıcı
- Tarih
- Instagram Bağlantısı
- Beğeni Sayısı
- Yorum Sayısı
- Paylaş
- Metin (Açıklama)
Gönderi tıklama sonrası eylemi de yapılandırılabilir: medyanız bir açılır pencerede, Instagram’da açılabilir veya isterseniz hiç açılmaz.
Adım 5: Renk paletinizi ve stilinizi ayarlayın
Stil sekmesi, widget’in görsel kimliğini kontrol etmenizi sağlar. Öncelikle Renk Şeması açılır menüsünden başlayın; 10 önayar ve Özel seçeneği sunar.
Seçmek Özel, öğeye özel renk kontrollerinin Öğeleri Özelleştir altında açılmasını sağlar:
- Başlık — arka plan, metin, Takip Et düğmesi, Takip Et düğmesi metni
- Gönderi — örtüşen arka plan, üst yazı
- Oklar — düğme ve metin renkleri
- Açılır Pencere — açılır öğeler için ayrı renk ayarları
- Özel CSS — yerleşik seçeneklerin ötesinde gelişmiş stil için bir düzenleyici
Web siteniz belirli bir marka paleti kullanıyorsa, Özel seçenek akışı tam olarak eşleşmenizi sağlar. Çoğu site için bir önayar seçip bir veya iki rengi değiştirmeniz işinizi yüzde 90’a getirir — bu adımı fazla düşünmeyin.
Adım 6: Dil ve gelişmiş ayarları yapılandırın
Ayarlar sekmesi iki alanı kapsar:
- Dil — widget arayüz öğelerinin görüntülenen dilini seçin
- Özel JS — Etkinlik izleme veya gelişmiş entegrasyonlar için JavaScript eklemek amacıyla bir kod alanı
Çoğu kurulum için, web siteniz İngilizce olmayan bir kitleye hizmet veriyorsa yalnızca dili değiştirmeniz gerekir. Google Analytics veya diğer araçlarla belirli etkileşimleri izlemek isteyen kullanıcılar için Özelleştirilmiş JS (Custom JS) seçeneği vardır.
Adım 7: Gömme kodunu alın ve kurun
Önizlemeden memnun kaldığınızda, düzenleyicinin altında yeşil “Ücretsiz Web Sitenize Ekle” düğmesine tıklayın ya da Elfsight kontrol panelinizden “Yayımla” seçeneğini kullanın; kurulum kodunuzu gösterecek — kısa bir HTML parçacığı.
Kodu kopyalayın ve sitenize yapıştırın. Tam konum, platformunuza bağlıdır: gömme aşağıdaki platformlar tarafından desteklenir: WordPress, Wix, Squarespace, Shopify, Webflow, Elementor, HTML siteleri ve diğer CMS kurulumları.
Hızlı Sorun Giderme Kontrolü
- Feed not appearing: Kodu Özel HTML veya Kod bloğunda olduğundan emin olun; standart metin bloğunda değil. Kurulumdan sonra önbellek eklentilerini temizleyin.
- Boş besleme veya yanlış gönderiler: Instagram hesabı kamuya açık olmalıdır. Özel, yaş kısıtlı veya ülke kısıtlı profiller, Hesap/Hashtag bağlantısı üzerinden yüklenmez.
- Yeni gönderiler eksik: İçerik her 48 saatte bir yenilenir. Bu süreden sonra hâlâ gönderi yoksa, kaynak URL’yi doğrulayın ve hesabın özel olmadığından emin olun.
- Mobil görünüm sorunları: Manuel sütun/satır ayarları kullanıyorsanız, mobil için özel değerleri Düzen sekmesinde ayrı olarak yapılandırın — Manuel modda araç, masaüstü ayarlarını mobil ile otomatik olarak senkronize etmez.
Web Sitenize Instagram Akışı Eklemenin Diğer Yöntemleri
Elfsight aracı tek yol değil. Instagram akışını diğer yöntemlerle kurmanın adımlarını ve sınırlamaları bu rehberde bulabilirsiniz.
Yöntem 1: Instagram’ın Yerel oEmbed Özelliği (Tek Gönderi Gömme)
Instagram, bireysel gönderiler için yerleşik bir gömme özelliği sunar. Bu, sayfanızda tek bir gönderi kartı — fotoğraf, açıklama, beğeniler ve orijinaline bağlantı ile.
- Gömmek istediğiniz Instagram gönderisini instagram.com üzerinden açın (masaüstü).
- Gönderideki üç noktali menü simgesine (⋯) tıklayın ve Göm seçeneğini seçin.
- Sağlanan gömme kodunu kopyalayın.
- Kodu web sitenizdeki Özel HTML bloğuna yapıştırın ve yayınlayın.
Yöntem 2: Web Sitesi için Instagram Akışı — Instagram API ile
Tam kontrol isteyen geliştiriciler için, Instagram API’si ile gönderi verisini programlı olarak çekebilir ve özel HTML, CSS ve JavaScript ile görüntüleyebilirsiniz.
- Instagram hesabınızı İş Hesabı veya İçerik Oluşturucu hesabına geçiş yapın (zaten değilseniz).
- Bir Meta Geliştirici Uygulaması oluşturun ve Instagram Graph API ürününü ekleyin.
- Facebook Sayfasını Instagram hesabınıza bağlayın ve OAuth izinlerini yapılandırın.
- Yetkilendirme akışıyla uzun ömürlü bir erişim belirteci oluşturun.
- Graph API uç noktalarını kullanarak medyayı çekin ve görüntülemek için bir frontend oluşturun.
Instagram Akışınız için Optimizasyon İpuçları
Akışınız canlıyken, varsayılanlarda kalmayın. İlk kurulumdan sonra hemen değiştirmek isteyebileceğiniz noktalar bunlar, en iyi sonuç için.
- İçeriği filtreleyerek derleyin. Kaynaklar sekmesinde, “Show Posts Containing” ve “Hide Posts Containing” filtrelerini kullanarak gönderileri etiket, kullanıcı adı veya URL’e göre dahil edin ya da hariç tutun; sayfaya uyanları sadece gösterin (ör. ürünler veya referanslar).
- Yükleme süresini kontrol etmek için gönderileri sınırla. “Toplam Gönderi Sayısı” ayarı, kaç gönderinin yükleneceğini sınırlandırır. Akışınız yoğun trafiğe sahip bir açılış sayfasında ise 20+ yerine 6–9 gönderiyi göstermek yüklemeyi hızlı tutar ve taze içerik sağlar.
- Kullanıcıların zaten kaydırdığı yere yerleştirin. Instagram akışları, ürün sayfalarında, özel “sosyal kanıt” bölümlerinde veya altbilgide en iyi performansı gösterir — CTA’nızla rekabet ettiği üst alanda olmamalı.
- Görsel akışlar için Tile düzenini kullanın. Instagram’ınız çoğunlukla ürün fotoğrafları veya yaşam tarzı görselleri içeriyorsa, Tile şablonu altyazıları ve meta verileri kaldırır; görseller kendini anlatır.
- Mobil sütunlarını optimize et — Düzenler sekmesinde Manuel’e geçin ve mobil için 1–2 sütun ayarlayın; masaüstünde 3–4 sütun çalıştırıyor olsanız bile görüntüler telefon ekranlarında dokunulabilir küçüklüğe düşmesin.
- Popup’ta CTA’lar ekleyin. Ziyaretçiler bir gönderiye tıkladığında açılan açılır pencerede özel CTA düğmeleri onları ürün sayfasına, kayıt formuna veya rezervasyon bağlantısına yönlendirebilir. Bu, pasif gezintiyi dönüşüm yoluna çevirir.
Gerçek Ekipler Instagram Akışını Kullanıyor
Andrew Chin, Squarespace üzerinde kurulu olan Gigi Beauty PMU adlı kalıcı makyaj stüdyosu web sitesini yöneten kişi, ana sayfaya Elfsight Instagram Feed aracını ekledi ve stüdyonun Instagram hesabından doğrudan müşteri sonuçlarını göstermek için — önce/sonra fotoğrafları, prosedür videoları ve mutlu müşterilerin anları — gösterdi.
“Elfsight bana istediğim yaratıcı özgürlüğü verdi; önce karşılaştığım teknik sıkıntılardan kurtuldum. Ve en güzel yanı — geliştiriciye ihtiyaç yok.”
İçerik akışı, bir fotoğraf galerisi, YouTube videoları ve değerlendirme araçlarıyla yan yana konumlanır; görsel kanıt bölümü oluşturarak potansiyel müşterilerin siteyi terk etmeden çalışmayı değerlendirmesini sağlar ve rezervasyon yapmaya güven duymalarını kolaylaştırır.
Andrew’ın yaklaşımı, hizmet odaklı işletmeler için yaygın bir kalıbı gösterir: IG akışını, yeni müşteri fotoğrafları Instagram’a yüklenirken kendini güncelleyen canlı bir portföy olarak kullanmak.
Sık Sorulan Sorular
Web sitenize ücretsiz olarak Instagram akışı gömme yapabilir miyim?
Gömülü Instagram akışı yeni gönderilerle otomatik olarak güncellenir mi?
Instagram Reels’ı web sitenizde düzenli paylaşımlarla birlikte gömebilir miyim?
Instagram akışı widget’ı web sitenizi yavaşlatır mı?
Instagram akışı mobil cihazlarda çalışır mı?
Sonuç
Web sitenize Instagram akışını gömmek için eksiksiz bir adım-adım rehbere sahipsiniz: doğru gömme türünü seçmekten kaynakları ve düzenleri yapılandırmaya, kodu herhangi bir platforma kurmaya kadar. Widget aracı kullanıyor olun, Instagram’ın yerel gömme özelliğini seçiyor olun veya özel bir API kurulumuyla ilerleyin; yukarıdaki kurulum adımları her yolu kapsar.
Kod yazmadan yaklaşımıyla başlamak için, Elfsight Instagram Feed widget sayfasına gidin, bir şablon seçin, hesabınızı bağlayın ve sitenize kodu yapıştırın. Ücretsiz plan, dakikalar içinde çalışan bir akış sunar — oradan özelleştirin ve kendi markanıza göre kişiselleştirin.
