Add Live Commenting to Bubble.io Sites

Първо, отидете на страницата/оформлението, където искате да добавите FastComments. В редактора на Bubble плъзнете и пуснете елемент HTML от страничната лента Visual Elements върху вашата страница.

Добавяне на HTML елемент

HTML елементът ще ни позволи да вградим уиджета на FastComments директно във вашето приложение Bubble.

Кликнете върху HTML елемента, който току-що добавихте. В редактора на свойства, който ще се появи, поставете следния код в полето HTML:

Кодов фрагмент за живо коментиране в Bubble.io

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>

4<script>

5 (function fcLoad() {

6 function tryLoad() {

7 // bubble има склонност да променя фрагмента с код да стане асинхронен

8 const container = document.getElementById('fastcomments-widget');

9 if (!container) {

10 return waitRetry();

11 }

12 if (!window.FastCommentsUI) {

13 return waitRetry();

14 }

15 if (container.fastCommentsSetup) {

16 return;

17 }

18 window.FastCommentsUI(container, {

19 tenantId: 'demo',

20 pageTitle: top.document.title,

21 url: top.location.href,

22 urlId: top.location.pathname

23 });

24 container.fastCommentsSetup = true;

25 }

26 function waitRetry() {

27 setTimeout(tryLoad, 500);

28 }

29 tryLoad();

30 })();

31</script>

32

Вмъкване на кода на FastComments

Забележка: Този код включва механизъм за повторен опит, за да се гарантира, че FastComments се зарежда правилно в динамичната среда на Bubble. Други фрагменти с код няма да работят.

Не забравяйте да замените 'demo' с вашия реален FastComments tenant ID след като се регистрирате. Ако сте влезли в FastComments.com, той вече трябва да е заменен.

За да се уверим, че уиджетът за коментари се показва правилно, трябва да коригираме ширината на HTML елемента. Потърсете раздела Оформление в редактора на свойства на елемента.

Намерете настройката за ширина

Разделът Оформление съдържа важни опции за размери, които ще помогнат на уиджета за коментари да се показва правилно при различни размери на екрана.

В раздела Layout задайте ширината на 100%. Това гарантира, че коментарният уиджет заема цялата ширина на своя контейнер и реагира правилно при различни размери на екрана.

Задаване на ширина 100%

След като промените стойността на полето на 100 (или желаното процентно число) ще трябва да кликнете върху падащото меню до числото, за да го превключите от пиксели на проценти.

Също така задайте минимална височина (например 400px), за да осигурите достатъчно място за правилното показване на коментарния уиджет.

След като направите тези промени, натиснете бутона Preview, за да видите вашия FastComments уиджет в действие!

Отлична работа! Вече добавихте коментари в реално време към вашия сайт в Bubble.io.

Ако сте срещнали грешка 'permission denied', или искате да персонализирате FastComments, продължете да четете.

FastComments е проектиран да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да настроите конфигурацията, Разгледайте нашата документация за персонализация за да научите как.