Προσθήκη σχολίων σε ιστότοπους Wix

Για αυτό το παράδειγμα, θα προσθέσουμε το FastComments Live Commenting σε σελίδες δημοσιεύσεων ιστολογίου.

Για να το κάνουμε αυτό, θα ανοίξουμε τον ιστότοπό μας στον επεξεργαστή Wix.

Στη συνέχεια, πρέπει να βεβαιωθούμε ότι επεξεργαζόμαστε τη σωστή σελίδα.

Θέλουμε να βεβαιωθούμε ότι εμφανίζουμε ένα μοναδικό νήμα σχολίων για κάθε ανάρτηση ιστολογίου, οπότε ας επεξεργαστούμε το Blog Pages -> Post.

Βήμα Πρώτο: Επεξεργασία της Δυναμικής Σελίδας Ανάρτησης

Στη συνέχεια, θα πάμε στο Add -> Embed Code -> Embed HTML.

Βήμα Δύο: Προσθήκη μπλοκ Embed HTML

Αυτό θα μας δώσει ένα κουτί που φαίνεται λυπηρό για να ξεκινήσουμε:

Το Αρχικό Μπλοκ

Αυτό το παράδειγμα χρησιμοποιεί προσαρμοσμένο κώδικα για συμβατότητα με το Wix. Δεν θα μπορείτε να χρησιμοποιήσετε τα αποσπάσματα κώδικα του FastComments από άλλα σεμινάρια.

Ανοίξτε τη φόρμα για να προσθέσουμε το προσαρμοσμένο διάλογο HTML μας κάνοντας κλικ στο Enter Code και επιλέγοντας HTML:

Βήμα 3: Άνοιγμα Διαλόγου HTML

Αντιγράψτε το παρακάτω απόσπασμα HTML και επικολλήστε το στον διάλογο, και κάντε κλικ στο Update:

Απόσπασμα Κώδικα Σχολίων Wix

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

Τώρα θα δείτε μια πολύ μικρή έκδοση του widget σχολίων:

Βήμα 3: Επικόλληση και Αποθήκευση

Στη συνέχεια θα το τοποθετήσουμε και θα το μεγεθύνουμε ώστε να ταιριάζει στη σελίδα μας.

Βήμα 3: Το Αποτέλεσμα

Τώρα που έχουμε προσθέσει το widget σχολίων, ας το τοποθετήσουμε στη σελίδα μας.

Βήμα 4: Αλλαγή μεγέθους

Με αυτόν τον οδηγό θα μπορούμε να αλλάξουμε το τρέχον νήμα με βάση την ενεργή σελίδα. Ωστόσο, δεν θα μπορούμε να αλλάξουμε το μέγεθος του widget σχολίων δυναμικά μέχρι η Wix να ενεργοποιήσει αυτήν τη λειτουργία. Μέχρι τότε, θα πρέπει να αποφασίσετε πόσο μεγάλο θέλετε να είναι το πεδίο σχολίων στη σελίδα σας και να το προσαρμόσετε αναλόγως.

Στη συνέχεια, ας ρυθμίσουμε τα πράγματα ώστε το νήμα σχολίων να αλλάζει ανάλογα με την τρέχουσα σελίδα, επιτρέποντας στους χρήστες να συζητούν το περιεχόμενο που εμφανίζεται αυτή τη στιγμή.

Χωρίς τα παρακάτω βήματα, θα έχετε μόνο ένα καθολικό νήμα σχολίων για ολόκληρο τον ιστότοπό σας - κάτι που δεν είναι πολύ χρήσιμο.

Dev Mode

Για να προσθέσουμε αυτή τη λειτουργικότητα, θα πρέπει να μπούμε σε αυτό που η Wix ονομάζει Dev Mode.

Κάντε κλικ στην επιλογή Dev Mode στο πάνω μέρος της οθόνης.

Ενεργοποίηση Dev Mode

Ορισμός του ID του στοιχείου

Θα προσθέσουμε προσαρμοσμένο κώδικα για να το επιτύχουμε αυτό, αλλά πρώτα πρέπει να δώσουμε στο νέο στοιχείο ενσωμάτωσης ένα ID ώστε να μπορούμε να αναφερόμαστε σε αυτό.

Ας το ονομάσουμε fastcomments.

Κάντε κλικ στο νέο στοιχείο ενσωμάτωσης που προσθέσαμε, και σε λειτουργία dev στο κάτω δεξί μέρος θα δείτε ένα πεδίο ID με μια τιμή όπως html1:

Το πεδίο ID

Αλλάξτε το σε fastcomments και πατήστε enter:

Ορισμός του ID

Τώρα μπορούμε να προσθέσουμε τον προσαρμοσμένο κώδικα που λέει στην περιοχή σχολίων ποια σελίδα βλέπουμε.

Στο κάτω μέρος της οθόνης θα δείτε έναν επεξεργαστή κώδικα όπως αυτόν:

Άνοιγμα του επεξεργαστή

Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον εκεί:

Απόσπασμα πλοήγησης σχολίων Wix

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

Προσθήκη του κώδικα πλοήγησης

Τώρα μπορούμε να πάρουμε μια ανάσα και να προεπισκόπησουμε τον ιστότοπό μας. Θα πρέπει να δείτε μια περιοχή σχολίων που αλλάζει ανάλογα με τη σελίδα. Συγχαρητήρια!

Αν αντιμετωπίσετε οποιοδήποτε πρόβλημα, ενημερώστε μας στο πλαίσιο σχολίων παρακάτω.

Το FastComments έχει σχεδιαστεί για να προσαρμόζεται ώστε να ταιριάζει στον ιστότοπό σας.

Αν θέλετε να προσθέσετε προσαρμοσμένο στυλ ή να τροποποιήσετε τη διαμόρφωση, Δείτε την τεκμηρίωση προσαρμογών μας για να μάθετε πώς.