Add Live Commenting to Framer Sites

Με το FastComments μπορούμε εύκολα να προσθέσουμε ζωντανά σχόλια σε οποιονδήποτε ιστότοπο που έχει δημιουργηθεί με το Framer.

Σε αυτό το σεμινάριο θα καλύψουμε μόνο την εγκατάσταση του widget Ζωντανών Σχολίων. Εάν χρειάζεστε βοήθεια για την εγκατάσταση άλλων widgets, ή για τη ρύθμιση του SSO, μη διστάσετε να δημιουργήσετε ένα αίτημα υποστήριξης.

Βήμα 1: Άνοιγμα του επεξεργαστή

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

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

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

Βήμα 2: Προσθήκη μπλοκ ενσωμάτωσης

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

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

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

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

Στη συνέχεια θα θέλετε να πατήσετε και να σύρετε το μπλοκ Utility μέχρι το τέλος του ιστολογίου σας.

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

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

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

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

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

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

Ορίστε ως widget HTML

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

Βήμα 3: Αντιγραφή και επικόλληση του ειδικού για Framer κώδικα FastComments

The Framer Live Comments FastComments snippet is below.

Απόσπασμα FastComments ειδικό για Framer (Σχόλια)

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // κάποιοι πάροχοι αλλάζουν το απόσπασμα κώδικα ώστε να είναι async
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

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

Απόσπασμα FastComments ειδικό για Framer (Streaming Chat)

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // κάποιοι πάροχοι αλλάζουν το απόσπασμα κώδικα ώστε να είναι async
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

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.

Βήμα 4: Προσαρμογή ύψους του widget και της σελίδας

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

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

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

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

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

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

Σφάλματα τομέα

Μπορεί να λάβετε σφάλμα εξουσιοδότησης, όπως το παρακάτω:

Λείπει η διαμόρφωση τομέα

Αυτό συμβαίνει επειδή το FastComments δεν γνωρίζει ότι πρέπει να επιτρέψει τη χρήση του λογαριασμού σας σε αυτόν τον τομέα.

Σε αυτή την περίπτωση, η διόρθωση είναι απλή. Απλώς πρέπει να προσθέσετε τον ιστότοπό σας στον λογαριασμό σας στο FastComments.com.

Μεταβείτε εδώ για να προσθέσετε τον ιστότοπό σας στον λογαριασμό σας.

Προσαρμογή

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

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

Γλώσσα 🇨🇾 Ελληνικά (Κύπρος)