FastComments.com

Özelleştirmeler ve Yapılandırma

Özelleştirmeler ve Yapılandırma

Bağlam

Burada yorum bileşeninin desteklediği her özellik ve ayara dair ayrıntılı belgeleri bulacaksınız.

Bu dokümantasyon temel kavramları kapsayacak ve her işlevsellik alanına derinlemesine inecek; nasıl yapılır ve sık rastlanan tuzaklar hakkında bilgiler verecektir.

Kod örnekleri sağlanacak ve ilgili satırlar vurgulanacaktır. Uygun olduğunda yapılandırma sayfalarının ekran görüntüleri de sağlanacaktır.

Kod örnekleri saf JavaScript kütüphanemizi kullanacak, ancak yapılandırma seçenekleri yorum bileşeninin tüm sürümleri (React, Vue, vb.) için tam olarak aynı adları kullanır.

Bu kılavuzda açıklanan çoğu yapılandırma ve özellik herhangi bir kod yazmayı gerektirmez.

Aynı Yorumları Farklı Sayfalarda Görüntüleme Internal Link

urlId parametresi, yorumların hangi sayfaya veya id'ye bağlı olduğunu belirlememize izin verdiği için, bu sayfalarda urlId'yi aynı değere ayarlayabiliriz.

The Same Comments on Multiple Pages
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 "urlId": "https://example.com/source-page"
8}];
9</script>
10

Özel Yazı Tipleri Internal Link

FastComments özelleştirilmeye uygun olarak tasarlanmıştır ve widget'larımızın kullandığı yazı tipi de bunun istisnası değildir.

Varsayılan olarak, FastComments mümkün olduğunca geniş bir cihaz yelpazesinde iyi görünmesi için system font stack kullanır.

Kendi yazı tiplerinizi tanımlamak için, Özel CSS dokümantasyonu sayfasına bakın.

Orada, istediğiniz yazı tiplerini tanımlamanıza olanak sağlayacak özel CSS tanımlama yöntemini bulacaksınız.

Yazı Tipini Tanımlama

Yazı tipini geçersiz kılmak için, CSS'inizi .fast-comments, textarea seçicilerini kullanarak tanımlamanızı öneririz. Örneğin:

Özel Harici Yazı Tipi Örneği
Copy CopyRun External Link
1
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
3.fast-comments, textarea {
4 font-family: 'Roboto', sans-serif;
5}
6

Karanlık Arka Planları Destekleme (Karanlık Mod) Internal Link

Varsayılan olarak, FastComments yorum bileşeni çoğu sitede koyu modu otomatik olarak algılar.

Koyu mod algılandığında, FastComments beyaz arka plan üzerindeki siyah metinden siyah arka plan üzerindeki beyaz metne geçer. Görseller de değişir.

Sayfa yüklendiğinde, bileşen yorum bileşeninin arkasındaki sayfa arka planının ne kadar koyu olduğunu belirlemeye çalışır. Bu, sayfanın beyaz bir arka plana sahip olabileceği anlamına gelir; ancak yorum bileşenini siyah arka plana sahip bir kapsayıcı içine koyarsanız, yorumların okunabilir olması için koyu mod yine de otomatik olarak etkinleştirilmelidir.

Bununla birlikte, "luminance" belirlemeye dayanan algılama mekanizması istediğiniz zaman koyu modu etkinleştirmeyebilir. Zorla etkinleştirmek için hasDarkBackground bayrağını aşağıdaki gibi true olarak ayarlayın:

Force Dark Background Mode
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 "hasDarkBackground": true
8}];
9</script>
10

Yorumlardan Sayfalara Bağlantı Internal Link

Bildirim e-postaları gönderirken veya moderasyon sayfası gibi kullanıcı arayüzlerinde yorumları görüntülerken, yorumdan bulunduğu sayfaya bağlantı verebilmek faydalıdır.

URL ID her zaman bir ID değilse, URL'yi başka bir yerde saklamamız gerekir. "url" özelliği tam olarak bunun içindir ve şu şekilde tanımlanır.

Özel Bir URL Tanımlama
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 "url": "https://example.com/article-5"
8}];
9</script>
10

Yaygın bir kullanım senaryosu, yorum dizisini bir makale gibi bir tanımlayıcıya bağlamak ve ardından belirli bir sayfaya geri bağlantı vermektir, örneğin:

