Comment Count Widgets | FastComments Docs

FastComments παρέχει ελαφριά, αυτόνομα widget μέτρησης σχολίων που μπορούν να εμφανίζουν τον αριθμό σχολίων για συγκεκριμένες σελίδες ή αναρτήσεις. Αυτά τα widget είναι ξεχωριστά από το κύριο widget σχολιασμού και είναι σχεδιασμένα για χρήση οπουδήποτε θέλετε να εμφανίσετε τους αριθμούς σχολίων χωρίς την πλήρη διεπαφή σχολιασμού.

Υπάρχουν δύο τύποι widget μέτρησης σχολίων διαθέσιμοι:

Comment Count Widget - Για την εμφάνιση του αριθμού σχολίων μιας μεμονωμένης σελίδας
Bulk Comment Count Widget - Για αποδοτική εμφάνιση των αριθμών σχολίων για πολλαπλές σελίδες στην ίδια σελίδα

Αυτό το άρθρο καλύπτει τα VanillaJS widgets. Οι βιβλιοθήκες μας React/Angular/etc έχουν επίσης τα δικά τους widgets.

Το Comment Count Widget ειναι σχεδιασμενο για την εμφανιση του αριθμου σχολιων μιας μεμονωμενης σελιδας. Ειναι ελαφρυ και παρεχει ενημερωσεις σε πραγματικο χρονο αν ρυθμιστει.

Βασικη Εγκατασταση

Comment Count Widget Installation

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count'), {
        tenantId: 'demo'
    });
</script>

Επιλογες Διαμορφωσης

Η συναρτηση FastCommentsCommentCount δεχεται τις ακολουθες επιλογες διαμορφωσης:

tenantId (απαιτειται): Το FastComments tenant ID σας
urlId (προαιρετικο): Ο αναγνωριστης σελιδας. Προεπιλογη ειναι window.location.href αν δεν οριστει
numberOnly (προαιρετικο): Αν true, εμφανιζει μονο τον αριθμο χωρις κειμενο. Προεπιλογη ειναι false
isLive (προαιρετικο): Αν true, ο αριθμος θα ενημερωνεται αυτοματα. Προεπιλογη ειναι false

Προχωρημενα Παραδειγματα

Προσαρμοσμενο URL ID

Comment Count with Custom URL ID

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-custom"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {
        tenantId: 'demo',
        urlId: 'my-custom-page-id'
    });
</script>

Εμφανιση Μονο Αριθμου

Comment Count Number Only

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-number"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {
        tenantId: 'demo',
        numberOnly: true
    });
</script>

Ζωντανες Ενημερωσεις

Live Comment Count Updates

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-live"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {
        tenantId: 'demo',
        isLive: true
    });
</script>

Το widget επιστρεφει ενα αντικειμενο με τις ακολουθες μεθοδους:

destroy(): Αφαιρει το widget και καθαριζει ολους τους χρονοδιακοπτες
update(config): Ενημερωνει το widget με νεα διαμορφωση

Παραδειγμα Χρησης

Widget Methods Example

Copy

Run

<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-methods"></div>
<script>
    const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {
        tenantId: 'demo'
    });
    // Update the widget to show a different page's count
    setTimeout(() => {
        widget.update({
            tenantId: 'demo',
            urlId: 'different-page-id'
        });
    }, 5000);
    // Destroy the widget after 10 seconds
    setTimeout(() => {
        widget.destroy();
    }, 10000);
</script>

Στυλ

Το widget αποδιδει απλο HTML με τον αριθμο σχολιων και ερχεται με ελαχιστο στυλ. Μπορειτε να προσαρμοσετε την εμφανιση με CSS:

Custom Styling

Copy

Run

<style>
    .comment-count-styled {
        background: #f0f0f0;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 14px;
        color: #666;
        display: inline-block;
    }
</style>
<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
<div id="comment-count-styled" class="comment-count-styled"></div>
<script>
    window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {
        tenantId: 'demo'
    });
</script>

Το Bulk Comment Count Widget ειναι σχεδιασμενο για την αποτελεσματικη εμφανιση του αριθμου σχολιων για πολλαπλες σελιδες στην ιδια σελιδα. Αντι να κανει μεμονωμενες κλησεις API για καθε αριθμο σχολιων, αυτο το widget ομαδοποιει τα αιτηματα για βελτιστη αποδοση.

Βασικη Εγκατασταση

Bulk Comment Count Widget Installation

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<!-- Multiple elements with comment counts -->
<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>
<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

Πως Λειτουργει

Το bulk widget λειτουργει:

Σαρωνοντας τη σελιδα για στοιχεια με την κλαση fast-comments-count
Διαβαζοντας το χαρακτηριστικο data-fast-comments-url-id απο καθε στοιχειο
Ομαδοποιωντας αιτηματα API για αποτελεσματικη ανακτηση πολλαπλων αριθμων σχολιων
Ενημερωνοντας καθε στοιχειο με τον καταλληλο αριθμο σχολιων

