FastComments.com

Bir Web Sitesine Yorum Ekleme

Kurulum

FastComments, web sitenize yorum eklemeyi kolaylaştırır; siteniz statik veya dinamik, açık veya koyu tema, halka açık veya dahili sayfalar olsun fark etmez. Kurulumu kolay olmalı ve her tür site veya web tabanlı uygulamaya uyarlanabilmelidir. Bu, birçok durumda ilave yapılandırma gerekmeden hemen canlı yorum yapabilmenizi sağlar.

WordPress Internal Link

WordPress sitenize yorum eklemek için WordPress eklentimizi burada bulabilirsiniz.

Eklentiyle ilgili eksiksiz kurulum kılavuzu ve dokümantasyon burada.

Bu eklenti canlı yorum yapmayı, SSO'yu ve kod gerektirmeyen kurulumu destekler. Yönetici sayfasındaki kurulum kılavuzunu izleyin eklentiyi yükledikten sonra. Kurulum kılavuzu, WordPress kurulumunuzu hesabınıza bağlamanız konusunda size rehberlik edecektir.

FastComments aracılığıyla WordPress eklentimiz üzerinden bırakılan herhangi bir yorum, WordPress kurulumunuza otomatik olarak geri senkronize edilebilir, böylece verileriniz üzerinde kontrolü elinizde tutarsınız. Bu, WordPress veritabanınızın boyutunu sınırlamak için kapatılabilir.

VanillaJS / HTML Kod Parçası Internal Link

The VanillaJS sürümü olan widget, web sitenize yorum eklemenin en basit yoludur; herhangi bir derleme sistemi veya sunucu tarafı kodu gerektirmez.

Yorumları sitenize eklemek için aşağıdaki kod parçasını herhangi bir sayfaya eklemeniz yeterlidir:

Simple Code Snippet
Copy CopyRun External Link
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

Aynı kod parçasını birçok sayfada kullanabilirsiniz; sayfa başına otomatik olarak ayrı bir konu oluşturur.

Birçok uygulamada "HTML Embed Code" seçeneği bulunur. Bunu seçin ve yukarıdaki kod parçasını yapıştırın.

Denemek için bir hesabınızın olması da gerekmiyor! Giriş yapmadıysanız yukarıdaki kod parçasında "tenantId: demo" görebilirsiniz. Bu durumda demo hesabı kullanılacaktır.

Widget'ı yapılandırma ile ilgili dokümantasyonu burada bulabilirsiniz.

FastComments widget'ının tüm sürümleri, çekirdek VanillaJS kütüphanesi etrafında sarma (wrapper) yapılarıdır. Bu, özellik eklememize ve sorunları tek bir yerde düzeltmemize olanak tanır — ve yapılan değişiklikler yorum widget'ının diğer varyantlarına otomatik olarak yansır.

Angular Internal Link

Angular ile oluşturulmuş bir siteye yorum eklemek için Angular kütüphanemizi NPM'de burada bulabilirsiniz.

FastComments Angular yorum bileşeni VanillaJS sürümüyle aynı tüm özellikleri destekler - canlı yorum, sso vb.

fastcomments-typescript'e ihtiyacınız olacak; bu bir eş bağımlılıktır. Lütfen bunun TypeScript derlemenize dahil edildiğinden emin olun. Gelecekte bu eş bağımlılık @types/fastcomments'e taşınacak ve bu kurulumu basitleştirecektir.

FastComments Angular - NPM üzerinden
Copy Copy
1
2 npm install fastcomments-typescript --save
3 npm install ngx-fastcomments --save
4

Eş bağımlılık tsconfig.json dosyanıza eklenmelidir, örneğin:

fastcomments-typescript peer bağımlılığını ekleme
Copy Copy
1
2"include": [
3 "src/**/*.ts",
4 "node_modules/fastcomments-typescript/src/index.ts"
5],
6

Daha sonra, FastCommentsModule'u uygulamanıza ekleyin:

Uygulamanıza Modülü Ekleyin
Copy 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

Kullanım

Başlamak için demo tenant için bir yapılandırma (config) nesnesi geçiriyoruz:

Kullanım - Satır İçi Yapılandırma
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo' }"></lib-fastcomments>
3

Yapılandırma oldukça karmaşık hale gelebileceğinden, bir nesne referansı geçebiliriz:

Kullanım - Yapılandırma için Nesne Geçirme
Copy Copy
1
2<lib-fastcomments [config]="fastcommentsConfig"></lib-fastcomments>
3
Kullanım - AB
Copy Copy
1
2<lib-fastcomments [config]="{ tenantId: 'demo', region: 'eu' }"></lib-fastcomments>
3

Bileşen değişiklik algılama kullanır, bu yüzden yapılandırma nesnesinin herhangi bir özelliğini değiştirmek bileşenin yeniden yüklenmesine neden olacaktır.

Angular bileşeninin desteklediği yapılandırmayı burada bulabilirsiniz.

React Internal Link

React ile oluşturulmuş bir siteye yorum eklemek için React kütüphanemizi NPM üzerinde burada bulabilirsiniz.

FastComments React yorum widget'ı, VanillaJS sürümünün tüm özelliklerini destekler - canlı yorumlama, sso ve benzeri.

NPM ile FastComments React
Copy Copy
1
2npm install --save fastcomments-react
3
Yarn ile FastComments React
Copy Copy
1
2yarn add fastcomments-react
3
React Örneği
Copy 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

