Add Comments To a Website

Instalacja

FastComments umożliwia łatwe dodawanie komentarzy do Twojej strony internetowej, niezależnie od tego, czy jest ona statyczna czy dynamiczna, w jasnym czy ciemnym motywie, na stronach publicznych czy wewnętrznych. Powinno być prosto zainstalować i dostosować do każdego rodzaju strony lub aplikacji webowej. Dzięki temu otrzymujesz komentarze w czasie rzeczywistym od razu, w wielu przypadkach bez potrzeby dalszej konfiguracji.

WordPress

Aby dodać komentarze do swojej witryny WordPress, naszą wtyczkę WordPress znajdziesz tutaj.

Pełny przewodnik instalacji i dokumentacja dotycząca wtyczki znajdują się tutaj.

Ta wtyczka obsługuje komentowanie na żywo, SSO i instalację bez kodowania. Po prostu postępuj zgodnie z przewodnikiem instalacji na stronie administracyjnej po zainstalowaniu wtyczki. Przeprowadzi cię on przez proces połączenia instalacji WordPress z twoim kontem.

Wszystkie komentarze pozostawione za pomocą FastComments przez naszą wtyczkę WordPress mogą być automatycznie zsynchronizowane z powrotem do instalacji WordPress, dzięki czemu zachowujesz kontrolę nad swoimi danymi. Można to wyłączyć, aby ograniczyć rozmiar bazy danych WordPress.

VanillaJS / fragment HTML

Wersja widgetu VanillaJS jest najprostszym sposobem na dodanie komentarzy do Twojej witryny, nie wymagającym żadnych systemów budowania ani kodu po stronie serwera.

Po prostu dodaj poniższy fragment kodu do dowolnej strony, aby dodać komentarze do swojej witryny:

Prosty fragment kodu

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żyć tego samego fragmentu kodu na wielu stronach; automatycznie utworzy on oddzielny wątek dla każdej strony.

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

Nie potrzebujesz też konta, żeby to wypróbować! Możesz zobaczyć "tenantId: demo" w powyższym fragmencie, jeśli nie jesteś zalogowany. W ten sposób będzie używane konto demo.

Dokumentację dotyczącą konfigurowania widgetu znajdziesz tutaj.

Wszystkie wersje widgetu FastComments są nakładkami na rdzeń 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

Aby dodać komentarze do strony zbudowanej w Angularze, naszą bibliotekę Angular można znaleźć na NPM tutaj.

Widżet komentujący FastComments dla Angular obsługuje wszystkie te same funkcje co wersja VanillaJS — komentowanie na żywo, SSO i tak dalej.

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

FastComments Angular przez NPM

Copy

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

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

Dodawanie zależności peer fastcomments-typescript

Copy

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

Następnie dodaj FastCommentsModule do swojej aplikacji:

Dodaj moduł do aplikacji

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 zacząć, przekazujemy obiekt konfiguracyjny dla najemcy demo:

Użycie - konfiguracja inline

Copy

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

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

Użycie - przekazywanie obiektu konfiguracji

Copy

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

Użycie - EU

Copy

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

Widżet używa wykrywania zmian, więc zmiana dowolnej właściwości obiektu konfiguracyjnego spowoduje jego ponowne załadowanie.

Konfigurację wspieraną przez komponent Angular można znaleźć tutaj.

React

Aby dodać komentarze do witryny zbudowanej w React, naszą bibliotekę React można znaleźć na NPM tutaj.

Widżet komentowania FastComments dla React obsługuje wszystkie te same funkcje co wersja VanillaJS - komentowanie na żywo, sso i inne.

FastComments React przez NPM

Copy

npm install --save fastcomments-react

FastComments React przez Yarn

Copy

yarn add fastcomments-react

Przykład React

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, ustaw parametr region w następujący sposób:

Przykład React - UE

Copy

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

Możesz znaleźć konfigurację, którą obsługuje komponent React, tutaj.

React Native

Aby dodać komentarze do swojej aplikacji React Native, możesz znaleźć naszą bibliotekę React Native na NPM tutaj.

Widżet komentarzy FastComments dla React Native obsługuje wszystkie te same funkcje co wersja VanillaJS — komentowanie na żywo, SSO i tak dalej.

FastComments React Native przez NPM

Copy

npm install --save fastcomments-react-native

FastComments React Native przez Yarn

Copy

yarn add fastcomments-react-native

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

Przykład React Native

Copy

import { FastCommentsCommentWidget } from 'fastcomments-react-native';
// ...
  const tenantId = 'demo'; // Twój tenant id. Można pobrać z https://fastcomments.com/auth/my-account/api-secret
  const pageId = 'native-test'; // ID lub URL wątku komentarzy w twojej aplikacji.
  const config = {
    tenantId: tenantId,
    urlId: pageId
  };
  return (
      <FastCommentsCommentWidget config={config}/>
  );

Jeśli jesteś w UE, powinieneś ustawić parametr region:

React Native - UE

Copy

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

You can find the configuration the React Native component supports tutaj.

Vue

Aby dodać komentarze do swojej strony zbudowanej w Vue, możesz znaleźć naszą bibliotekę Vue na NPM tutaj.

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

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

Widget komentowania FastComments Vue obsługuje wszystkie te same funkcje co wersja VanillaJS - live commenting, sso, i tak dalej.

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 za pośrednictwem NPM

Copy

npm install --save fastcomments-vue-next

FastComments Vue za pośrednictwem Yarn

Copy

yarn add fastcomments-vue-next

Przykład Vue

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 znajdujesz się w UE, ustaw region na EU:

FastComments Vue - UE

Copy

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

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

Możesz znaleźć konfigurację, którą obsługuje komponent Vue, 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 stron Notion, Google Sites lub Nimbus Note? Mamy to.

Notion

Aby dodać komentowanie do dokumentów Notion, obejrzyj wideo wyjaśniające tutaj.

Google Sites

Google Sites jest również obsługiwany, a proces jest podobny.

Utwórz konwersację do osadzenia.
When editing your Google Site, navigate to Insert -> Embed. Select By URL.
Paste the URL from Step 1.
Hit Insert. Done!

Uwaga: komentarze nie pojawią się przed publikacją

Nimbus Note

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

Utwórz konwersację do osadzenia.
When editing your note, add an embed block.
Use the URL from Step 1 as the URL to embed.
Done!

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