Weebly Web Sitenize Instagram Nasıl Eklersiniz?

Bir Weebly sitesi yönetiyorsanız, sitenin yalnızca statik sayfalardan ibaret olmadığını hissettirmek istersiniz. Elfsight olarak, web sitenize hayat katmanın en kolay yollarından birinin Instagram akışınızı sitenize entegre etmek olduğunun farkındayız. Sayfalarda taze paylaşımları göstermek, ziyaretçilerin sitede daha uzun kalmasını sağlar ve geri dönmeleri için bir sebep yaratır.

Instagram Feed Widget takes care of the hard part. It pulls your posts automatically, lets you adjust the look so it blends with your design, and saves you from messing with code. Users often tell us they like how it keeps their content up-to-date without extra effort, while giving visitors a clear window into what their brand is up to.”>The Instagram Akış Widget’ı zorlu 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şmaktan sizi kurtarır. Kullanıcılar genellikle içeriklerini ekstra çaba olmadan güncel tutmanızı ve ziyaretçilere markanızın ne yaptığına dair net bir pencere sunmasını beğendiklerini ifade eder.

İşleri basit tutmak için talimatları ikiye böldük: Hızlı sonuçlar için sıkıştırılmış kısa bir kılavuz ve tam özelleştirme içeren kapsamlı bir adım adım rehber. Kolay adımlarla başlayalım.

Weebly Web Sitesi’ne Instagram Ekleme: Hızlı Adımlar

İşte Weebly’e Instagram gönderilerini eklemek için iki dakikalık bir kısayol:

1. Elfsight’in düzenleyicisini açın ve bir şablon seçin.
2. Instagram Besleme Widget’ınızı Özelleştirin.
3. “Ücretsiz olarak web sitesine ekle” düğmesine tıklayın ve kodu kopyalayın.
4. Weebly sitenizin yönetim paneline yapıştırın.

Ücretsiz düzenleyicide kendi Instagram Besin Akışı Widget’ınızı Oluşturun!

Fark Yaratan Instagram Beslemesi Özellikleri

Ç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.

Bu, markanızın en güncel paylaşımlarını sergilemenize ve ziyaretçileri harekete yönlendirmeye yardımcı olacak Instagram Akışı Widget’ının birkaç kullanışlı özelliğinden bazılarıdır. Tüm liste için Özellikler Sayfası’nı inceleyin. Ana özellikler ele alındıktan sonra, her entegrasyon adımını tek tek incelemeye geçelim.

Weebly’de Instagram Akışını Ekleme İçin Kapsamlı Rehber

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. Ş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ımda widget’a içerik nereden çekileceğini söyleyin. <em>“Kaynak Ekle”</em>ye tıklayın ve Instagram hesabınızı bağlayın veya bir hashtag akışı kurun. Aynı anda birden çok hesap ve hashtag ekleyebilir, farklı içerik türlerini tek bir akışta birleştirebilirsiniz. Filtreler, hangi içeriklerin gösterileceğini kontrol etmenize olanak tanır; belirli anahtar kelimeleri içeren gönderileri gizleyebilir veya medya türüne göre sınırlandırabilirsiniz.

3. Düzeni Ayarlayın

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ştir

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 Ayarla

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ışlar istiyorsanız, özel JavaScript veya CSS ekleyebilirsiniz.

7. Kurulum Kodunu Alın

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 lütfen “Kodu Kopyala”ya tıklayın — widget’i sitenize gömmek için buna ihtiyacınız olacak.

8. Widget’ı Weebly üzerinde 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 Sayfada Statik Widget

• Weebly hesabınıza giriş yapın, sitenizi seçin ve ardından Sitede Düzenle düğmesine tıklayın.
• Sol taraftaki menüden Gömme Kod öğesini, widget’ın görünmesini istediğiniz yere sürükleyin.
• Tıklayın Özel HTML’yi Düzenle, Elfsight kodunuzu yapıştırın.
  Not: Kod, alan dışına tıklayınca otomatik olarak uygulanır.
• Üst sağ köşedeki “Yayınla” düğmesine tıklayarak widget’ı web sitenizde görünür hale getirin.

Seçenek 2: Tüm Sayfalarda Statik Widget