AB'deyseniz, region parametresini şu şekilde ayarlamanız gerekecek:

React Örneği - AB
Copy Copy
1
2 <FastCommentsCommentWidget tenantId="demo" region="eu" />
3

React bileşeninin desteklediği yapılandırmayı burada bulabilirsiniz.

Vue Internal Link

Vue ile oluşturulmuş web sitenize yorum eklemek için Vue kütüphanemizi NPM'de burada bulabilirsiniz.

Ayrıca, vue-next kütüphanesi NPM'de burada

Kaynak kodu GitHub'da bulunabilir.

FastComments Vue yorum bileşeni VanillaJS olanla aynı tüm özellikleri destekler - canlı yorum, sso ve benzeri.

Aşağıdaki talimatlar Vue 3 içindir çünkü bir süredir kullanımdadır, ancak FastComments ayrıca Vue 2'yi fastcomments-vue kütüphanesi aracılığıyla da destekler.

FastComments Vue via NPM
Copy Copy
1
2npm install --save fastcomments-vue-next
3
FastComments Vue via Yarn
Copy Copy
1
2yarn add fastcomments-vue-next
3
Vue Example
Copy 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

Eğer AB içindeyseniz, region değerini EU olarak ayarlamak isteyebilirsiniz:

FastComments Vue - EU
Copy Copy
1
2<fast-comments v-bind:config="{tenantId: 'demo', region: 'eu'}"/>
3

fastcomments-vue ve fastcomments-vue-next kütüphaneleri, VanillaJS yorum bileşeniyle aynı yapılandırmayı destekler.

Vue bileşeninin desteklediği yapılandırmayı burada bulabilirsiniz.

TypeScript Internal Link

Yorum widget'ına geçirilen tüm yapılandırma için türleri içeren FastComments TypeScript tanımları NPM'de burada bulunabilir.

GitHub'da burada bulabilirsiniz.

Aynı Sayfada Birden Fazla Örnek Internal Link

Yorum widget'ının her örneği izole edilmiştir. Bu nedenle, FastComments doğası gereği sayfa başına birden fazla örneği veya aynı sohbet dizisini işaret eden birden fazla örneği destekler.

Örneğin VanillaJS kütüphanesi durumunda, yorum widget'ını farklı DOM düğümlerine bağlamanız yeterlidir. Sayfadaki geçerli diziyi güncellemek istiyorsanız, Sayfayı Yeniden Yüklemeden Yorum Dizilerini Değiştirme bölümüne bakın;

Birden Fazla Örnek Arasında Kimlik Doğrulama Durumunu Senkronize Etme

Kendi yorum dizisine sahip sık sorulan sorular listesi olan özel bir tek sayfa uygulaması örneğini inceleyelim.

Bu durumda, DOM'da aynı anda birden fazla FastComments örneğimiz var.

Bu sorun değil, ancak kullanıcı deneyimi için bazı zorluklar ortaya çıkarır.

Bu akışı düşünün:

  1. Kullanıcı, her biri kendi yorum widget'ına sahip sorular listesi olan bir sayfayı ziyaret eder.
  2. Kullanıcı kullanıcı adını ve e-postasını girer ve dizilerden birine bir soru bırakır.
  3. Sorusu olan başka bir SSS öğesi görürler.
  4. Tekrar yorum yapmaya giderler. E-postalarını ve kullanıcı adlarını tekrar girmek zorundalar mı?

Bu durumda, FastComments widget örnekleri arasında kimlik doğrulama durumunu sizin için senkronize eder. Dördüncü adımda, aynı sayfada kullanıcı adını ve e-postasını girdikleri için kullanıcı zaten geçici olarak kimlik doğrulaması yapmış olacaktır.

Yaygın Kullanım Senaryoları Internal Link

Canlı Yorumları Hemen Gösterme

Yorum bileşeni varsayılan olarak canlıdır, ancak sayfa içeriğinin kaymasını önlemek için canlı yorumlar bir "N Yeni Yorum Göster" düğmesinin altında görünür.

Bazı durumlarda, yeni yorumların bir düğmeye tıklamaya gerek kalmadan hemen gösterilmesi yine de istenebilir.

Bu durumda, burada belgelerini bulabileceğiniz showLiveRightAway bayrağını etkinleştirmek istersiniz.

Anonim Yorumlamaya İzin Verme (E-posta Gerektirmeme)

Varsayılan olarak, FastComments kullanıcının yorum yaparken bir e-posta bırakmasını ister.

Bu devre dışı bırakılabilir, talimatlar burada.

Ziyaretçileri bir kullanıcı adı seçme zahmetinden de kurtarmak için, FastComments her ziyaretçi için bir tane oluşturabilir.

Özel Stil Uygulama

Müşterilerimizin çoğu yorum bileşenine kendi stillerini uygular. Belgeleri burada bulabilirsiniz.

Aynı Yorumları Birden Fazla Alan Adında Gösterme

Aynı yorumları birden fazla sitede göstermek, FastComments'in kutudan çıktığı gibi desteklediği bir özelliktir. Bu konudaki belgelerimize bakın.

Mevcut Sayfayı Değiştirme

FastComments SPA'ları ve karmaşık uygulamaları destekler. Mevcut sayfayı değiştirmek kolaydır ve burada ele alınmıştır.