FastComments.com

FastComments, belirli sayfalar veya gönderiler için yorum sayısını görüntüleyebilen hafif, bağımsız yorum sayısı bileşenleri sağlar. Bu bileşenler ana yorum bileşeninden ayrı olup, tam yorum arayüzü olmadan yorum sayılarını göstermek istediğiniz her yerde kullanılmak üzere tasarlanmıştır.

Mevcut iki tür yorum sayısı bileşeni vardır:

  1. Comment Count Widget - Tek bir sayfanın yorum sayısını görüntülemek için
  2. Bulk Comment Count Widget - Aynı sayfada birden çok sayfanın yorum sayılarını verimli şekilde görüntülemek için

Bu makale VanillaJS bileşenlerini kapsar. Our React/Angular/etc libraries also have their own widgets.


Yorum Sayısı Widget'ı Kurulumu Internal Link

Yorum Sayisi Widget'i, tek bir sayfanin yorum sayisini gostermek icin tasarlanmistir. Hafiftir ve yapilandirilirsa gercek zamanli guncellemeler saglar.

Temel Kurulum

Comment Count Widget Installation
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
3<div id="comment-count"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count'), {
6 tenantId: 'demo'
7 });
8</script>
9

Yapilandirma Secenekleri

FastCommentsCommentCount fonksiyonu asagidaki yapilandirma seceneklerini kabul eder:

  • tenantId (zorunlu): FastComments kiraci kimliginiz
  • urlId (istege bagli): Sayfa tanimlayicisi. Belirtilmezse varsayilan olarak window.location.href
  • numberOnly (istege bagli): true ise, metin olmadan yalnizca sayi gosterir. Varsayilan false
  • isLive (istege bagli): true ise, sayi otomatik olarak guncellenecektir. Varsayilan false

Gelismis Ornekler

Ozel URL ID

Comment Count with Custom URL ID
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
3<div id="comment-count-custom"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count-custom'), {
6 tenantId: 'demo',
7 urlId: 'my-custom-page-id'
8 });
9</script>
10

Yalnizca Sayi Gosterimi

Comment Count Number Only
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
3<div id="comment-count-number"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count-number'), {
6 tenantId: 'demo',
7 numberOnly: true
8 });
9</script>
10

Canli Guncellemeler

Live Comment Count Updates
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
3<div id="comment-count-live"></div>
4<script>
5 window.FastCommentsCommentCount(document.getElementById('comment-count-live'), {
6 tenantId: 'demo',
7 isLive: true
8 });
9</script>
10

Widget Metodlari

Widget asagidaki metodlara sahip bir nesne dondurur:

  • destroy(): Widget'i kaldirir ve tum zamanlayicilari temizler
  • update(config): Widget'i yeni bir yapilandirmayla gunceller

Kullanim Ornegi

Widget Methods Example
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
3<div id="comment-count-methods"></div>
4<script>
5 const widget = window.FastCommentsCommentCount(document.getElementById('comment-count-methods'), {
6 tenantId: 'demo'
7 });
8
9 // Update the widget to show a different page's count
10 setTimeout(() => {
11 widget.update({
12 tenantId: 'demo',
13 urlId: 'different-page-id'
14 });
15 }, 5000);
16
17 // Destroy the widget after 10 seconds
18 setTimeout(() => {
19 widget.destroy();
20 }, 10000);
21</script>
22

Stillendirme

Widget, yorum sayisiyla duz HTML olusturur ve minimal stillendirme ile gelir. Gorunumu CSS ile ozellesitirebilirsiniz:

Custom Styling
Copy CopyRun External Link
1
2<style>
3 .comment-count-styled {
4 background: #f0f0f0;
5 padding: 5px 10px;
6 border-radius: 15px;
7 font-size: 14px;
8 color: #666;
9 display: inline-block;
10 }
11</style>
12<script src="https://cdn.fastcomments.com/js/widget-comment-count.min.js"></script>
13<div id="comment-count-styled" class="comment-count-styled"></div>
14<script>
15 window.FastCommentsCommentCount(document.getElementById('comment-count-styled'), {
16 tenantId: 'demo'
17 });
18</script>
19

Toplu Yorum Sayısı Widget'ı Kurulumu Internal Link

Toplu Yorum Sayisi Widget'i, ayni sayfada birden fazla sayfa icin yorum sayilarini verimli bir sekilde gostermek uzere tasarlanmistir. Her yorum sayisi icin ayri API cagrilari yapmak yerine, bu widget en iyi performans icin istekleri gruplar.

Temel Kurulum

Bulk Comment Count Widget Installation
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
3
4<!-- Multiple elements with comment counts -->
5<div class="fast-comments-count" data-fast-comments-url-id="page-1"></div>
6<div class="fast-comments-count" data-fast-comments-url-id="page-2"></div>
7<div class="fast-comments-count" data-fast-comments-url-id="page-3"></div>
8
9<script>
10 window.FastCommentsBulkCountConfig = {
11 tenantId: 'demo'
12 };
13</script>
14

Nasil Calisir

