Add Comments to Wix Sites

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 olması için özel kod kullanır. Diğer öğreticilerdeki FastComments kod parçacıklarını kullanamayacaksınız.

Open the form to add our custom HTML dialog by clicking Enter Code and selecting HTML:

Adım 3: HTML Diyaloğunu Açın

Copy the following HTML snippet and paste it into the dialog, and click Update:

Wix Yorumları Kod Parçası

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

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

Şimdi yorum bileşeninin çok küçük bir sürümünü görmelisiniz:

Adım 3: Sonuç

Sonraki adımda bunu sayfamıza sığacak şekilde konumlandıracak ve 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.

Next, let's set things up so that the comment thread changes based on the current page, allowing users to discuss the currently displayed content.

Without the following steps, you will only have one global comment thread for your entire site - which is not very useful.

Geliştirici Modu

To add this functionality, we'll have to go into what Wix calls Dev Mode.

Click the Dev Mode option at the top of the screen.

Dev Modunu Etkinleştir

Eleman ID'sini Ayarlayın

We're going to add custom code to accomplish this, but first we need to give the new embed element an ID to refer to it by.

Let's call it fastcomments.

Click the new embed element we added, and in dev mode in the bottom right you should see an ID field with a value like html1:

ID Alanı

Change this to fastcomments and hit enter:

ID'yi Ayarla

Now we can add our custom code that tells the comment area what page we are viewing.

At the bottom of the screen you should see a code editor like this:

Editörü Aç

Copy the following code and paste it in there:

Wix Yorumları 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.