Προσθήκη σχολίων σε έναν ιστότοπο

Για να προσθέσετε σχόλια στον ιστότοπό σας WordPress, μπορείτε να βρείτε το πρόσθετο WordPress μας εδώ.

Ολοκληρωμένος οδηγός εγκατάστασης και τεκμηρίωση για το πρόσθετο βρίσκονται εδώ.

Αυτό το πρόσθετο υποστηρίζει live commenting, SSO, και εγκατάσταση χωρίς κώδικα. Απλώς ακολουθήστε τον οδηγό εγκατάστασης στη σελίδα διαχείρισης μετά την εγκατάσταση του πρόσθετου. Θα σας καθοδηγήσει στη σύνδεση της εγκατάστασης WordPress με τον λογαριασμό σας.

Οποιαδήποτε σχόλια που αφήνονται με το FastComments μέσω του πρόσθετου WordPress μπορούν να συγχρονιστούν αυτόματα πίσω στην εγκατάσταση WordPress σας ώστε να διατηρείτε τον έλεγχο των δεδομένων σας. Αυτό μπορεί να απενεργοποιηθεί για να περιοριστεί το μέγεθος της βάσης δεδομένων WordPress σας.

Η έκδοση VanillaJS του widget είναι ο απλούστερος τρόπος για να προσθέσετε σχόλια στο site σας, χωρίς να απαιτούνται συστήματα build ή κώδικας από την πλευρά του server.

Απλά προσθέστε το παρακάτω απόσπασμα κώδικα σε οποιαδήποτε σελίδα για να προσθέσετε σχόλια στον ιστότοπό σας:

Simple Code Snippet

Copy Run

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

Μπορείτε να χρησιμοποιήσετε το ίδιο απόσπασμα κώδικα σε πολλές σελίδες· θα δημιουργεί αυτόματα ένα ξεχωριστό νήμα ανά σελίδα.

Πολλές εφαρμογές έχουν επιλογή «Κώδικας ενσωμάτωσης HTML». Επιλέξτε αυτή και επικολλήστε το παραπάνω απόσπασμα κώδικα.

Δεν χρειάζεστε λογαριασμό για να το δοκιμάσετε! Μπορεί να δείτε "tenantId: demo" στο παραπάνω απόσπασμα εάν δεν έχετε συνδεθεί. Με αυτόν τον τρόπο θα χρησιμοποιεί τον demo λογαριασμό.

Μπορείτε να βρείτε τεκμηρίωση για τη διαμόρφωση του widget εδώ.

Όλες οι εκδόσεις του FastComments widget είναι περιτυλίγματα γύρω από τη βασική βιβλιοθήκη VanillaJS. Αυτό μας επιτρέπει να προσθέτουμε λειτουργίες και να διορθώνουμε προβλήματα σε ένα σημείο - και οι αλλαγές προωθούνται αυτόματα στις άλλες παραλλαγές του widget σχολιασμού.

Για να προσθέσετε σχόλια σε μια ιστοσελίδα που έχει κατασκευαστεί με Angular, μπορείτε να βρείτε τη βιβλιοθήκη μας για Angular στο NPM εδώ.

Το στοιχείο σχολιασμού FastComments για Angular υποστηρίζει όλες τις ίδιες δυνατότητες με το VanillaJS — ζωντανούς σχολιασμούς, sso, κ.λπ.

Θα χρειαστείτε το fastcomments-typescript, το οποίο είναι μια εξάρτηση peer (peer dependency). Παρακαλούμε βεβαιωθείτε ότι αυτό περιλαμβάνεται στη μεταγλώττιση TypeScript σας. Στο μέλλον, αυτή η peer dependency θα μετακινηθεί σε @types/fastcomments, κάτι που θα απλοποιήσει αυτήν την εγκατάσταση.

FastComments Angular μέσω NPM

Copy

1

2 npm install fastcomments-typescript --save

3 npm install ngx-fastcomments --save

4

Η peer dependency πρέπει να προστεθεί στο αρχείο tsconfig.json σας, για παράδειγμα:

