Installation | FastComments Docs

Instalacja

FastComments zaprojektowano tak, aby można go było zainstalować na dowolnej stronie - statycznej lub dynamicznej, w jasnym lub ciemnym motywie, na stronach publicznych lub wewnętrznych. Powinno być łatwe do zainstalowania i dostosowania do dowolnej witryny lub aplikacji webowej.

WordPress

Naszą wtyczkę WordPress możesz znaleźć tutaj.

Kompletny przewodnik instalacji i dokumentacja wtyczki są dostępne tutaj.

Ta wtyczka obsługuje komentarze na żywo, SSO i instalację bez kodu. Po prostu postępuj zgodnie z przewodnikiem instalacji na stronie administratora po zainstalowaniu wtyczki. Przeprowadzi Cię przez połączenie instalacji WordPress z Twoim kontem.

Wszystkie komentarze pozostawione za pomocą FastComments przez naszą wtyczkę WordPress mogą być automatycznie synchronizowane z Twoją instalacją WordPress, abyś zachował kontrolę nad swoimi danymi. Można to wyłączyć, aby ograniczyć rozmiar bazy danych WordPress.

VanillaJS / fragment HTML

Wersja VanillaJS widgetu jest bardzo łatwa do zainstalowania, nie wymaga systemów budowania ani kodu po stronie serwera.

Po prostu dodaj następujący fragment kodu do dowolnej strony:

Simple Code Snippet
Copy Run 
<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo"
}];
</script>

Możesz używać tego samego fragmentu kodu na wielu stronach; automatycznie utworzy osobny wątek dla każdej strony.

Wiele aplikacji ma opcję "Kod osadzania HTML". Wybierz ją i wklej powyższy fragment kodu.

Nie potrzebujesz też konta, aby wypróbować! Możesz zobaczyć "tenantId: demo" w powyższym fragmencie, jeśli nie jesteś zalogowany. W ten sposób zostanie użyte konto demonstracyjne.

Dokumentację dotyczącą konfiguracji widgetu możesz znaleźć tutaj.

Wszystkie wersje widgetu FastComments są wrapperami wokół głównej biblioteki VanillaJS. Pozwala nam to dodawać funkcje i naprawiać problemy w jednym miejscu - a zmiany automatycznie propagują się do innych wariantów widgetu komentarzy.

Angular

Naszą bibliotekę Angular możesz znaleźć na NPM tutaj.

Widget komentarzy FastComments dla Angular obsługuje wszystkie te same funkcje co wersja VanillaJS - komentarze na żywo, SSO i więcej.

Będziesz potrzebować fastcomments-typescript, która jest zależnością peer. Upewnij się, że jest uwzględniona w kompilacji TypeScript. W przyszłości ta zależność peer zostanie przeniesiona do @types/fastcomments, co uprości tę instalację.

FastComments Angular via NPM

Copy

  npm install fastcomments-typescript --save
  npm install ngx-fastcomments --save

Zależność peer powinna być dodana w pliku tsconfig.json, na przykład:

Adding fastcomments-typescript peer dependency

Copy

"include": [
  "src/**/*.ts",
  "node_modules/fastcomments-typescript/src/index.ts"
],

Następnie dodaj FastCommentsModule do swojej aplikacji:

Add The Module to Your App

Copy

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FastCommentsModule } from 'ngx-fastcomments';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FastCommentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Użycie

Aby rozpocząć, przekazujemy obiekt konfiguracji dla tenanta demo:

Usage - Inline Configuration

Copy

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

Ponieważ konfiguracja może być dość skomplikowana, możemy przekazać referencję do obiektu:

Usage - Pass Object for Configuration

Copy

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

Usage - EU

Copy

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

Widget używa wykrywania zmian, więc zmiana dowolnych właściwości obiektu konfiguracji spowoduje jego przeładowanie.

Konfigurację obsługiwaną przez komponent Angular możesz znaleźć tutaj.

React

Naszą bibliotekę React możesz znaleźć na NPM tutaj.

Widget komentarzy FastComments dla React obsługuje wszystkie te same funkcje co wersja VanillaJS - komentarze na żywo, SSO i więcej.

FastComments React via NPM

Copy

npm install --save fastcomments-react

FastComments React via Yarn

Copy

yarn add fastcomments-react

React Example

Copy

import React, { Component } from 'react'
import {FastCommentsCommentWidget} from 'fastcomments-react'
class Example extends Component {
  render() {
    return <FastCommentsCommentWidget tenantId="demo" />
  }
}