Özel URL ve URL ID'lerini Birlikte Tanımlama
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 "url": "https://example.com/article-5",
8 "urlId": "article-5"
9}];
10</script>
11

URL, yaygın pazarlama parametrelerinden temizlenmez. Varsayılan olarak, mevcut sayfa URL'si ne ise, yorumla birlikte saklanan URL odur.

Hangi Sayfanın Görüntüleneceğini Belirleme Internal Link

Yorumları getirirken ve render ederken, yorum bileşeninin hangi sayfadan başlayacağını bilmesi gerekir. Varsayılan olarak, o ilk sayfadan başlar, yalnızca o sayfayı render eder.

İstenirse, render edilecek tam sayfa, startingPage ayarı olarak yorum bileşenine geçirilebilir.

Specifying The Page to Render
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 "startingPage": 1
8}];
9</script>
10

Sayfa numaralarının sıfırdan başladığını unutmayın, bu yüzden yukarıdaki örnek ikinci sayfayı render eder.

Sayfayı Yenilemeden Yorum Dizilerini Değiştirme Internal Link

urlId değerinin, yorumların bağlı olduğu sayfa veya makale kimliği olduğunu ele almıştık.

Ayrıca, tekrar hatırlatmak gerekirse, tanımlanmadığı takdirde urlId varsayılan olarak geçerli sayfa URL'sini alır.

Peki, yorumların bağlı olduğu sayfa veya içerik sayfa yenilenmeden dinamik olarak değişen SPA'larda (Single-Page-Applications), yani Tek Sayfa Uygulamalarında durum nedir?

Angular, React, Vue, vb.

Angular ve React gibi kütüphanelerimizde, widget'a iletilen urlId özelliğini güncellemeniz yeterlidir; bu, yorum widget'ının yenilenmesine neden olur. Bunu, örneğin React uygulaması için burada iş başında görebilirsiniz.

VanillaJS

VanillaJS kütüphanesini kullanıyorsanız, Angular veya React gibi veri bağlamayı veya durum yayılımını yöneten bir framework olmadığı için bu biraz daha karmaşıktır.

VanillaJS widget'ını örneklediğinizde, widget'ı güncellemek için çağrılabilecek bazı fonksiyonlar döndürür.

İşte sayfa hash'ini değiştirdiğimiz ve yorum widget'ını güncellediğimiz işlevsel bir örnek:

Sayfa Hash Değiştirme Örneği
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<button id="change-page"></button>
4<div id="fastcomments-widget"></div>
5<script>
6 (function fastCommentsMain() {
7 let config = {
8 tenantId: 'demo'
9 };
10 let instance = window.FastCommentsUI(document.getElementById('fastcomments-widget'), config);
11
12 let page = '#page-1';
13 function getNextPage() {
14 if (page === '#page-1') {
15 return '#page-2';
16 } else {
17 return '#page-1';
18 }
19 }
20
21 let button = document.getElementById('change-page');
22 function nextPage() {
23 page = getNextPage();
24 button.innerText = 'Go to ' + getNextPage();
25 window.location.hash = page;
26 let locationString = window.location.toString();
27
28 config.url = locationString; // Bildirimlerin doğru sayfaya bağlanabilmesi için url değerini de güncelliyoruz
29 config.urlId = locationString;
30
31 instance.update(config);
32 }
33 nextPage();
34 button.addEventListener('click', nextPage);
35 })();
36</script>
37

Görsel Yönlendirmesini Devre Dışı Bırakma Internal Link

Varsayılan olarak FastComments kullanıcıların resim yüklemesine izin verir. Bir kullanıcı o resme tıkladığında, FastComments varsayılan olarak resmi tam boyutta göstermek için yeni bir sekme açar. Bu bayrağı true olarak ayarlamak bu davranışı devre dışı bırakır:

Disable Image Redirect
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 "disableImageRedirect": true
8}];
9</script>
10

Eğer resme yapılan tıklamayı kendiniz yakalamayı planlamıyorsanız (bkz. onImageClicked), resmin tıklanabilir göründüğü izlenimini kaldırmak için bunun bazı stil düzenlemeleriyle birlikte kullanılmasını öneririz.

Yeni Yorumları Vurgulama Internal Link

FastComments, yeni yorumları öne çıkarmak için birkaç yöntem sunar.

