Προσθήκη ζωντανών σχολίων σε ιστοσελίδες Framer

Πρώτα, ανοίξτε τον επεξεργαστή για τον ιστότοπό σας.

Στο παράδειγμά μας θα προσθέσουμε το FastComments στις σελίδες του ιστολογίου μας, αλλά οποιοσδήποτε τύπος σελίδας θα πρέπει να λειτουργεί.

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

Τώρα, ας προσθέσουμε ένα Embed μπλοκ.

Μεταβείτε στο Insert επάνω αριστερά:

Κάντε κλικ στο Insert

Στη συνέχεια, κυλήστε το αριστερό πλαϊνό μενού προς τα κάτω και περάστε το δείκτη του ποντικιού πάνω από το Utility.

Στη συνέχεια θα θελήσετε να κάνετε κλικ και να σύρετε το μπλοκ Embed στο τέλος του blog σας.

Είναι σημαντικό να κάνετε κλικ και να σύρετε όπως φαίνεται, και όχι απλώς να το κλικάρετε. Αν το μόνο που κάνετε είναι κλικ, τότε το Framer θα το εισαγάγει έξω από το blog σας και θα χρειαστεί να το σύρετε μετά.

Εντοπίστε το widget Embed

Σύρετε και Αποθέστε το widget Embed

Τώρα θα έχετε ένα κενό widget Embed, και όταν το επιλέξετε θα εμφανιστεί μια πλαϊνή στήλη στα δεξιά. Μπορείτε να επεκτείνετε την πλαϊνή στήλη, και θα δείτε κάτι τέτοιο:

Ανοίξτε τις Ρυθμίσεις του Embed

Τώρα ας αλλάξουμε τον τύπο του widget Embed σε HTML:

Ορίστε ως widget HTML

Τώρα είστε έτοιμοι για το απόσπασμα κώδικα FastComments για Framer στο επόμενο βήμα.

Το snippet FastComments για Live Comments στο Framer είναι παρακάτω.

FastComments Framer-Specific Comments Snippet

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 // some providers change the code snippet to be 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

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το widget Streaming Chat. Το snippet FastComments Streaming Chat για το Framer είναι:

FastComments Framer-Specific Streaming Chat Snippet

Copy

1

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

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

4<script>

5 (function fcLoad() {

6

7 function tryLoad() {

8 // some providers change the code snippet to be async

9 const container = document.getElementById('fastcomments-live-chat-widget');

10 if (!container) {

11 return waitRetry();

12 }

13 if (!window.FastCommentsLiveChat) {

14 return waitRetry();

15 }

16 if (container.fastCommentsSetup) {

17 return;

18 }

19 window.FastCommentsLiveChat(container, {

20 tenantId: 'demo',

21 pageTitle: top.document.title,

22 url: top.location.href,

23 urlId: top.location.pathname

24 });

25 container.fastCommentsSetup = true;

26 }

27 function waitRetry() {

28 setTimeout(tryLoad, 500);

29 }

30 tryLoad();

31 })();

32</script>

33

Το FastComments υποστηρίζει τον επεξεργαστή Framer, οπότε θα πρέπει να δείτε κάτι τέτοιο αφού επικολλήσετε τον κώδικα (ίσως χρειαστεί να κάνετε κλικ στο Publish):

Προεπισκόπηση Widget Σχολίων

Τώρα, όταν προβάλλετε τον ιστότοπό σας, θα πρέπει να βλέπετε την περιοχή σχολίων! Στην πλαϊνή γραμμή του Framer μπορείτε, αν θέλετε, να ορίσετε το widget και σε πλήρες πλάτος.

Σημειώστε ότι το Framer περιορίζει το ύψος των widgets και δεν υποστηρίζει αυτόματη προσαρμογή μεγέθους, γι' αυτό έχουμε επιλέξει εδώ το widget Live Chat, καθώς έχει σταθερό ύψος.

Μπορούμε να βελτιώσουμε τη θέση του widget κάνοντας δύο πράγματα.

Πρώτον, στο αριστερό πλαίσιο, ορίστε το ύψος του widget σε fill και 1fr:

Ύψος Widget Σχολίων

Στη συνέχεια πρέπει να διορθώσουμε την προεπιλεγμένη ρύθμιση σελίδας του Framer. Από προεπιλογή ορίζει το ύψος της σελίδας σε ένα σταθερό μέγεθος, το οποίο μπορεί να κόψει νήματα σχολίων. Οπότε ας το ορίσουμε κι αυτό σε fill.

Ορισμός Ύψους Σελίδας

Ενδέχεται να χρειαστεί να πειραματιστείτε με το ύψος της σελίδας για να το ρυθμίσετε όπως θέλετε.

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

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