Προσθήκη fastcomments-typescript ως peer dependency

Copy

1

2"include": [

3 "src/**/*.ts",

4 "node_modules/fastcomments-typescript/src/index.ts"

5],

6

Στη συνέχεια, προσθέστε το FastCommentsModule στην εφαρμογή σας:

Προσθήκη του Module στην εφαρμογή σας

Copy

1

2import { BrowserModule } from '@angular/platform-browser';

3import { NgModule } from '@angular/core';

4

5import { AppComponent } from './app.component';

6import { FastCommentsModule } from 'ngx-fastcomments';

7

8@NgModule({

9 declarations: [

10 AppComponent

11 ],

12 imports: [

13 BrowserModule,

14 FastCommentsModule

15 ],

16 providers: [],

17 bootstrap: [AppComponent]

18})

19export class AppModule { }

20

Χρήση

Για να ξεκινήσετε, περνάμε ένα αντικείμενο διαμόρφωσης για τον demo tenant:

Χρήση - Ενσωματωμένη Διαμόρφωση

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>

3

Εφόσον η διαμόρφωση μπορεί να γίνει αρκετά περίπλοκη, μπορούμε να περάσουμε μια αναφορά σε αντικείμενο:

Χρήση - Πέρασμα Αντικειμένου για Διαμόρφωση

Copy

1

2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>

3

Χρήση - ΕΕ

Copy

1

2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>

3

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

Μπορείτε να βρείτε τη διαμόρφωση που υποστηρίζει το Angular component εδώ.

Για να προσθέσετε σχόλια σε έναν ιστότοπο φτιαγμένο με React, μπορείτε να βρείτε τη βιβλιοθήκη μας για React στο NPM εδώ.

Το widget σχολιασμού FastComments για React υποστηρίζει όλες τις ίδιες λειτουργίες με το αντίστοιχο για VanillaJS - σχολιασμό σε πραγματικό χρόνο, sso, κ.λπ.

FastComments React μέσω NPM

Copy

1

2npm install --save fastcomments-react

3

FastComments React μέσω Yarn

Copy

1

2yarn add fastcomments-react

3

Παράδειγμα React

Copy

1

2import React, { Component } from 'react'

3

4import {FastCommentsCommentWidget} from 'fastcomments-react'

5

6class Example extends Component {

7 render() {

8 return <FastCommentsCommentWidget tenantId="demo" />

9 }

10}

11

Αν βρίσκεστε στην ΕΕ, θα θελήσετε να ορίσετε την παράμετρο region ως εξής:

Παράδειγμα React - ΕΕ

Copy

1

2 <FastCommentsCommentWidget tenantId="demo" region="eu" />

3

Μπορείτε να βρείτε τη διαμόρφωση που υποστηρίζει το React component εδώ.

Για να προσθέσετε σχόλια στον ιστότοπό σας που έχει κατασκευαστεί με Vue, μπορείτε να βρείτε τη δική μας βιβλιοθήκη Vue στο NPM εδώ.

Επιπλέον, μια βιβλιοθήκη vue-next βρίσκεται στο NPM εδώ

Ο πηγαίος κώδικας είναι διαθέσιμος στο GitHub.

Το widget σχολιασμού FastComments Vue υποστηρίζει όλες τις ίδιες λειτουργίες με το VanillaJS - live commenting, sso, κ.λπ.

Οι παρακάτω οδηγίες αφορούν το Vue 3 καθώς έχει κυκλοφορήσει εδώ και κάποιο διάστημα, ωστόσο το FastComments υποστηρίζει επίσης το Vue 2 μέσω της βιβλιοθήκης fastcomments-vue.

FastComments Vue μέσω NPM

Copy

1

2npm install --save fastcomments-vue-next

3

FastComments Vue μέσω Yarn

Copy

1

2yarn add fastcomments-vue-next

3

Παράδειγμα Vue

Copy

1

2<template>

3 <img alt="Vue logo" src="./assets/logo.png">

4 <fast-comments v-bind:config="{tenantId: 'demo'}"/>