Her şeyden önce, varsayılan olarak uygulama içi bildirim tetikleyen yorumlar (yanıtlar, aynı konu içindeki yanıtlar veya abone olduğunuz bir sayfadaki yorumlar) kullanıcının avatarı hafifçe parlayacak şekilde otomatik olarak vurgulanır. Renk, is-unread sınıfını kullanarak CSS ile özelleştirilebilir.

Son 24 saat içinde gönderilen yorumlara, stil için kullanılabilecek 24hr sınıfı uygulanır.

Son olarak, kullanıcının oturumunda görünen herhangi bir yeni canlı yorum, birkaç saniye boyunca bir animasyonla vurgulanır. Bu, is-live CSS sınıfı ile yapılır ve yine özelleştirilebilir.

E-posta Şablonları Internal Link

FastComments tarafından müşterilerinize gönderilen e-postalar özelleştirilebilir. Şablon, mantık, ve çevirilerin tamamı değiştirilebilir. Metin her yerel ayar için özelleştirilebilir ve stil hatta her alan adı için değiştirilebilir. Özel e-posta şablonları hakkında daha fazla bilgi edinin.

Yeni Canlı Yorumlar Alta Eklensin Internal Link

Varsayılan olarak, yeni canlı yorumlar gerçek zamanlı olarak gönderildikçe yorum listesinin en üstünde görünür.

Bu seçenek etkinleştirildiğinde, yeni canlı yorumlar bunun yerine listenin altına eklenecektir. Bu, kullanıcılar yorum dizisini görüntülerken yorumlar gerçek zamanlı gönderildiğinde onların görünme şeklini etkiler.

New Live Comments to Bottom
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 "newCommentsToBottom": true
8}];
9</script>
10

Bu ayar etkinleştirildiğinde:

  • Diğer kullanıcılar tarafından gönderilen yeni canlı yorumlar yorum listesinin en altında görünecektir
  • Kullanıcılar, yeni yorumların mevcut yorumların altında gerçek zamanlı olarak göründüğünü görecekler
  • Bu yalnızca canlı yorum güncellemelerini etkiler - sayfanın ilk yüklenmesini etkilemez
  • Bu, kullanıcılar bir tartışmayı takip ederken okuma akışının korunmasına yardımcı olabilir

Bu ayarın yalnızca yeni canlı yorumlar gerçek zamanlı olarak ulaştıklarında nereye yerleştirildiklerini etkilediğini unutmayın. Sayfa yüklendiğinde uygulanan ilk sıralamayı etkilemez.

Sonsuz Kaydırmayı Etkinleştirme Internal Link

Varsayılan olarak, FastComments widget'ı tüm görünür yorumlara uyacak şekilde dikey olarak yeniden boyutlanır. Sayfalama, mevcut sayfanın sonunda bulunan "Sonrakileri Görüntüle" düğmesiyle gerçekleştirilir; çoğu kullanıcı için bu etkileşimin en hoş hissettiren yöntem olduğunu gördük.

Ancak, sonsuz kaydırmanın tercih edildiği bazı durumlar vardır. Örneğin, bu özelliği Stream Chat ürünümüzde kullanıyoruz.

"Sonrakileri Görüntüle" düğmelerini gizleyip sonsuz kaydırmaya geçmek için enableInfiniteScrolling bayrağını true olarak ayarlayabiliriz:

Enabling Infinite Scrolling
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 "enableInfiniteScrolling": true
8}];
9</script>
10

Bu ayrıca özel CSS eklenmesini gerektirir. Kaydırmayı etkinleştirmek için .comments seçicisi için örneğin aşağıdaki gibi özel CSS ekleyin:

Sonsuz Kaydırmayı Etkinleştir
Copy CopyRun External Link
1
2.comments {
3 max-height: 500px;
4 overflow-y: auto;
5}
6

Tam çalışan bir örnek şöyle olacaktır:

Enabling Infinite Scrolling
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 "enableInfiniteScrolling": true,
8 "customCSS": ".comments { max-height: 500px; overflow-y: auto; }"
9}];
10</script>
11

Yukarıdaki örnekte customCSS özelliğini kullanıyoruz; ancak performans nedenleriyle bunun yerine Widget Yapılandırma Arayüzü'nün kullanılması önerilir. Özel CSS dokümantasyonuna bakın.

