Bir Weebly sitesi yönetiyorsanız, sitenizin yalnızca statik sayfalardan oluşan bir küme gibi hissettirilmesini istemezsiniz. Elfsight’ta, web sitenize daha fazla canlılık katmanın en kolay yollarından birinin sosyal hesaplarınızı dahil etmek olduğunun farkındayız. Taze gönderileri ve görselleri göstermek, ziyaretçilerin sitede daha uzun süre kalmasını sağlar ve markanızın ne yaptığını net bir şekilde gösterir.
Instagram Akış Widget’ı zor kısmı halleder. Gönderilerinizi otomatik olarak çeker, görünümü tasarımınıza uyacak şekilde ayarlamanıza olanak tanır ve kodla uğraşmanızı engeller. Bu kılavuzda, Instagram ekleme sürecini adım adım inceleyeceğiz.
- Kod yazmadan Weebly’de Instagram Beslemesini Gömme için Adım Adım Kılavuz
- Web sitenizin tasarımına uyum sağlaması için düzeni, renkleri ve gönderi filtrelerini ayarlama yolları
- Üçüncü taraf widget kullanmanın artıları ve eksileri ile yerel alternatiflerle karşılaştırma
- Widget’inizin sorunsuz çalışmasına yardımcı sorun giderme önerileri ve faydalı ipuçları
Weebly’ye Instagram’ı Hızla Ekleme
İşte Weebly’e Instagram gönderilerini eklemek için iki dakikalık bir kısayol:
- Elfsight’in düzenleyiciisini açın ve bir şablon seçin.
- Instagram Besleme Widget’ınızı Özelleştirin.
- Tıkla “Web Sitenize Ücretsiz Ekle” ve kodu kopyala.
- Weebly sitenizin yönetim paneline yapıştırın.
Ücretsiz düzenleyicide kendi Instagram Besin Akışı Widget’ınızı Oluşturun!
Fark Yaratan Özellikler
Çalışma mantığını anladınız. Şimdi bu widget’ı öne çıkaran özelliklere bakalım: esnek düzenlerden otomatik güncellemelere kadar, akışınız sorunsuz ve güncel kalır.
| Ana Özellik | Neden Önemli? |
|---|---|
| Hesaplardan, etiketlerden veya konumlardan içerik gösterimi | İstediğiniz Instagram gönderilerini tam olarak gösterin; ziyaretçileriniz her zaman en alakalı ve ilham verici içeriği görsün. |
| 50’den Fazla Özelleştirme Seçeneği: ızgara, kaydırıcı ve galeri düzenleriyle | Instagram akışınızı sitenizin stiline kolayca uyum sağlayacak şekilde eşleştirin ve sorunsuz, profesyonel bir görünüm elde edin. |
| Sınırsız CTA Düğmeleriyle Alışveriş Akışları | Her gönderiyi, resimleri ürün veya hizmet sayfalarınıza doğrudan bağlayarak bir fırsata çevirin. |
| Otomatik gerçek zamanlı içerik güncellemeleri | Web sitenizi en yeni Instagram gönderileriyle tazeleyin—manuel güncelleme yok. |
| Etkileşimli açılır pencereler, takip ve paylaşım simgeleri | Ziyaretçi etkileşimini siteniz üzerinden keşfetmeye, takip etmeye ve paylaşmaya davet eden özelliklerle artırın. |
Bunlar, markanızın en yeni paylaşımlarını sergilemenize ve ziyaretçileri harekete geçirmeye yardımcı olacak Instagram Feed Widget’in bazı kullanışlı özellikleridir. Tam liste için Özellikler Sayfası‘nı inceleyin. Ana özellikler kapsandığında, her entegrasyon adımını adım adım açıklama zamanı.
Weebly’de Instagram Beslemesini Adım Adım Gömün
Bu bölüm, Weebly üzerinde Instagram akışınızı oluşturma, özelleştirme ve yerleştirme adımlarını ayrıntılarıyla ele alır ve daha iyi kullanım için bazı pratik ipuçları içerir.
1. Bir şablon seçin
Görüntüleyiciyi açtığınızda ilk yapacağınız şey bir şablon seçmektir. Her şablon Instagram Akışınızın başlangıç görünümünü belirler – temiz bir galeri ızgarası, şık bir kaydırıcı veya cesur bir vurgu stili.
İçinde size uygun gelen birini bulduğunuzda “Bu şablonla devam et” yazısına tıklayın.
2. İçerik Kaynağını Ekle
Sonraki adım, widget’in içeriğini nereden çekeceğini belirtmektir. “Kaynak Ekle” düğmesine basın ve Instagram hesabınızı bağlayın ya da bir hashtag akışı oluşturun. Birden çok hesap ve hashtag’i aynı anda ekleyerek farklı içerik türlerini tek bir akışta birleştirebilirsiniz. Filtreler, neyin görüneceğini kontrol etmenizi sağlar; böylece belirli anahtar kelimeler içeren gönderileri gizleyebilir veya içeriği medya türüne göre sınırlayabilirsiniz.
3. Düzeni Ayarla
Bu aşamada gönderilerinizin akışta nasıl düzenleneceğine karar verirsiniz. Düzen sekmesi size birkaç seçenek sunar:
- Izgara: Gönderiler temiz satırlar ve sütunlarda görünür.
- Kaydırıcı: Navigasyonlu bir slayt gösterisi (oklar, kaydırma veya noktalar) ve isteğe bağlı otomatik oynatma.
- Masonry: Gönderiler, görsel boyutlarına göre uyum sağlayan Pinterest tarzı ızgara.
- Vurgu: Bir gönderi merkezde öne çıkar, diğerleri çevresine yerleştirilir.
Ayrıca satır ve sütun sayısını ayarlayabilir, mobil ve masaüstü düzenlerini belirleyebilir ve istersen özel bir akış başlığı ekleyebilirsiniz.
4. Gönderi Görünümünü Özelleştirme
Gönderi sekmesinde, bireysel gönderilerin nasıl görüneceğini siz belirlersiniz. En boy oranını ayarlayabilir, kullanıcı adları ve beğeniler gibi ayrıntıları gösterip göstermeyeceğinize karar verebilir ve bir gönderiye tıkladığında ne olacağını seçebilirsiniz – açılır pencerede açılabilir, Instagram’a bağlanabilir veya sabit kalabilir.
Kullanıcılar kaydırdıkça daha fazla gönderinin otomatik olarak yüklenmesini istetebilir veya yalnızca “Daha Fazla Yükle” düğmesine tıklandığında yüklemesini seçebilirsiniz.
5. Stili Ayarlayın
Bu, akışınızın web sitenizin bir parçasıymış gibi görünmesini sağladığınız yerdir. Stil sekmesi altında, önceden belirlenmiş bir renk şeması (açık, koyu veya özel) seçebilir, düğme şekilleri ve hover efektlerini ayarlayabilir, dolgu ve boşlukları düzenleyebilir ve açılır pencere görüntüleyicisini stillendirebilirsiniz.
Tam kontrol için Özelleştirilmiş CSS seçeneğini kullanın — sıkı marka yönergelerini takip etmeniz gerektiğinde veya gelişmiş tasarım değişiklikleri yapmak istediğinizde ideal.
6. Ayarları Yapılandırın
The Ayarlar sekmesi, ayrıntıları tamamladığınız yerdir. Widget’inizin dilini seçin ve daha hızlı performans için tembel yüklemeyi etkinleştirin.
Widget’iniz için gelişmiş davranış gerekiyorsa, her zaman özel JS veya CSS ekleyebilirsiniz.
7. Kurulum Kodunu Al
When you’re satisfied with the results, click “Web sitesine ücretsiz ekle”. Bu, kişisel kurulum kodunuzu oluşturur.
Kod parçacığınızı kaydetmek için “Kodu Kopyala”ya tıklayın – widget’i sitenize eklemek için buna ihtiyacınız olacak.
8. Weebly üzerinde widget’i gömün
Bu aşamada Besin Akışını sitenize gerçekten ekliyorsunuz. İşte mevcut dört gömme seçeneği:
Seçenek 1: Belirli bir sayfadaki Statik Widget
- Weebly hesabınıza giriş yapın → sitenizi seçin → Siteyi Düzenle düğmesine tıklayın.
- Gömme Kodu öğesini (sol menü) seçili widget konumuna sürükleyin.
- Tıkla Özel HTML’yi Düzenle → Elfsight kodunuzu yapıştırın.
- Widget’inizin sitenizde görünür hale gelmesi için sağ üst köşedeki Yayınla düğmesine tıklayın.
Seçenek 2: Tüm sayfalarda statik widget
- Weebly kontrol paneline gidin → Siteyi Düzenle düğmesine tıklayın.
- Üst çubuktaki Tema sekmesini açın → sol menüden HTML/CSS’i Düzenle seçin.
- Değişiklikleri kaydedin, ardından web sitenizi yayınlayın.
Seçenek 3: Belirli bir sayfada kayan widget
- Weebly’ye giriş yapın → Sitesi Düzenle düğmesine tıklayın.
- Elfsight kod parçacığını kayan widget’inizin istediğiniz konumuna sürükleyip bırakın.
- Tıklayın Özel HTML’yi Düzenle, Elfsight gömü kodunuzu yapıştırın.
- Değişiklikleri uygulamak için siteyi yayınlayın.
Seçenek 4: Tüm sayfalarda kayan widget
- Giriş yap → Siteyi Düzenle.
- Git Tema → seçin ve HTML/CSS’i Düzenle.
- Dosyalar arasından
header.html(veya eşdeğeri) ileno-header.htmldosyalarını seçip açın. - Elfsight kodunuzu kapanış etiketinden hemen önce yapıştırın.
- Düzenlemelerinizi kaydedin → yayınlayın ve kayan widget’in tüm sayfalarda canlı olarak görünmesini sağlayın.
En güzel yanı, düzenleyicide widget’i istediğiniz zaman ayarlayabilir ve yaptığınız değişiklikler Weebly sitenizde otomatik olarak yansır; kodu yeniden eklemenize gerek kalmaz.
Weebly İçin Yerel Gömme Yöntemleri
Weebly sitenize Instagram içeriği eklemenin güvenilir birkaç yerel yöntemi var; ancak her birinin bazı önemli ödünleşimleri bulunur.
Bireysel Gönderileri Göm
Instagram’ın resmi gömme özelliğini kullanarak tek bir gönderi veya videoyu doğrudan ekleyebilirsiniz.
- Instagram gönderisini açın. Eklemek istediğiniz gönderiyi bulun ve üç noktaya tıklayın.
- Göm kodunu kopyalayın. “Göm” seçeneğini seçin ve sağlanan HTML kodunu kopyalayın.
- Weebly sayfanızı düzenleyin. Weebly düzenleyicisini açın ve güncellemek istediğiniz sayfaya gidin.
- Bir gömme blok ekleyin. Gömme Kod ögesini seçili konuma sürükleyin.
- Yapıştır ve Kaydet. Instagram gömme kodunu alanına yapıştırın, ardından değişikliklerinizi yayınlayın.
Gömme için Instagram’ın resmi yönergelerini onun Yardım Merkezi sayfasında bulabilirsiniz.
Weebly’nin Yerel Instagram Akış Uygulaması
Weebly’nin kendi Instagram Akışı entegrasyonu, hesabınızdaki en yeni paylaşımları göstermenize olanak tanır.
- Weebly Uygulama Merkezi’ne gidin. Kontrol panelinizden Uygulama Merkezi’ni açın.
- Instagram Feed uygulamasını ara. Weebly’nin resmi Instagram entegrasyonunu bulun.
- Uygulamayı kurun. Web sitenize ekleyin.
- Hesabınızı Bağlayın. İstendiğinde Instagram kimlik bilgilerinizle giriş yapın.
- Akışı yerleştirin. Instagram Akışı öğesini sayfanın istediğiniz bölümüne sürükleyin.
Daha fazla ayrıntı için Weebly Uygulama Merkezi sayfası‘na bakın.
Özel HTML ile Instagram API’si
Koda hakimseniz, resmi Instagram Graph API’siyle Instagram içeriğini entegre edebilirsiniz.
- Facebook geliştiricisi olarak kaydolun. Facebook Uygulamanızı kurun ve gerekli API izinlerini alın.
- Erişim belirteci oluşturun. Instagram hesabınız için geçerli bir belirteç edin ve doğrulayın.
- JavaScript kodu yazın veya kullanın. API’yi kullanarak gönderileri almak ve görüntülemek için bir betik oluşturun.
- Weebly’ye kod ekleyin. Weebly düzenleyicinizde Gömme Kodu bloğu aracılığıyla betiği ekleyin.
- Yayınla ve test et. Akışın beklendiği gibi yüklenip güncellendiğini kontrol edin.
Daha fazlasını keşfetmek isterseniz, Meta Instagram Graph API sayfasında ayrıntılı belgeler bulabilirsiniz.
Bu yöntemler nasıl karşılaştırılır?
| Yöntem | Ana Avantaj | Başlıca Dezavantaj |
|---|---|---|
| Elfsight | Kullanıcı dostu, özelleştirilebilir, birden çok kaynağı bir araya getirir. | Üçüncü taraf bir widget kullanımı. |
| Instagram Gömme Kodu | Resmi, tek gönderi için çok kolay. | Her seferinde yalnızca tek bir gönderi görüntülenir; akış yok ve otomatik güncellemeler yok. |
| Weebly’nin Yerel Instagram Uygulaması | Kendi Gönderilerinizi Göstermek İçin Basit | Sadece tek hesap desteği sağlar, hashtag veya bahsetme entegrasyonu yok ve özelleştirme olanakları çok sınırlı. |
| Instagram API’si — Özelleştirilmiş HTML ile | Sıfırdan kodlandığında son derece esnek | Geliştirici becerileri, sık güncellemeler ve API değişiklikleri için manuel sorun giderimi gerektirir. |
Kontrol ve bakım arasında karar ver: Yerel uygulama ve gömme kodu hızlıdır ama sınırlandırılmıştır — tek bir hesap ya da tek bir gönderi. API tüm kısıtlamaları kaldırır fakat geliştirici çabası ve bakım maliyeti getirir. Özelleştirilebilir, otomatik güncellenen bir akış ise tam ortada: kod yazmadan yönetilen bir içerik akışı. Ne kadar müdahaleci olmak istediğinize bağlı olarak seçim yapın.
En İyi Uygulamalar İçin Kontrol Listesi
Elfsight ekibi olarak edindiğimiz deneyimlerle, Instagram Feed widget’ının kullanıcılarımız için gerçekten iyi performans göstermesini sağlayan püf noktalarını öğrendik. En iyi şekilde kurmanıza yönelik başlıca ipuçlarımız şu:
- İlk olarak neyi göstereceğini belirle. Bir akış, hesaplardan, etiketlerden veya konumlardan gönderileri çekebilir. Hedeflerine uyacak olanı seç: etiketler topluluk içeriği için iyi çalışır, tek bir hesap ise markanın hikayesini öne çıkarır.
- <strong>Keep it lightweight.</strong> Too many posts at once can slow down the page. Start with 6–9 posts in a grid, then let visitors load more if they want.
- İlgili yerde konumlandırın. Ana sayfalarda güveni bir bakışta kurar. Ürün sayfalarında gerçek hayattaki kullanımı gösterir. Bloglarda ise kişisel bir dokunuş katar. Tek beden herkes için yeterli değildir.
- Altyazıları akıllıca kullanın. Uzun altyazılar tasarımı boğabilir. Sadece ilk birkaç satırı gösterin ve tam hikayeyi görmek isteyenler devamına tıklasın.
- Mobil uyumluluğu önce kontrol edin.
- Gerekli yerlere gönderileri bağlayın. Satışa uygun akışlar kullanıyorsanız, ürünlere veya rezervasyon sayfalarına bağlayın; sadece Instagram’a bağlamakla kalmayın. Böylece widget satış huninize entegre olur.
Instagram Akışıyla Salon İşletmesi
Frisurenschmiede Almanya’da, Sina Fehringer tarafından yönetilen modern bir kuaför salonudur. Diğer Elfsight entegrasyonlarının yanı sıra Instagram Akışı, taze görselleri, salon güncellemelerini ve müşteri dönüşümlerini web sitesinde sergilemede merkezi bir rol oynar ve işletmenin rekabetçi bir alanda öne çıkmasına yardımcı olur.
Elfsight’i Kullanmeden Önce
Başlangıçta salonun web sitesi durağan görünüyordu ve ziyaretçileri rezervasyona dönüştürmekte zorlanıyordu. Dinamik içerik olmadan potansiyel müşteriler dikkat çekebilecek görsel bir yardım bulamıyor; marka rakipleriyle kaynaşıyordu.
- Düşük çevrimiçi etkileşim ve görünürlük
- Web sitesiyle yeni müşteriler çekmede zorluk yaşıyorsunuz
- Güveni artırmak için etkileşimli ve görsel içerik eksikliği
Instagram Akışı ile
“Saç tasarımında etkileşim eksikti. Başka bir yol seçtim ve birçok yeni müşteri kazandım.” – Sina Fehringer, Frisurenschmiede
Instagram Akışı’nı gömerek, salon sosyal profilinden doğrudan güvenilir görsellerin istikrarlı bir akışını elde etti. Saç stilleri, salonun perde arkası görüntüleri ve müşteri tarzları otomatik olarak görünür; manuel düzenleme olmadan web sitesine taze bir his verir. Diğer Elfsight widget’lerle birleştirildiğinde, akış salonun stilini ve kişiliğini statik fotoğrafların yapamayacağı şekillerde iletmeye yardımcı olur.
Sonuçlar
2022’de Instagram Akışı ve diğer Elfsight widget’larını eklediğimizden beri Frisurenschmiede müşteri tabanını 1,5 kat büyüttü. Birçok ziyaretçi şimdi reklamlara veya yoğun promosyonlara ihtiyaç duymadan doğrudan müşteriye dönüşüyor.
Kullanılan Diğer Widget’lar
Instagram Beslemesi dışında Frisurenschmiede şu araçları kullanıyor: Tüm Yorumlar, Yapay Zeka Sohbet Robotu, Fotoğraf Galerisi, ve daha fazlası. Bunlar bir araya geldiğinde güven inşa eden, müşterilerin sorularını anında yanıtlayan ve markayı daha erişilebilir hissettiren bir web sitesi yaratıyor.
Üstelik Sina, widget özelleştirmesinin onu özel CSS’e ve destekleyici Topluluğumuz’u keşfetmesini sağladığını paylaştı.
Sık Sorulan Sorular
Kurulumdan sonra Weebly’de Instagram widget’ım neden görünmüyor?
Beslemeyi ekledikten sonra sayfa düzeni veya duyarlı tasarım sorunlarını nasıl giderim?
Widget kurulum kodu kaldırılırsa ne yapmalıyım?
Tarayıcı uzantıları Elfsight bileşenlerinin yüklenmesini engelleyebilir mi?
Harici betiklerin engellenmesi sorunları CSP ile nasıl çözülür?
Sorular mı, fikirler mi?
Weebly sitesi için Instagram eklemek, ne kadar kontrol ve bakım istediğinize bağlıdır. Sadece tek bir gönderi göstermeniz gerekiyorsa Instagram’ın kendi gömme kodu yeterlidir. Weebly’nin yerel uygulaması kendi en yeni fotoğraflarınızı yönetir. Instagram Graph API ise tam esneklik sağlar, ancak bunun için geliştirici kurulumu ve bununla gelen bakımı üstlenmeye hazır olmalısınız.
Çoğu kullanıcı için Instagram Akış bileşeni pratik bir orta yol sunar: hesaplardan, etiketlerden veya konumlardan gelen canlı, otomatik güncellenen bir akış; sitenizin stiline uyumlu biçimde tasarlanmıştır ve kod yazmanıza ya da bakmanıza gerek yok. Hangi yolu seçerseniz seçin, sonuç aynı kalır — statik Weebly sayfalarını güncel tutan ve ziyaretçilere geri dönme nedeni veren bir deneyime dönüştürür.
