Wix Sitelerine Yorum Ekle

Bu örnekte, blog gönderisi sayfalarına FastComments Canlı Yorumlar'ı ekleyeceğiz.

Bunu yapmak için, sitemizi Wix düzenleyicisinde açacağız.

Sonra, doğru sayfayı düzenlediğimizden emin olmamız gerekecek.

Her blog gönderisi için benzersiz bir yorum dizisi gösterdiğimizden emin olmak istiyoruz, bu yüzden Blog Pages -> Post öğesini düzenleyelim.

Adım 1: Dinamik Gönderi Sayfasını Düzenleyin

Sonra, Add -> Embed Code -> Embed HTML öğesine gideceğiz.

İkinci Adım: Embed HTML Bloğu Ekle

Bu, başlangıç için biraz kötü görünen bir kutu gösterecek:

Başlangıç Bloğu

Bu örnek, Wix ile uyumlu olmak için özel kod kullanır. Diğer eğitimlerden aldığınız FastComments kod parçacıklarını kullanamayacaksınız.

Özel HTML iletişim kutumuzu eklemek için formu açın; bunun için Enter Code seçeneğine tıklayıp HTML seçeneğini seçin:

Adım 3: HTML İletişim Kutusunu Aç

Aşağıdaki HTML parçacığını kopyalayın, iletişim kutusuna yapıştırın ve Update'e tıklayın:

Wix Yorumlar Kod Parçacığı

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Artık yorum bileşeninin çok küçük bir versiyonunu görmelisiniz:

Adım 3: Yapıştır ve Kaydet

Adım 3: Sonuç

Sırada, bunu sayfamıza uygun şekilde konumlandırıp boyutlandıracağız.

Yorum bileşenini eklediğimize göre, şimdi sayfamızda düzenleyelim.

Adım 4: Yeniden Boyutlandırma

Bu eğitimle, etkin sayfaya bağlı olarak mevcut konuyu değiştirebileceğiz. Ancak, Wix bu işlevselliği açana kadar yorum bileşenini dinamik olarak yeniden boyutlandıramayacağız. O zamana kadar, sayfanızdaki yorum alanının ne kadar büyük olmasını istediğinize karar vermeniz ve uygun şekilde boyutlandırmanız gerekecek.

Şimdi, yorum dizisinin geçerli sayfaya göre değişmesi için ayarları yapalım; böylece kullanıcılar o anda görüntülenen içeriği tartışabilir.

Aşağıdaki adımları uygulamazsanız, tüm siteniz için yalnızca tek bir global yorum dizisine sahip olursunuz - ki bu pek kullanışlı değildir.

Dev Mode

Bu işlevselliği eklemek için Wix'in Dev Mode olarak adlandırdığı moda girmemiz gerekiyor.

Ekranın üst kısmındaki Dev Mode seçeneğine tıklayın.

Dev Mode'u Etkinleştir

Element ID'sini Ayarlayın

Bunu başarmak için özel kod ekleyeceğiz, ancak önce yeni gömme (embed) elementine, ona atıfta bulunmak için bir ID vermemiz gerekiyor.

Buna fastcomments diyelim.

Eklediğimiz yeni gömme elementine tıklayın; dev modunda sağ altta html1 gibi bir değere sahip bir ID alanı görmelisiniz:

ID Alanı

Bunu fastcomments olarak değiştirin ve enter tuşuna basın:

ID'yi Ayarla

Artık hangi sayfayı görüntülediğimizi yorum alanına söyleyen özel kodumuzu ekleyebiliriz.

Ekranın alt kısmında şuna benzer bir kod düzenleyicisi görmelisiniz:

Düzenleyiciyi Aç

Aşağıdaki kodu kopyalayın ve oraya yapıştırın:

Wix Yorum Gezinme Parçacığı

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Gezinme Kodunu Ekle

Şimdi bir nefes alıp sitemizi önizleyebiliriz. İlgili sayfaya göre değişen bir yorum alanı görmelisiniz. Tebrikler!

Herhangi bir sorun yaşarsanız, aşağıdaki yorum kutusundan bize bildirin.

FastComments, sitenize uyacak şekilde özelleştirilmek üzere tasarlanmıştır.

Özel stil eklemek veya yapılandırmayı ayarlamak istiyorsanız, nasıl yapılacağını öğrenmek için Özelleştirme Belgelerimizi İnceleyin.