5</template>

6

7<script>

8import {FastComments} from 'fastcomments-vue-next';

9

10export default {

11 name: 'App',

12 components: {

13 FastComments

14 }

15}

16</script>

17

Αν βρίσκεστε στην ΕΕ, θα θελήσετε να ορίσετε το region σε EU:

FastComments Vue - ΕΕ

Copy

1

2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>

3

Οι βιβλιοθήκες fastcomments-vue και fastcomments-vue-next υποστηρίζουν την ίδια διαμόρφωση με το widget σχολιασμού VanillaJS.

Μπορείτε να βρείτε τη διαμόρφωση που υποστηρίζει το Vue component εδώ.

Οι ορισμοί TypeScript για το FastComments μπορούν να βρεθούν στο NPM εδώ.

Μπορείτε να τους βρείτε στο GitHub εδώ.

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

Στην περίπτωση της βιβλιοθήκης VanillaJS, για παράδειγμα, απλώς πρέπει να συνδέσετε το widget σχολίων με διαφορετικούς κόμβους DOM. Εάν θέλετε απλώς
να ενημερώσετε το τρέχον νήμα στη σελίδα, δείτε Αλλαγή Νημάτων Σχολίων Χωρίς Επαναφόρτωση Σελίδας;

Συγχρονισμός Κατάστασης Επαλήθευσης Σε Πολλαπλές Παρουσίες

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

Σε αυτήν την περίπτωση, έχουμε πολλαπλές παρουσίες του FastComments στο DOM ταυτόχρονα.

Αυτό είναι εντάξει, αλλά δημιουργεί κάποιες προκλήσεις για την εμπειρία του χρήστη.

Σκεφτείτε αυτή τη ροή:

1. Ο χρήστης επισκέπτεται τη σελίδα με μια λίστα ερωτήσεων, καθεμία με το δικό της widget σχολίων.
2. Ο χρήστης εισάγει το όνομα χρήστη και το email του και αφήνει μια ερώτηση σε ένα από τα νήματα.
3. Βλέπουν ένα άλλο στοιχείο FAQ για το οποίο έχουν ερώτηση.
4. Πηγαίνουν ξανά να σχολιάσουν. Πρέπει να εισάγουν ξανά το email και το όνομα χρήστη τους;

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

Showing Live Comments Right Away

Το widget σχολίων είναι ζωντανό από προεπιλογή, ωστόσο τα ζωντανά σχόλια εμφανίζονται κάτω από ένα κουμπί «Show N New Comments» για να αποτραπεί η μετακίνηση του περιεχομένου της σελίδας.

Σε ορισμένες περιπτώσεις, εξακολουθεί να είναι επιθυμητό να εμφανίζονται τα νέα σχόλια άμεσα, χωρίς να χρειάζεται να κάνετε κλικ σε κουμπί.

Σε αυτήν την περίπτωση, θέλετε να ενεργοποιήσετε τη σημαία showLiveRightAway, για την οποία μπορείτε να βρείτε τεκμηρίωση εδώ.

Allowing Anonymous Commenting (Not Requiring Email)

Από προεπιλογή, το FastComments απαιτεί από τον χρήστη να αφήσει ένα email όταν σχολιάζει.

Αυτό μπορεί να απενεργοποιηθεί, οι οδηγίες είναι εδώ.

Custom Styling

Πολλοί από τους πελάτες μας εφαρμόζουν το δικό τους στυλ στο widget σχολίων. Μπορείτε να βρείτε την τεκμηρίωση εδώ.

Showing The Same Comments on Multiple Domains

Η εμφάνιση των ίδιων σχολίων σε πολλαπλές ιστοσελίδες είναι κάτι που το FastComments υποστηρίζει έτοιμο. Δείτε την τεκμηρίωση για αυτό το θέμα.

Changing The Current Page

Το FastComments υποστηρίζει SPAs και σύνθετες εφαρμογές. Η αλλαγή της τρέχουσας σελίδας είναι εύκολη και καλύπτεται εδώ.