Προσθήκη ζωντανής σχολιασμού σε ιστότοπους Bubble.io

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

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

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

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

Απόσπασμα κώδικα ζωντανών σχολίων για 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 τείνει να μετατρέπει το απόσπασμα κώδικα σε async

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' με το πραγματικό tenant ID του FastComments μετά την εγγραφή σας. Εάν έχετε συνδεθεί στο FastComments.com, θα πρέπει να έχει ήδη αντικατασταθεί.

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

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

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

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

Ορίστε το πλάτος στο 100%

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

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

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

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

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

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

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