Επιλογες Διαμορφωσης

Η συναρτηση FastCommentsCommentCountBulk δεχεται τις ακολουθες επιλογες διαμορφωσης:

tenantId (απαιτειται): Το FastComments tenant ID σας
apiHost (προαιρετικο): Προσαρμοσμενος API host αν χρησιμοποιειτε μια αυτο-φιλοξενουμενη εγκατασταση

Παραδειγμα απο τον Πραγματικο Κοσμο

Εδω ειναι ενα πρακτικο παραδειγμα που δειχνει πως μπορειτε να χρησιμοποιησετε το bulk widget σε μια λιστα αναρτησεων blog:

Blog Post Listing with Comment Counts

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .blog-post {
        border: 1px solid #ddd;
        margin: 10px 0;
        padding: 15px;
        border-radius: 5px;
    }
    .post-meta {
        color: #666;
        font-size: 14px;
        margin-top: 10px;
    }
    .comment-count {
        background: #e7f3ff;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        display: inline-block;
    }
</style>
<div class="blog-post">
    <h3>How to Install FastComments</h3>
    <p>Learn how to add FastComments to your website in just a few minutes...</p>
    <div class="post-meta">
        Published: March 15, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>
    </div>
</div>
<div class="blog-post">
    <h3>Advanced FastComments Configuration</h3>
    <p>Dive deep into the advanced configuration options for FastComments...</p>
    <div class="post-meta">
        Published: March 10, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>
    </div>
</div>
<div class="blog-post">
    <h3>FastComments vs Other Solutions</h3>
    <p>See how FastComments compares to other commenting solutions...</p>
    <div class="post-meta">
        Published: March 5, 2024 |
        <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>
    </div>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

Ζητηματα Αποδοσης

Το bulk widget βελτιστοποιει αυτοματα την αποδοση με:

Ομαδοποιηση αιτηματων: Πολλαπλοι αριθμοι σχολιων ανακτωνται σε μια μονο κληση API
Ορια μεγεθους αιτηματων: Τα αιτηματα διαχωριζονται αυτοματα αν η λιστα URL γινει πολυ μεγαλη (πανω απο 1.000 χαρακτηρες)
Αποδιπλασιασμος: Πολλαπλα στοιχεια με το ιδιο data-fast-comments-url-id μοιραζονται τον ιδιο αριθμο

Πολλαπλα Στοιχεια με το Ιδιο URL ID

Μπορειτε να εχετε πολλαπλα στοιχεια στη σελιδα με το ιδιο data-fast-comments-url-id. Ολα θα ενημερωθουν με τον ιδιο αριθμο:

Multiple Elements Same URL ID

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
<style>
    .count-example {
        margin: 10px 0;
        padding: 10px;
        background: #f9f9f9;
        border-radius: 5px;
    }
</style>
<div class="count-example">
    Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<div class="count-example">
    Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
</div>
<script>
    window.FastCommentsBulkCountConfig = {
        tenantId: 'demo'
    };
</script>

Τοπικοποιηση

Το bulk widget μορφοποιει αυτοματα τους αριθμους σχολιων βασει των ρυθμισεων γλωσσας του FastComments. Παρεχει καταλληλο κειμενο για:

Μηδεν σχολια
Ενα σχολιο
Πολλαπλα σχολια

Χρησιμοποιηστε το Bulk Widget οταν:

Εχετε πολλαπλους αριθμους σχολιων στην ιδια σελιδα
Εμφανιζετε μια λιστα αναρτησεων/αρθρων με αριθμους σχολιων
Η αποδοση ειναι σημαντικη (μειωνει τις κλησεις API)

Χρησιμοποιηστε το Single Widget οταν:

Χρειαζεστε μονο εναν αριθμο σχολιων στη σελιδα
Χρειαζεστε ζωντανες ενημερωσεις (το single widget υποστηριζει ενημερωσεις σε πραγματικο χρονο)
Θελετε περισσοτερο ελεγχο στη συμπεριφορα του μεμονωμενου widget

APIs Μέτρησης Σχολίων

Υπαρχουν μερικα endpoints για να λαβετε τις μετρησεις, αναλογα με το τι θελετε και αν θελετε να τις λαβετε απο εναν browser, server ή χρησιμοποιωντας το API SDK.

Δημοσιοι Αριθμοι Σχολιων

Μπορειτε να λαβετε τους δημοσιους αριθμους σχολιων χρησιμοποιωντας τα widgets παραπανω ή χρησιμοποιωντας τα APIs που χρησιμοποιουν. Αυτα τα APIs παραμενουν αμεταβλητα απο το 2019 και δεν θα αλλαξουν ποτε.