Tüm Yorumları Tek Seferde Görüntüleme - Sayfalamayı Devre Dışı Bırak Internal Link

Sayfalandırmayı devre dışı bırakmak ve tüm yorumları aynı anda görüntülemek için startingPage'i -1 olarak ayarlayın.

Render All Comments
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 "startingPage": -1
8}];
9</script>
10

Yeni Üst Düzey Yorumları Önleme Internal Link

noNewRootComments öğesini true olarak ayarlamak widget'ın kök yanıt alanını gizlemesine neden olur, ancak kullanıcıların yanıt vermelerine yine de izin verir. Örneğin, yalnızca bazı kullanıcıların üst düzey yorum bırakmasına izin vermek için bunu sayfa yüklenirken koşullu olarak ayarlayabilirsiniz.

Prevent New Root Comments
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 "noNewRootComments": true
8}];
9</script>
10

Maksimum Yanıt Derinliği Internal Link

Varsayılan olarak FastComments, yanıtların sınırsız iç içe geçmesine izin verir ve kullanıcıların yanıtlara süresiz olarak yanıt verebileceği bir konu yapısı oluşturur.

maxReplyDepth seçeneği, yanıt dizilerinin ne kadar derinleşebileceğini sınırlandırmanıza olanak tanır. Maksimum derinliğe ulaşıldığında, kullanıcılar o seviyedeki yorumlarda artık bir yanıt düğmesi görmezler.

Limiting Reply Depth to 2 Levels
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 "maxReplyDepth": 2
8}];
9</script>
10

maxReplyDepth 2 olarak ayarlandığında:

  • Kullanıcılar üst düzeyde yorum yapabilir (derinlik 0)
  • Kullanıcılar üst düzey yorumlara yanıt verebilir (derinlik 1)
  • Kullanıcılar bu yanıtlara yanıt verebilir (derinlik 2)
  • Derinlik 2'nin ötesinde daha fazla yanıt izin verilmez

1 olarak ayarlanması yalnızca üst düzey yorumlara yanıt verilmesine izin verir ve daha düz bir tartışma yapısı oluşturur.

maxReplyDepth'i 0 olarak ayarlamak tüm yanıtları devre dışı bırakır ve yalnızca üst düzey yorumlara izin verir. Belirtilmezse, yanıtlar sınırsız olarak iç içe geçebilir.

Gönderilmemiş Yorumla Çıkmadan Önce Uyar Internal Link

Varsayılan olarak, bir kullanıcı yorum yazıp gönderim yapmadan sayfayı yenilediğinde, sekmeyi kapattığında veya başka bir sayfaya gittiğinde, taslak sessizce kaybolur.

warnOnUnsavedComment özelliğini true olarak ayarlamak, bir yorum kutusu ya da devam eden bir düzenleme hâlâ metin içerdiği sürece, tarayıcının sayfadan ayrılmadan önce kullanıcıdan onay istemesini sağlar. Yorum gönderildiğinde metin temizlenir, bu yüzden herhangi bir uyarı gösterilmez.

Kaydedilmemiş Yorum Uyarısı
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 "warnOnUnsavedComment": true
8}];
9</script>
10

Uyarı, tarayıcının kendi iletişim kutusunu kullanır. Modern tarayıcılar kendi metinlerini gösterir ve özel metni yok sayar, bu yüzden mesaj özelleştirilemez.

Bu seçenek, talep üzerine küçük bir uzantı yükler, bu nedenle etkinleştirmeyen siteler için widget'a hiçbir şey eklemez.

Tek Oturum Açma (SSO) Genel Bakış Internal Link

SSO, veya tek oturum açma, sizin veya kullanıcılarınızın FastComments kullanmak için başka bir hesap oluşturmadan oturum açmasına olanak tanıyan bir dizi konvansiyondur.

Anonim yorum yapmaya izin vermediğinizi varsayarsak, FastComments ile yorum yapmak için bir hesap gereklidir. Bu kayıt sürecini çok kolay hale getiriyoruz - kullanıcı sadece yorum yaparken e-posta adresini bırakır. Bununla birlikte, bunun bile bazı sitelerin kaçınmak istediği ekstra bir sürtünme olduğunu anlıyoruz.

Bu sürtünmeyi, tüm siteniz için yalnızca bir oturum açma akışı bulundurarak azaltabiliriz.

