Add Live Commenting to Framer Sites

Αρχικά, άνοιξε τον επεξεργαστή για τον ιστότοπό σου.

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

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

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

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

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

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

Έπειτα θα θελήσετε να κάνετε κλικ και σύρετε το μπλοκ Embed στο τέλος του ιστολογίου σας.

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

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

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

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

Άνοιγμα ρυθμίσεων Embed

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

Ορισμός ως HTML Widget

Τώρα είστε έτοιμοι για το απόσπασμα κώδικα 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 // κάποιοι πάροχοι αλλάζουν το απόσπασμα κώδικα ώστε να είναι 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 (Streaming Chat)

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 // κάποιοι πάροχοι αλλάζουν το απόσπασμα κώδικα ώστε να είναι 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 έχει σχεδιαστεί ώστε να προσαρμόζεται και να ταιριάζει με τον ιστότοπό σας.

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