Jeśli jesteś w UE, będziesz chciał ustawić parametr region w następujący sposób:

React Example - EU

Copy

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

Konfigurację obsługiwaną przez komponent React możesz znaleźć tutaj.

React Native

Naszą bibliotekę React Native możesz znaleźć na NPM tutaj.

Widget komentarzy FastComments dla React Native obsługuje wszystkie te same funkcje co wersja VanillaJS - komentarze na żywo, SSO i więcej.

FastComments React Native via NPM

Copy

npm install --save fastcomments-react-native

FastComments React Native via Yarn

Copy

yarn add fastcomments-react-native

Konfiguracja jest określana nieco inaczej w porównaniu z biblioteką fastcomments-react:

React Native Example

Copy

import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
  const tenantId = 'demo'; // Your tenant id. Can be fetched from https://fastcomments.com/auth/my-account/api-secret
  const pageId = 'native-test'; // the ID or URL of the comment thread in your app.
  const config = {
    tenantId: tenantId,
    urlId: pageId
  };
  return (
      <FastCommentsCommentWidget config={config}/>
  );

Jeśli jesteś w UE, będziesz chciał ustawić parametr region:

React Native - EU

Copy

  // ...
  const config = {
    tenantId: tenantId,
    urlId: pageId,
    region: 'eu'
  };
  // ...

Konfigurację obsługiwaną przez komponent React Native możesz znaleźć tutaj.

Vue

Naszą bibliotekę Vue możesz znaleźć na NPM tutaj.

Dodatkowo biblioteka vue-next jest dostępna na NPM tutaj

Kod źródłowy można znaleźć na GitHub.

Widget komentarzy FastComments dla Vue obsługuje wszystkie te same funkcje co wersja VanillaJS - komentarze na żywo, SSO i więcej.

Poniższe instrukcje dotyczą Vue 3, ponieważ jest dostępne od jakiegoś czasu, jednak FastComments obsługuje również Vue 2 poprzez bibliotekę fastcomments-vue.

FastComments Vue via NPM

Copy

npm install --save fastcomments-vue-next

FastComments Vue via Yarn

Copy

yarn add fastcomments-vue-next

Vue Example

Copy

<template>
  <img alt="Vue logo" src="./assets/logo.png">
    <fast-comments v-bind:config="{tenantId: 'demo'}"/>
</template>
<script>
import {FastComments} from 'fastcomments-vue-next';
export default {
  name: 'App',
  components: {
    FastComments
  }
}
</script>

Jeśli jesteś w UE, będziesz chciał ustawić region na EU:

FastComments Vue - EU

Copy

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

Biblioteki fastcomments-vue i fastcomments-vue-next obsługują tę samą konfigurację co widget komentarzy VanillaJS.

Konfigurację obsługiwaną przez komponent Vue możesz znaleźć tutaj.

TypeScript

Definicje TypeScript dla FastComments, które zawierają typy dla całej konfiguracji przekazywanej do widgetu komentarzy, można znaleźć na NPM tutaj.

Możesz je znaleźć na GitHub tutaj.

Wiele instancji na tej samej stronie

Każda instancja widgetu komentarzy jest izolowana. Z tego powodu FastComments natywnie obsługuje więcej niż jedną instancję na stronie lub wiele instancji wskazujących na ten sam wątek czatu.

W przypadku biblioteki VanillaJS na przykład, wystarczy powiązać widget komentarzy z różnymi węzłami DOM. Jeśli chcesz po prostu zaktualizować bieżący wątek na stronie, zobacz Przełączanie wątków komentarzy bez przeładowania strony;

Synchronizacja stanu uwierzytelnienia między wieloma instancjami

Przeanalizujmy przykład niestandardowej aplikacji single-page, która jest listą często zadawanych pytań z własnym wątkiem komentarzy.

W tym przypadku mamy wiele instancji FastComments w DOM jednocześnie.

Jest to w porządku, ale stwarza pewne wyzwania dla doświadczenia użytkownika.

Rozważ ten przepływ:

Użytkownik odwiedza stronę z listą pytań, każde z własnym widgetem komentarzy.
Użytkownik wprowadza swoją nazwę użytkownika i email i zostawia pytanie w jednym z wątków.
Widzi kolejny element FAQ, o który ma pytanie.
Idzie skomentować ponownie. Czy musi ponownie wprowadzić swój email i nazwę użytkownika?

W tym przypadku FastComments obsługuje synchronizację stanu uwierzytelnienia między instancjami widgetu za Ciebie. W kroku czwartym użytkownik będzie już tymczasowo uwierzytelniony, ponieważ wprowadził swoją nazwę użytkownika i email na tej samej stronie.