Nasıl edinirim?

Tüm hesap türleri şu anda SSO erişimi alır. Ancak, SSO kullanıcılarının maksimum sayısı paketine bağlı olarak değişecektir. Diğer özelliklerde olduğu gibi, Pro planlar ve üstü doğrudan geliştirme desteği sağlar.

Seçenekleri karşılaştıralım, ardından her birinin ayrıntılarına girelim.

Kullanıcı ve Yorum Taşımaları

Disqus gibi SSO olan bir platformdan taşınırken, zaten kullanıcılarınız ve onların yorumları olacaktır.

Yorumlar, API, Import UI'miz veya müşteri desteği aracılığıyla taşıma sırasında içe aktarılır. Import UI, hata işleme, avatar ve medya çıkarımı ve yüklemelerini ve toplu iş izleme sistemini içerdiği için, desteklediği platformdan taşıyorsanız tercih edilir.

Kullanıcılar, ilk kez yorum dizinlerini görüntülediklerinde otomatik olarak eklenir. Alternatif olarak, API aracılığıyla önceden eklenebilirler, ancak bu işlem çok fazla avantaja sahip değildir.

Yorumlar içe aktarılmışsa ve SSO kullanıcıları API aracılığıyla manuel olarak eklenmemişse, yorumlar kullanıcının herhangi bir yorum dizinini ilk kez görüntülediğinde o kullanıcı hesabı oluşturulduğunda otomatik olarak kullanıcının hesabına aktarılır. Daha sonra orijinal olarak yazdıkları yorumları yönetebilir, düzenleyebilir ve silebilirler.

Otomatik taşıma e-posta veya kullanıcı adı (username) aracılığıyla yapılır. Bazı platformlar Disqus gibi dışa aktarımda e-posta sağlamaz, bu yüzden bu durumda kullanıcı adına geri döneriz.

  • Eşleşen bir kullanıcı adını ve SSO yükünde bir e-posta gönderdiğiniz sürece, bildirimler ve mentionların çalışması için e-postayı bireysel yorum nesnelerine ekleyeceğiz.

Yorumlarınızı ve kullanıcılarınızı aynı anda içe aktarmak isteniyorsa, kullanıcılar API aracılığıyla içe aktarıldıktan sonra yorumları ilgili kullanıcı hesaplarına taşımak için destek ile çalışın.

Özetle, taşıma için en kolay yol şu şekildedir:

  1. Yorumları içe aktarın.
    1. Manage Data -> Imports içinde Import UI kullanılıyorsa avatarlar ve diğer medya otomatik olarak taşınır.
  2. Secure veya Simple SSO'yu kurun.
  3. İlk kez giriş yaptıklarında kullanıcı başına otomatik olarak taşınmasına izin verin.
    1. Kullanıcının 50k'dan az yorumu varsa bu genellikle sayfa yükleme süresine bir saniyeden daha az ekler.

WordPress Kullanıcıları

Eğer WordPress eklentimizi kullanıyorsanız kod yazmanıza gerek yok! Sadece eklentinin Yönetici sayfasına gidin, SSO Ayarları'na tıklayın ve ardından Etkinleştir'e tıklayın.

Bu sizi API anahtarınızı oluşturacak, WordPress kurulumunuza gönderecek ve SSO'yu açacak tek düğmeli bir sihirbaza götürecektir. Bunu sizin için tek bir düğme tıklamasına yoğunlaştırdık.

Eklentiyi ilk kez yüklüyorsanız, SSO Ayarları düğmesini içeren yönetici sayfasını görmeden önce kurulum sürecini tamamlamanız gerektiğini unutmayın.

WordPress SSO - Moderatörler

FastComments WordPress eklentisiyle yorum yaparken moderatörlerinizin yanında "Moderator" rozeti görünmesi için, şu anda onların ayrıca FastComments kontrol panelinde Moderatör olarak eklenmiş olmaları ve e-postalarının doğrulanmış olması gerektiğini unutmayın.

Özel Entegrasyonlar

Özel entegrasyonlar için iki seçenek vardır.

Birinci Seçenek - Secure SSO

Secure SSO ile FastComments, yorum yapanın, oy verenin ve yorumları okuyan kişinin sitenizde gerçek bir kullanıcı olduğunu bilir.

