Виджеты подсчёта комментариев

Виджет подсчета комментариев предназначен для отображения количества комментариев на отдельной странице. Он легкий и обеспечивает обновления в реальном времени, если настроен.

Базовая установка

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 становится слишком большим (более 1000 символов)
• Дедупликации: Несколько элементов с одинаковым 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-вызовов)

Используйте одиночный виджет когда:

• Вам нужен только один подсчет комментариев на странице
• Вам нужны обновления в реальном времени (одиночный виджет поддерживает обновления в реальном времени)
• Вам нужен больший контроль над поведением отдельного виджета