• Weebly kontrol paneline gidin → “Siteyi Düzenle” seçeneğine tıklayın.
• Üst çubuktaki Tema sekmesini açın, ardından sol taraftaki menüden HTML / CSS’yi Düzenle seçeneğini seçin. Bu sayede sitenizin ham tema dosyalarına erişebilirsiniz.
• Dosya ve klasör listesinde <code>header.html</code> arayın ve mevcutsa: <code>no-header.html</code> <br><br> Elfsight kod parçacığını kapanış etiketinin hemen sonrasına veya bu dosyalar içinde mantıklı bir konuma yapıştırın. <div class=”tip-blue tip”><strong>Unutmayın</strong>: Bu kodu header.html’e (varsa no-header.html ile) yerleştirdiğinizde Weebly’e widget’in tüm sayfalarda yüklenmesini söylüyorsunuz.</div>”>
• Değişiklikleri kaydedin, sonra sitenizi yayınlayın.

Seçenek 3: Belirli Bir Sayfada Yüzen Widget

• Weebly’ye giriş yapın → tıklayın “Siteyi Düzenle”.
• 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 kodunuzu yapıştırın.
  Not: Düzenleyicide kayan widgetlar düzgün görünmeyebilir – canlı olarak yayınlayıp siteyi canlı görünümüyle doğrulayın.
• Değişiklikleri uygulamak için siteyi yayınlayın.

Seçenek 4: Tüm Sayfalarda Yüzen Widget

• Giriş Yap → Siteyi Düzenle.
• Tema → HTML/CSS Düzenle’yi seçin.
• Dosyalar arasından header.html (veya eşdeğeri) ile no-header.html‘yi seçip açın. Elfsight kodunuzu kapanış etiketinden hemen önce yapıştırın (dosyaya uygun konuma göre).
• Yayınla web sitesini tüm sayfalarda görünen yüzen widget olarak canlıya alın.

En iyi tarafı, düzenleyicide widget’i istediğiniz zaman ayarlayabilir ve değişiklikler kodu yeniden eklemenize gerek kalmadan Weebly web sitenizde otomatik olarak güncellenecektir.

Esneklik istiyorsanız veya farklı bir kurulum yöntemi tercih ediyorsanız, bir sonraki bölüm Weebly’de Instagram gönderilerini görüntülemenin alternatif yollarını kapsıyor.

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önderiler İçin Instagram Gömme Kodu

Instagram’ın resmi gömme özelliğini kullanarak tek bir gönderi veya videoyu doğrudan ekleyebilirsiniz.

1. Instagram gönderisini açın. Eklemek istediğiniz gönderiyi bulun ve üç noktaya tıklayın.
2. Göm kodunu kopyalayın. “Göm” seçeneğini seçin ve sağlanan HTML kodunu kopyalayın.
3. Weebly sayfanızı düzenleyin. Weebly düzenleyicisini açın ve güncellemek istediğiniz sayfaya gidin.
4. Bir gömme bloğu ekleyin. Gönderinin görünmesini istediğiniz konuma Embed Code öğesini sürükleyin.
5. Yapıştır ve Kaydet. Instagram gömme kodunu alanına yapıştırın, ardından değişikliklerinizi yayınlayın.

Instagram’ın gömme gönderileri için resmi talimatlarını Yardım Merkezi sayfasında bulabilirsiniz.

Weebly’nin Yerli Instagram Akışı Uygulaması

Weebly’nin kendi Instagram Akışı entegrasyonu, hesabınızdaki en yeni paylaşımları göstermenize olanak tanır.

1. Weebly Uygulama Merkezi’ne gidin. Kontrol panelinizden Uygulama Merkezi’ni açın.
2. Instagram Feed uygulamasını ara. Weebly’nin resmi Instagram entegrasyonunu bulun.
3. Uygulamayı kurun. Web sitenize ekleyin.
4. Hesabınızı Bağlayın. İstendiğinde Instagram kimlik bilgilerinizle giriş yapın.
5. 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 aşina iseniz, resmi Instagram Graph API’si kullanarak Instagram içeriğini entegre etmenin bir yolu vardır.