Typowe przypadki użycia

Pokazywanie komentarzy na żywo od razu

Widget komentarzy jest domyślnie na żywo, jednak komentarze na żywo pojawiają się pod przyciskiem "Pokaż N nowych komentarzy", aby zapobiec przesuwaniu się zawartości strony.

W niektórych przypadkach nadal pożądane jest pokazanie nowych komentarzy od razu, bez konieczności klikania przycisku.

W tym przypadku będziesz chciał włączyć flagę showLiveRightAway, której dokumentację możesz znaleźć tutaj.

Zezwalanie na anonimowe komentowanie (niewymaganie emaila)

Domyślnie FastComments wymaga, aby użytkownik zostawił email podczas komentowania.

Można to wyłączyć, instrukcje są tutaj.

Niestandardowy styl

Wielu naszych klientów stosuje własny styl do widgetu komentarzy. Dokumentację możesz znaleźć tutaj.

Pokazywanie tych samych komentarzy na wielu domenach

Pokazywanie tych samych komentarzy na wielu stronach to coś, co FastComments obsługuje natywnie. Zobacz naszą dokumentację na ten temat.

Zmiana bieżącej strony

FastComments obsługuje SPA i złożone aplikacje. Zmiana bieżącej strony jest łatwa i jest omówiona tutaj.

Debugowanie typowych problemów

Oto niektóre symptomy, które często spotykamy, i typowe rozwiązania.

Komunikat "This is a demo"

Jest to pokazywane, gdy skopiowałeś kod widgetu z naszej strony głównej, która używa naszego tenanta demo. Aby użyć swojego tenanta, skopiuj kod widgetu stąd.

Błąd "FastComments cannot load on this domain"

FastComments musi wiedzieć, które domeny należą do Ciebie, aby uwierzytelniać żądania związane z Twoim kontem. Sprawdź naszą dokumentację, aby zobaczyć, jak rozwiązać ten błąd (po prostu dodaj dokładną subdomenę + domenę do swojego konta).

Należy pamiętać, że powinno to wystąpić dopiero po zakończeniu okresu próbnego. W okresie próbnym wszelkie żądania z nowych domen zostaną automatycznie dodane do Twojego konta.

Zmigrowane komentarze nie pokazują się dla niestandardowych instalacji

Zwykle dzieje się tak, gdy zaimportowane komentarze są powiązane z Page ID, a Ty przekazujesz URL (lub brak wartości, w którym to przypadku domyślnie używany jest URL strony).

Możesz to debugować, eksportując swoje komentarze i przeglądając kolumnę URL ID (obecnie Kolumna B).

Upewnij się, że wartości widoczne w kolumnie URL ID są tymi samymi wartościami, które przekazujesz do konfiguracji widgetu jako parametr urlId.

Aby uzyskać dalsze wyjaśnienia, spróbuj przeczytać naszą dokumentację o tym, jak komentarze są powiązane ze stronami i artykułami.

Jeśli wszystko inne zawiedzie, skontaktuj się z nami.

Jeśli widget komentarzy się nie pokazuje, sprawdź konsolę deweloperską Chrome pod kątem błędów.

Przy większości błędnych konfiguracji widget komentarzy przynajmniej pokaże błąd na stronie, jeśli jest w stanie się załadować. Niewidzenie niczego jest zwykle oznaką błędu skryptowego.

Pożądana konfiguracja nie działa zgodnie z oczekiwaniami

Wypróbuj nasze rozszerzenie Chrome, aby zobaczyć, jaka konfiguracja jest przekazywana do widgetu komentarzy. Jeśli wszystko zawiedzie, zrób zrzut ekranu tego, co pokazuje rozszerzenie Chrome i skontaktuj się z nami.

Brakujące komentarze na tym samym URL z innym hash bangiem

Domyślnie FastComments użyje URL strony jako "bucket", gdzie przechowywane są komentarze. Jeśli Twoje URL-e zawierają #hashbangi, a te #hashbangi nie powinny być częścią identyfikatora identyfikującego wątek komentarzy, możemy po prostu zignorować wartość hash bang, na przykład:

Ignore Hash Bangs Example

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
    tenantId: "demo",
    url: location.href.replace(location.hash, ''),
    urlId: location.href.replace(location.hash, '')
});
</script>

Należy pamiętać, że po dokonaniu tej zmiany będzie trzeba przeprowadzić migrację dla istniejących komentarzy. W tym celu skontaktuj się z nami.