Single Count Endpoint

Copy

https://fastcomments.com/widgets/comment-count/:tenantId?urlId=page_id_or_url

Αυτο θα επιστρεψει μια δομη οπως:

Single Count Endpoint Response

Copy

{"count":0,"postfix":"comments"}

Η ιδιοτητα postfix περιλαμβανεται παντα.

Bulk Count Endpoint

Copy

https://fastcomments.com/widgets/comment-count-bulk/:tenantId?urlIds=x,y,z

Αυτο θα επιστρεψει μια δομη οπως:

Bulk Count Endpoint Response

Copy

{
    "status": "success",
    "translations": {
        "t174": "0 Comments",
        "t175": "1 Comment",
        "t176": "[count] Comments"
    },
    "counts": {
        "x": 10
    }
}

Το αντικειμενο counts συμπληρωνεται μονο για σελιδες που εχουν μετρησεις. Ο χαρτης translations ειναι παντα παρων καθως χρησιμοποιειται για το widget.

Συμπεριφορα Δημοσιων Endpoints / Caching

Τα δημοσια endpoints εχουν εναν μηχανισμο caching 60 δευτερολεπτων για να χειριστουν αιχμες στην κινηση. Εσωτερικα, αυτο ειναι ενα per-thread LRU cache στη μνημη του server, οποτε μπορει να δειτε τις μετρησεις να αλλαζουν ελαφρως (να ανεβαινουν και μετα να πεφτουν προσωρινα) οταν οι ανθρωποι αφηνουν πολλα σχολια.

Τα δημοσια endpoints επιστρεφουν παντα τον συνολικο αριθμο σχολιων, οχι τον αριθμο ριζικων σχολιων.

Server-Side APIs / SDK

Ο τροπος να λαβετε σχολια απο τον server σας ειναι να καλεσετε το Pages API και να λαβετε το αντικειμενο σελιδας, που περιεχει τον συνολικο αριθμο σχολιων και τον αριθμο ριζικων σχολιων. Παρεχουμε SDKs που σας επιτρεπουν να καλεσετε αυτο το API χωρις να κατασκευασετε το API request χειροκινητα και παρεχουν τυποποιημενες τιμες επιστροφης.

Τα widget αριθμού σχολίων του FastComments παρέχουν έναν απλό και αποδοτικό τρόπο για να εμφανίζετε τον αριθμό σχολίων σε όλο τον ιστότοπό σας.

Ελπίζουμε ότι βρήκατε αυτή την τεκμηρίωση χρήσιμη.

Εγκατάσταση

APIs Μέτρησης Σχολίων

Εγκατάσταση Widget Μέτρησης Σχολίων

Βασικη Εγκατασταση

Επιλογες Διαμορφωσης

Προχωρημενα Παραδειγματα

Προσαρμοσμενο URL ID

Εμφανιση Μονο Αριθμου

Ζωντανες Ενημερωσεις

Μεθοδοι Widget

Παραδειγμα Χρησης

Στυλ

Μαζική Εγκατάσταση Widget Μέτρησης Σχολίων

Βασικη Εγκατασταση

Πως Λειτουργει

Επιλογες Διαμορφωσης

Παραδειγμα απο τον Πραγματικο Κοσμο

Ζητηματα Αποδοσης

Πολλαπλα Στοιχεια με το Ιδιο URL ID

Τοπικοποιηση

Ποτε να Χρησιμοποιησετε Bulk εναντι Single Widget

APIs Μέτρησης Σχολίων

Δημοσιοι Αριθμοι Σχολιων

Συμπεριφορα Δημοσιων Endpoints / Caching

Server-Side APIs / SDK

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

Εγκατάσταση

APIs Μέτρησης Σχολίων

Εγκατάσταση Widget Μέτρησης Σχολίων

Βασικη Εγκατασταση

Επιλογες Διαμορφωσης

Προχωρημενα Παραδειγματα

Προσαρμοσμενο URL ID

Εμφανιση Μονο Αριθμου

Ζωντανες Ενημερωσεις

Μεθοδοι Widget

Παραδειγμα Χρησης

Στυλ

Μαζική Εγκατάσταση Widget Μέτρησης Σχολίων

Βασικη Εγκατασταση

Πως Λειτουργει

Επιλογες Διαμορφωσης

Παραδειγμα απο τον Πραγματικο Κοσμο

Ζητηματα Αποδοσης

Πολλαπλα Στοιχεια με το Ιδιο URL ID

Τοπικοποιηση

Ποτε να Χρησιμοποιησετε Bulk εναντι Single Widget

APIs Μέτρησης Σχολίων

Δημοσιοι Αριθμοι Σχολιων

Συμπεριφορα Δημοσιων Endpoints / Caching

Server-Side APIs / SDK