Add Live Commenting to Bubble.io Sites

Πρώτα, μεταβείτε στη σελίδα/διάταξη όπου θέλετε να προσθέσετε το FastComments. Στον επεξεργαστή του Bubble, σύρετε και αποθέστε ένα στοιχείο HTML από την πλαϊνή στήλη Visual Elements στη σελίδα σας.

Προσθήκη στοιχείου HTML

Το στοιχείο HTML θα μας επιτρέψει να ενσωματώσουμε το widget του FastComments απευθείας στην εφαρμογή σας στο Bubble.

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

Απόσπασμα κώδικα Live σχολιασμού Bubble.io

Copy

1

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

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // το Bubble τείνει να αλλάζει το απόσπασμα κώδικα ώστε να είναι ασύγχρονο

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

Εισαγωγή κώδικα FastComments

Σημείωση: Αυτός ο κώδικας περιλαμβάνει μηχανισμό επαναπροσπάθειας για να διασφαλιστεί ότι το FastComments φορτώνει σωστά στο δυναμικό περιβάλλον του Bubble. Άλλα αποσπάσματα κώδικα δεν θα λειτουργήσουν.

Θυμηθείτε να αντικαταστήσετε 'demo' με το πραγματικό FastComments tenant ID μετά την εγγραφή. Εάν είστε συνδεδεμένοι στο FastComments.com, θα πρέπει να έχει αντικατασταθεί ήδη.

Για να διασφαλίσουμε ότι το widget σχολίων εμφανίζεται σωστά, πρέπει να προσαρμόσουμε το πλάτος του στοιχείου HTML. Αναζητήστε την καρτέλα Διάταξη στον επεξεργαστή ιδιοτήτων του στοιχείου.

Εύρεση ρύθμισης πλάτους

Η καρτέλα Διάταξη περιέχει σημαντικές επιλογές μεγέθους που θα βοηθήσουν το widget σχολίων να εμφανίζεται σωστά σε διαφορετικά μεγέθη οθόνης.

Στην καρτέλα Διάταξης, ορίστε το πλάτος σε 100%. Αυτό διασφαλίζει ότι το widget σχολίων καταλαμβάνει ολόκληρο το πλάτος του περιέκτη του και ανταποκρίνεται σωστά σε διαφορετικές διαστάσεις οθόνης.

Ορισμός πλάτους σε 100%

Μετά την αλλαγή της τιμής εισόδου σε 100 (ή στο επιθυμητό ποσοστό) θα χρειαστεί να κάνετε κλικ στο αναδυόμενο μενού δίπλα στον αριθμό για να το αλλάξετε από pixels σε ποσοστό.

Επίσης, ορίστε ένα ελάχιστο ύψος (π.χ., 400px) για να εξασφαλίσετε ότι το widget σχολίων έχει αρκετό χώρο για να εμφανίζεται σωστά.

Αφού κάνετε αυτές τις αλλαγές, κάντε κλικ στο κουμπί Προεπισκόπηση για να δείτε το widget FastComments σε δράση!

Καλή δουλειά! Έχετε προσθέσει ζωντανά σχόλια στην ιστοσελίδα σας στο Bubble.io.

Εάν αντιμετωπίσατε σφάλμα "permission denied", ή θα θέλατε να προσαρμόσετε το FastComments, διαβάστε παρακάτω.

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

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