Geçerli bir yük oluşturduğunuz sürece, kullanıcı her zaman sorunsuz bir yorum deneyimine sahip olacaktır.

Secure SSO ile SSO yükü sunucu tarafında HMAC kimlik doğrulaması kullanılarak oluşturulur ve ardından istemci üzerindeki widget'a iletilir.

Secure SSO ile kullanıcının hesabı FastComments kullanıcı tabanının geri kalanından tamamen ayrıdır. Bu, iki ortağımız Company A ve Company B varsa, her birinin "Bob" kullanıcı adına sahip bir SSO kullanıcısı olabileceği anlamına gelir.

Gereksinimler

  • Temel düzeyde backend geliştirme bilgisi.
  • Gizli API anahtarlarıyla ilgili temel bilgi.
  • API geliştirme veya sunucu tarafı render alma hakkında temel bilgi.

Artıları

  • Güvenli.
  • Sorunsuz yorum deneyimi.

Eksileri

  • Backend geliştirme gerektirir.

Kullanıcı Verilerini Güncelleme

Secure SSO ile her seferinde sso kullanıcı yükünü geçirdiğinizde, kullanıcıyı en son bilgilerle güncelleyeceğiz. Örneğin, kullanıcının kullanıcı adı X ise ve SSO yükünde Y gönderirseniz, kullanıcı adı Y olacaktır.

Bu yaklaşımla değerleri kaldırmak istiyorsanız onları null (tanımsız değil undefined) olarak ayarlayın.

Secure SSO API

Ayrıca SSO kullanıcıları ile etkileşim için bir API sağlıyoruz. bkz the docs.

Secure SSO kullanıldığında, kullanıcılar sayfa yüklemesi sırasında arka planda otomatik olarak oluşturulur. Kullanıcılarınızı toplu olarak içe aktarmanıza gerek yoktur.

İkinci Seçenek - Simple SSO

Secure SSO'nun alternatifi, kullanıcı bilgilerini basitçe yorum widget'ına geçirmektir.

Simple SSO ile bir e-posta sağlamak zorunlu değildir, ancak bunun olmaması durumunda yorumları "Doğrulanmamış" olarak gösterilecektir.

Not! 2022 başlarından itibaren Simple SSO ile kullanıcı adlarının FastComments.com genelinde benzersiz olması gerekmez.

İdeal olarak, Simple SSO yalnızca backend erişimi sağlamayan bir platform üzerinde geliştirme yaparken seçilmelidir.

Gereksinimler

  • Temel düzeyde istemci tarafı geliştirme bilgisi.
  • En azından kullanıcının e-postasını bilmek.

Artıları

  • Basit.
  • Tüm etkinlikler yine de doğrulanır.
  • Kullanıcı hiç kullanıcı adını veya e-postasını girmez.

Eksileri

  • İstemci tarafı yükünün herhangi bir kullanıcı olabilecek şekilde hazırlanabileceği için Secure SSO'dan daha az güvenlidir.

Simple SSO API

Simple SSO akışıyla otomatik olarak oluşturulan kullanıcılar SSOUser nesneleri olarak saklanır. SSOUser API aracılığıyla erişilebilir ve yönetilebilirler. bkz the docs.

Özel Entegrasyonlar - Disqus SSO'dan Geçiş Internal Link

Disqus ile FastComments Secure SSO arasındaki en büyük fark, Disqus'un şifreleme için SHA1 kullanması iken bizim SHA256 kullanmamızdır. Bu, Disqus'tan geçişi kolaylaştırır - kullanılan hash algoritmasını SHA1'den SHA256'e değiştirin ve UI'ye geçirilen property adlarını güncelleyin.

Özel Entegrasyonlar - Commento SSO'dan Geçiş Internal Link

Commento tamamen farklı bir SSO yaklaşımı kullanır - kullanıcıyı doğrulamak için çağırdıkları bir endpoint'e sahip olmanızı gerektirir.

FastComments ise tam tersidir - kullanıcı bilgilerini secret key'inizi kullanarak basitçe encode edip hash'leyip iletmenizi sağlar.

Geri Çağrılar Internal Link

Yorum bileşeni için tüm kütüphaneler (şu anda Angular, React, Vue) geri çağırmaları destekler.

Geri çağırmalar, yapılandırma nesnesinde belirtilir ve her kütüphane için aynı imzaya sahiptir.