1. Facebook geliştiricisi olarak kaydolun. Facebook Uygulamanızı kurun ve gerekli API izinlerini alın.
2. Erişim belirteci oluşturun. Instagram hesabınız için geçerli bir belirteç edin ve doğrulayın.
3. JavaScript kodu yazın veya kullanın. API’yi kullanarak gönderileri almak ve görüntülemek için bir betik oluşturun.
4. Weebly’ye kod ekleyin. Weebly düzenleyicinizde Gömme Kodu bloğu aracılığıyla betiği ekleyin.
5. 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	Önemli Artı 👍	Önemli Eksiklikler 👎
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.

Weebly sitenizde Instagram akışınızın harika görünmesi ve sorunsuz çalışması için pratik ipuçları istiyorsanız, bir sonraki uygulamalı ipuçları dizisini okumaya devam edin.

📝 Instagram Akışı İçin En İyi Uygulama Kontrol Listesi

Widgetleri test etme ve kullanıcılarımızın sitelerini geliştirmelerine yardımcı olma konusundaki Elfsight ekibi tecrübesinden, Instagram Besleme Widget’ı’nın gerçekten iyi performans göstermesini sağlayan unsurları öğrendik. En iyi şekilde kurmanıza yardımcı olacak temel ipuçlarımız aşağıda.

Artık Instagram Akışı Widget’ını baştan sona biliyorsunuz, şimdi pratikte nasıl göründüğüne bakalım — Topluluğumuzda başarı öyküsünü paylaşan bir Elfsight kullanıcısından gerçek bir örnek.

İşletmede Instagram Akışı: Kuaförlük İş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 statik görünüyordu ve ziyaretçileri rezervasyona dönüştürmekte zorlanıyordu. Dinamik içerik olmadan potansiyel müşterilerin dikkatini çekmek için görsel bir yardım yoktu ve marka rakiplerle karışı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

“Kuaförlükte etkileşimin eksikliği var. Başka bir yol seçtim ve pek çok yeni müşteri kazandım.”

Sina Fehringer, Frisurenschmiede

Instagram Akışı’nı sayfaya entegre etmek, salonun sosyal profilinden gelen otantik görsellerin düzenli bir akışını yakaladı. Saç stilleri, salon anları ve müşteri görünümleri otomatik olarak güncellenir; böylece siteye manuel düzenleme ihtiyacı kalmadan taze bir hava katar. Diğer Elfsight widget’larıyla birleştiğinde, akış sabit fotoğrafların yapamadığı şekilde salonun stilini ve kişiliğini 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 Akışı’nın yanı sıra Frisurenschmiede şu araçları kullanır: Tüm Yorumlar, Yapay Zeka Sohbet Robotu, Fotoğraf Galerisi ve daha fazlası. Bunlar bir araya geldiğinde güven oluşturan, müşterilerin sorularını anında yanıtlayan ve markayı ulaşılabilir ve modern hissettiren bir web sitesi yaratır.

Üstelik widget özelleştirmesi sayesinde Sina özel CSS’e erişti ve destekleyici Topluluğumuzu keşfetti. Bir ekip olarak böyle başarı hikayelerini duymak ve yaratıcı zihinlerin widgetlarımız yardımıyla işlerini yükselttiğini görmek, süreçte yeni şeyler öğrenmelerini sağlıyor ve bizi çok mutlu ediyor.

Mükemmel kurulum bile bazı sorunların ortaya çıkmasına yol açabilir. Kendi Instagram widget’ınızın sorunsuz çalışması için yaygın sorunları ve çözümlerini ele alalım.

Instagram Beslemesi Entegrasyonu Sorunları

Çoğu kullanıcı, widget hatalarını kod konumunu incelemek, önbelleği temizlemek veya görüntüleme ayarlarını ayarlamak yoluyla çözer. Biraz sorun giderme ve ayrıntılara özen göstermek büyük fark yaratır.

Sorularınız mı var? Fikirleriniz mi?

Bu makale, Weebly sitenizi Instagram Besin Akışı Widget’ı ile yükseltmeniz için iyi bir başlangıç noktasıdır. Geri bildiriminiz, önerileriniz veya widget kullanım ipuçlarınız varsa duymak isteriz! Güncellemeler ve tartışmalar için X, Facebook ve LinkedIn’deki Elfsight ekibiyle iletişimde kalın.