Add Comments To a Website

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 zastosowania

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 często spotykane objawy i typowe rozwiązania.

Komunikat "This is a demo"

Ten komunikat pojawia się, gdy skopiowałeś kod widżetu z naszej strony głównej, która używa naszego demo tenant. Aby użyć swojego tenant, skopiuj kod widżetu z tutaj.

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. Zapoznaj się z naszą dokumentacją, aby zobaczyć, jak rozwiązać ten błąd (wystarczy dodać dokładny subdomenę + domenę do swojego konta).

Zwróć uwagę, że powinno się to zdarzyć dopiero po zakończeniu okresu próbnego. W trakcie okresu próbnego żądania z nowych domen będą automatycznie dodawane do Twojego konta.

Przeniesione komentarze nie wyświetlają się w niestandardowych instalacjach

Zazwyczaj dzieje się tak, gdy zaimportowane komentarze są powiązane z Page ID, a Ty przekazujesz URL (lub żadnej wartości, wtedy domyślnie używany jest URL strony).

Możesz to zdebugować, 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 widżetu jako parametr urlId.

Aby uzyskać dalsze wyjaśnienia, przeczytaj naszą dokumentację: Jak komentarze są powiązane ze stronami i artykułami.

Jeśli nic nie pomaga, skontaktuj się z nami.

Widżet komentarzy się nie wyświetla

Jeśli widżet komentarzy się nie wyświetla, sprawdź konsolę deweloperską Chrome pod kątem błędów.

W przypadku większości błędnych konfiguracji widżet komentarzy przynajmniej pokaże błąd na stronie, jeśli uda mu się załadować. Brak jakichkolwiek komunikatów zwykle wskazuje na błąd skryptu.

Żądana konfiguracja nie działa zgodnie z oczekiwaniami

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

Brak komentarzy przy tym samym URL z różnymi hashbangami

Domyślnie FastComments używa URL strony jako "bucketu", w którym przechowywane są komentarze. Jeśli Twoje URL zawierają #hashbangs, a te #hashbangs nie powinny być częścią identyfikatora wątków komentarzy, możemy po prostu zignorować wartość hash banga, na przykład:

Przykład ignorowania hashbangów

Copy

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

Zwróć uwagę, że po wprowadzeniu tej zmiany będzie trzeba wykonać migrację istniejących komentarzy. W tym celu skontaktuj się z nami.

Parametry zapytania URL wpływające na widżet

Domyślnie FastComments używa URL strony jako "bucketu", w którym przechowywane są komentarze. Jeśli Twoje URL zawierają parametry zapytania, które nie powinny być częścią identyfikatora wątku komentarzy, możemy je po prostu zignorować, na przykład:

Ignoruj parametry zapytania

Copy

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: "demo",
    url: location.protocol + '//' + location.host + location.pathname,
    urlId: location.pathname
}];
</script>

Zwróć uwagę, że po wprowadzeniu tej zmiany będzie trzeba wykonać migrację istniejących komentarzy. W tym celu skontaktuj się z nami.

Nie otrzymujesz e-maili

W FastComments wkładamy wiele pracy, aby zapewnić jak największą niezawodność dostarczania e-maili. Jednak niektórzy dostawcy poczty są wyjątkowo trudni do obsługi pod względem dostarczania wiadomości. Sprawdź folder spam dla wiadomości od fastcomments.com.

Jeśli skontaktujesz się z nami, zwykle możemy udzielić więcej informacji, dlaczego możesz nie otrzymywać od nas e-maili.

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 zewnętrznych

Niestandardowe instalacje

Osadzanie w dokumentach

Add Comments To a Website

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 zastosowania

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"

Przeniesione komentarze nie wyświetlają się w niestandardowych instalacjach

Widżet komentarzy się nie wyświetla

Żądana konfiguracja nie działa zgodnie z oczekiwaniami

Brak komentarzy przy tym samym URL z różnymi hashbangami

Parametry zapytania URL wpływające na widżet

Nie otrzymujesz e-maili

Notion i Google Sites

Notion

Google Sites

Nimbus Note

Język 🇵🇱 Polski

Wtyczki firm zewnętrznych

Niestandardowe instalacje

Osadzanie w dokumentach

Add Comments To a Website

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 zastosowania

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"

Przeniesione komentarze nie wyświetlają się w niestandardowych instalacjach

Widżet komentarzy się nie wyświetla

Żądana konfiguracja nie działa zgodnie z oczekiwaniami

Brak komentarzy przy tym samym URL z różnymi hashbangami

Parametry zapytania URL wpływające na widżet

Nie otrzymujesz e-maili

Notion i Google Sites

Notion

Google Sites

Nimbus Note