Domyślnie FastComments użyje URL strony jako "bucket", gdzie przechowywane są komentarze. Jeśli Twoje URL-e zawierają parametry zapytania, które nie powinny być częścią identyfikatora identyfikującego wątek komentarzy, możemy po prostu je zignorować, na przykład:

Ignore Query Parameters

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.FastCommentsUI(document.getElementById('fastcomments-widget'), {
    tenantId: "demo",
    url: location.protocol + '//' + location.host + location.pathname,
    urlId: location.pathname
});
</script>

Należy pamiętać, że po dokonaniu tej zmiany będzie trzeba przeprowadzić migrację dla istniejących komentarzy. W tym celu skontaktuj się z nami.

Nie otrzymujesz emaili

W FastComments wkładamy dużo pracy w zapewnienie, że nasza dostawę emaili jest jak najbardziej niezawodna. Jednak niektórzy dostawcy poczty elektronicznej są notorycznie trudni do niezawodnego dotarcia. Sprawdź folder spam w poszukiwaniu wiadomości od fastcomments.com.

Jeśli skontaktujesz się z nami, zwykle możemy zapewnić więcej informacji o tym, dlaczego możesz nie widzieć emaili od nas.

Notion i Google Sites

Chcesz dodać komentarze do swoich stron Notion? Mamy rozwiązanie.

Notion

Aby dodać komentowanie do dokumentów Notion, zobacz film wyjaśniający tutaj.

Google Sites

Google Sites jest również obsługiwane, a przepływ jest podobny.

Utwórz konwersację do osadzenia.
Podczas edycji swojej strony Google Site, przejdź do Wstaw -> Osadź. Wybierz Według URL.
Wklej URL z Kroku 1.
Naciśnij Wstaw. Gotowe!

Uwaga: Komentarze nie pojawią się do momentu publikacji

Nimbus Note

Dodawanie komentarzy na żywo do Nimbus Note jest również obsługiwane, a przepływ jest podobny do Notion.

Utwórz konwersację do osadzenia.
Podczas edycji swojej notatki, dodaj blok osadzania.
Użyj URL z Kroku 1 jako URL do osadzenia.
Gotowe!

Następny przewodnik

Wtyczki firm trzecich

Instalacje niestandardowe

Osadzanie w dokumentach

Instalacja

WordPress

VanillaJS / fragment HTML

Angular

Użycie

React

React Native

Vue

TypeScript

Wiele instancji na tej samej stronie

Synchronizacja stanu uwierzytelnienia między wieloma instancjami

Typowe przypadki użycia

Pokazywanie komentarzy na żywo od razu

Zezwalanie na anonimowe komentowanie (niewymaganie emaila)

Niestandardowy styl

Pokazywanie tych samych komentarzy na wielu domenach

Zmiana bieżącej strony

Debugowanie typowych problemów

Komunikat "This is a demo"

Błąd "FastComments cannot load on this domain"

Zmigrowane komentarze nie pokazują się dla niestandardowych instalacji

Widget komentarzy się nie pokazuje

Pożądana konfiguracja nie działa zgodnie z oczekiwaniami

Brakujące komentarze na tym samym URL z innym hash bangiem

Parametry zapytania URL wpływają na widget

Nie otrzymujesz emaili

Notion i Google Sites

Notion

Google Sites

Nimbus Note

Język 🇵🇱 Polski

Wtyczki firm trzecich

Instalacje niestandardowe

Osadzanie w dokumentach

Instalacja

WordPress

VanillaJS / fragment HTML

Angular

Użycie

React

React Native

Vue

TypeScript

Wiele instancji na tej samej stronie

Synchronizacja stanu uwierzytelnienia między wieloma instancjami

Typowe przypadki użycia

Pokazywanie komentarzy na żywo od razu

Zezwalanie na anonimowe komentowanie (niewymaganie emaila)

Niestandardowy styl

Pokazywanie tych samych komentarzy na wielu domenach

Zmiana bieżącej strony

Debugowanie typowych problemów

Komunikat "This is a demo"

Błąd "FastComments cannot load on this domain"

Zmigrowane komentarze nie pokazują się dla niestandardowych instalacji

Widget komentarzy się nie pokazuje

Pożądana konfiguracja nie działa zgodnie z oczekiwaniami

Brakujące komentarze na tym samym URL z innym hash bangiem

Parametry zapytania URL wpływają na widget

Nie otrzymujesz emaili

Notion i Google Sites

Notion

Google Sites

Nimbus Note