Desteklenen geri çağırmalar:

  • onInit
  • onAuthenticationChange
  • onRender
  • commentCountUpdated
  • onReplySuccess
  • onVoteSuccess
  • onImageClicked
  • onOpenProfile
  • onCommentSubmitStart
  • onCommentsRendered

Kesin imzalar TypeScript tanımlarında bulunabilir.

İşte tüm geri çağırmaların kullanıldığı bir örnek:

Geri Çağırma Örnekleri
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>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: 'demo',
8 onInit: function () {
9 console.log('Library started to fetch comments!');
10 },
11 onAuthenticationChange: function (eventName, userObj) {
12 console.log('User authenticated!', eventName, userObj);
13 },
14 onRender: function () {
15 console.log('Render event happened!');
16 },
17 commentCountUpdated: function (newCount) {
18 console.log('New comment count:', newCount);
19 },
20 onReplySuccess: function (comment) {
21 console.log('New comment saved!', comment);
22 },
23 onVoteSuccess: function (comment, voteId, direction, status) {
24 console.log('New vote saved!', comment, voteId, direction, status);
25 },
26 onImageClicked: function (src) {
27 console.log('Image clicked!', src);
28 },
29 onOpenProfile: function (userId) {
30 console.log('User tried to open profile', userId);
31 // return true; // varsayılan davranışı (fastcomments.com kullanıcı profilini açma) engellemek için true döndürün.
32 },
33 onCommentSubmitStart: function(comment, continueSubmitFn, cancelFn) {
34 console.log('Trying to submit comment', comment);
35 setTimeout(function() { // asenkron davranışı taklit etme (API çağırma vb.).
36 if(confirm('Should submit?')) {
37 continueSubmitFn();
38 } else {
39 cancelFn('Some optional error message');
40 }
41 }, 1000);
42 },
43 onCommentsRendered: function(comments) {
44 // comments sayfadaki varsayılan sıralamaya göre sıralanır; bu En Alakalı (ör: en çok oy alan vb.) veya Yeniler İlk olabilir
45 const topCommentInList = comments[0];
46 console.log('First Comment Rendered:', topCommentInList.avatarSrc, topCommentInList.commenterName, topCommentInList.commentHTML);
47 }
48 }];
49</script>
50

Sayfa Başlıkları Internal Link

Geçerli sayfa başlığı belirtilen urlId ile ilişkilendirilir ve moderasyon araçlarında kullanılmak üzere kaydedilir.

Varsayılan olarak bu, document.title'den alınır.

İsterseniz kendi sayfa başlığınızı şu şekilde belirtebilirsiniz:

Specifying The Page Title
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 "pageTitle": "Article 42"
8}];
9</script>
10

Yorum Sayısı ve Tüm İç İçe Yanıtların Sayılması Internal Link

Yorum widget'ının en üstünde görüntülenen yorum sayısı, ya tümüyle "üst düzey" yorumları — yani doğrudan sayfaya veya makaleye yapılan yanıtları — ya da tüm iç içe geçmiş yorumların sayısını gösterebilir.

Varsayılan olarak bu değer true'dur - yani ikincisinin sayacıdır - tüm yorumlar. Yorum widget'ının eski sürümlerinde varsayılan değer false'tur.

countAll bayrağını true olarak ayarlayarak davranışı değiştirebilir, böylece tüm iç içe geçmiş yorumların sayısını gösterebiliriz.

Tüm Yorumları Sayma
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 "countAll": true
8}];
9</script>
10

Sayının yalnızca üst düzey yorumları yansıtmasını istiyorsak, bayrağı false olarak ayarlarız.

Üst Düzey Yorumları Sayma
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 "countAll": false
8}];
9</script>
10

Bu şu anda kod değişikliği yapılmadan özelleştirilemez.

Grup Kimliklerini Etiketleme Internal Link

@mentions otomatik tamamlama için kullanılacak ID'lerin listesi. Kesişen grupları olmadığında kullanıcıların etiketlenmesini engellemek istediğinizde kullanışlıdır.

Belirtildiğinde, @ karakterini yazdıktan sonra otomatik tamamlama yalnızca diğer gruplardaki kullanıcıları gösterecektir.

Limit Groups for Mentions
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 "mentionGroupIds": [
8 "yxZAhjzda",
9 "QT19nXbqB"
10 ]
11}];
12</script>
13