Add Live Commenting to Framer Sites

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

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

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

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

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

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

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

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

Go to Insert in the top left:

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

Then scroll the left hand sidebar down and mouse over Utility.

Next you'll want to κάνετε κλικ και σύρετε the Utility block to the end of your blog.

It's important you κάνετε κλικ και σύρετε as shown, and not just click it. If you just click it, then Framer will insert it outside of your blog and you'll have to drag it around later.

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

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

Now you'll have an empty Embed widget, and when you select it you'll get a sidebar on the right. You can expand the sidebar, and you'll see something like this:

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

Now let's change the Embed widget type to HTML:

Ορίστε ως HTML Widget

Now you're ready for the FastComments Framer Code snippet in the next step.

Βήμα 3: Αντιγράψτε και επικολλήστε τον κώδικα FastComments ειδικό για το Framer

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() {
            // κάποιοι πάροχοι αλλάζουν το snippet κώδικα ώστε να γίνει 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 - Ειδικό Απόσπασμα Ζωντανής Συνομιλίας

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

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

Γλώσσα 🇬🇷 Ελληνικά