Add Live Commenting to Framer Sites

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ορίστε ως widget HTML

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

The Framer Live Comments FastComments snippet is below.

FastComments Framer - Ειδικό Απόσπασμα Σχολίων

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 // κάποιοι πάροχοι αλλάζουν το snippet κώδικα ώστε να γίνει 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

Or, alternatively, you can use the Streaming Chat widget. The Framer Streaming Chat FastComments snippet is:

FastComments Framer - Ειδικό Απόσπασμα Ζωντανής Συνομιλίας

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 // κάποιοι πάροχοι αλλάζουν το snippet κώδικα ώστε να γίνει 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 supports the Framer editor, so you should see something like this once you paste the code in (you might have to click Publish):

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

Now when you view your site you should see the comment area! In the sidebar of Framer you can set the widget as full width as well, if desired.

Note that Framer limits the height of widgets and does not support auto-resizing, so we've chosen the Live Chat widget here since it is fixed height.

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

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

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

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

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

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

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

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