Toplu widget su sekilde calisir:

  1. fast-comments-count sinifina sahip ogeler icin sayfayi tarar
  2. Her ogeden data-fast-comments-url-id ozelligini okur
  3. Birden fazla yorum sayisini verimli bir sekilde almak icin API isteklerini gruplar
  4. Her ogeyi uygun yorum sayisiyla gunceller

Yapilandirma Secenekleri

FastCommentsCommentCountBulk fonksiyonu asagidaki yapilandirma seceneklerini kabul eder:

  • tenantId (zorunlu): FastComments kiraci kimliginiz
  • apiHost (istege bagli): Kendi barindirdiginiz bir ornek kullaniyorsaniz ozel API ana bilgisayari

Gercek Dunya Ornegi

Iste toplu widget'i bir blog yazisi listesinde nasil kullanabileceginizi gosteren pratik bir ornek:

Blog Post Listing with Comment Counts
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
3
4<style>
5 .blog-post {
6 border: 1px solid #ddd;
7 margin: 10px 0;
8 padding: 15px;
9 border-radius: 5px;
10 }
11 .post-meta {
12 color: #666;
13 font-size: 14px;
14 margin-top: 10px;
15 }
16 .comment-count {
17 background: #e7f3ff;
18 padding: 2px 8px;
19 border-radius: 12px;
20 font-size: 12px;
21 display: inline-block;
22 }
23</style>
24
25<div class="blog-post">
26 <h3>How to Install FastComments</h3>
27 <p>Learn how to add FastComments to your website in just a few minutes...</p>
28 <div class="post-meta">
29 Published: March 15, 2024 |
30 <span class="fast-comments-count comment-count" data-fast-comments-url-id="how-to-install-fastcomments"></span>
31 </div>
32</div>
33
34<div class="blog-post">
35 <h3>Advanced FastComments Configuration</h3>
36 <p>Dive deep into the advanced configuration options for FastComments...</p>
37 <div class="post-meta">
38 Published: March 10, 2024 |
39 <span class="fast-comments-count comment-count" data-fast-comments-url-id="advanced-fastcomments-config"></span>
40 </div>
41</div>
42
43<div class="blog-post">
44 <h3>FastComments vs Other Solutions</h3>
45 <p>See how FastComments compares to other commenting solutions...</p>
46 <div class="post-meta">
47 Published: March 5, 2024 |
48 <span class="fast-comments-count comment-count" data-fast-comments-url-id="fastcomments-comparison"></span>
49 </div>
50</div>
51
52<script>
53 window.FastCommentsBulkCountConfig = {
54 tenantId: 'demo'
55 };
56</script>
57

Performans Degerlendirmeleri

Toplu widget asagidakiler araciligiyla performansi otomatik olarak optimize eder:

  • Istek gruplama: Birden fazla yorum sayisi tek bir API cagrisinda alinir
  • Istek boyutu sinirlari: URL listesi cok uzun olursa (1.000 karakterden fazla) istekler otomatik olarak bolunur
  • Tekrarlari kaldirma: Ayni data-fast-comments-url-id degerine sahip birden fazla oge ayni sayiyi paylasir

Ayni URL ID'li Birden Fazla Oge

Sayfada ayni data-fast-comments-url-id degerine sahip birden fazla ogeniz olabilir. Hepsi ayni sayiyla guncellenecektir:

Multiple Elements Same URL ID
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/embed-widget-comment-count-bulk.min.js"></script>
3
4<style>
5 .count-example {
6 margin: 10px 0;
7 padding: 10px;
8 background: #f9f9f9;
9 border-radius: 5px;
10 }
11</style>
12
13<div class="count-example">
14 Header Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
15</div>
16
17<div class="count-example">
18 Sidebar Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
19</div>
20
21<div class="count-example">
22 Footer Count: <span class="fast-comments-count" data-fast-comments-url-id="shared-article"></span>
23</div>
24
25<script>
26 window.FastCommentsBulkCountConfig = {
27 tenantId: 'demo'
28 };
29</script>
30

Yerellesirme

Toplu widget, FastComments dil ayarlariniza gore yorum sayilarini otomatik olarak biçimlendirir. Asagidakiler icin uygun metin saglar:

  • Sifir yorum
  • Bir yorum
  • Birden fazla yorum

Toplu ve Tekli Widget Ne Zaman Kullanilir

Toplu Widget'i su durumlarda kullanin:

  • Ayni sayfada birden fazla yorum sayiniz var
  • Yorum sayilariyla birlikte bir yazi/makale listesi gosteriyorsunuz
  • Performans onemli (API cagrilarini azaltir)

Tekli Widget'i su durumlarda kullanin:

  • Sayfada yalnizca bir yorum sayisina ihtiyaciniz var
  • Canli guncellemelere ihtiyaciniz var (tekli widget gercek zamanli guncellemeleri destekler)
  • Bireysel widget davranisi uzerinde daha fazla kontrol istiyorsunuz

FastComments yorum sayacı widget'ları sitenizin genelinde yorum sayılarını görüntülemek için basit ve verimli bir yol sağlar.

Bu dokümantasyonu faydalı bulduğunuzu umuyoruz.