וידג'ט ספירת התגובות מעוצב להצגת מספר התגובות של דף יחיד. הוא קל משקל ומספק עדכונים בזמן אמת אם מוגדר.

התקנה בסיסית

Comment Count Widget Installation

Copy Run

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

אפשרויות תצורה

הפונקציה FastCommentsCommentCount מקבלת את אפשרויות התצורה הבאות:

• tenantId (נדרש): מזהה הדייר שלך ב-FastComments
• urlId (אופציונלי): מזהה הדף. ברירת מחדל היא window.location.href אם לא צוין
• numberOnly (אופציונלי): אם true, מציג רק את המספר ללא טקסט. ברירת מחדל היא false
• isLive (אופציונלי): אם true, הספירה תתעדכן אוטומטית. ברירת מחדל היא false

דוגמאות מתקדמות

URL ID מותאם אישית

Comment Count with Custom URL ID

Copy Run

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

הצגת מספר בלבד

Comment Count Number Only

Copy Run

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

עדכונים חיים

Live Comment Count Updates

Copy Run

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

שיטות הוידג'ט

הוידג'ט מחזיר אובייקט עם השיטות הבאות:

• destroy(): מסיר את הוידג'ט ומנקה את כל הטיימרים
• update(config): מעדכן את הוידג'ט עם תצורה חדשה

דוגמת שימוש

Widget Methods Example

Copy Run

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

עיצוב

הוידג'ט מרנדר HTML פשוט עם ספירת התגובות ומגיע עם עיצוב מינימלי. אתה יכול להתאים אישית את המראה עם CSS:

Custom Styling

Copy Run

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

וידג'ט ספירת התגובות המרובות מעוצב להצגה יעילה של ספירות תגובות עבור דפים מרובים באותו דף. במקום לבצע קריאות API בודדות לכל ספירת תגובות, וידג'ט זה מקבץ בקשות לביצועים אופטימליים.

התקנה בסיסית

Bulk Comment Count Widget Installation

Copy Run

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

איך זה עובד

הוידג'ט המרובה עובד על ידי:

1. סריקת הדף לאיתור אלמנטים עם המחלקה fast-comments-count
2. קריאת התכונה data-fast-comments-url-id מכל אלמנט
3. קיבוץ בקשות API לשליפת ספירות תגובות מרובות ביעילות
4. עדכון כל אלמנט עם ספירת התגובות המתאימה

אפשרויות תצורה

הפונקציה FastCommentsCommentCountBulk מקבלת את אפשרויות התצורה הבאות:

• tenantId (נדרש): מזהה הדייר שלך ב-FastComments
• apiHost (אופציונלי): מארח API מותאם אישית אם אתה משתמש במופע מתארח עצמאית

דוגמה מהעולם האמיתי

הנה דוגמה מעשית המראה כיצד תוכל להשתמש בוידג'ט המרובה ברשימת פוסטים בבלוג:

Blog Post Listing with Comment Counts

Copy Run

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

שיקולי ביצועים

הוידג'ט המרובה מייעל אוטומטית את הביצועים על ידי:

• קיבוץ בקשות: ספירות תגובות מרובות נשלפות בקריאת API יחידה
• מגבלות גודל בקשה: בקשות מתפצלות אוטומטית אם רשימת ה-URL הופכת גדולה מדי (מעל 1,000 תווים)
• ביטול כפילויות: אלמנטים מרובים עם אותו data-fast-comments-url-id חולקים את אותה ספירה

אלמנטים מרובים עם אותו URL ID

אתה יכול לקבל אלמנטים מרובים בדף עם אותו data-fast-comments-url-id. כולם יעודכנו עם אותה ספירה:

Multiple Elements Same URL ID

Copy Run

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

לוקליזציה

הוידג'ט המרובה מעצב אוטומטית ספירות תגובות בהתבסס על הגדרות השפה שלך ב-FastComments. הוא מספק טקסט מתאים עבור:

• אפס תגובות
• תגובה אחת
• תגובות מרובות

מתי להשתמש בוידג'ט מרובה לעומת וידג'ט בודד

השתמש בוידג'ט המרובה כאשר:

• יש לך ספירות תגובות מרובות באותו דף
• אתה מציג רשימת פוסטים/מאמרים עם ספירות תגובות
• הביצועים חשובים (מפחית קריאות API)

השתמש בוידג'ט הבודד כאשר:

• אתה צריך רק ספירת תגובות אחת בדף
• אתה צריך עדכונים חיים (הוידג'ט הבודד תומך בעדכונים בזמן אמת)
• אתה רוצה יותר שליטה על התנהגות הוידג'ט הבודד