Add Live Commenting to Bubble.io Sites

Navigeer eerst naar de pagina/lay-out waar je FastComments wilt toevoegen. In de Bubble-editor sleep je een HTML-element vanuit de Visual Elements-zijbalk naar je pagina.

HTML-element toevoegen

Het HTML-element stelt ons in staat de FastComments-widget rechtstreeks in je Bubble-app in te sluiten.

Klik op het HTML-element dat u zojuist hebt toegevoegd. Plak in de eigenschappeneditor die verschijnt de volgende code in het HTML-veld:

Bubble.io codefragment voor live commentaar

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 heeft de neiging het codefragment asynchroon te maken

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-code invoegen

Note: Deze code bevat een retry-mechanisme om ervoor te zorgen dat FastComments goed wordt geladen in de dynamische omgeving van Bubble. Andere codefragmenten zullen niet werken.

Vergeet niet 'demo' te vervangen door uw daadwerkelijke FastComments tenant-ID nadat u zich heeft aangemeld. Als u bent ingelogd op FastComments.com, zou dit al vervangen moeten zijn.

Om ervoor te zorgen dat de reactie-widget correct wordt weergegeven, moeten we de breedte van het HTML-element aanpassen. Zoek het tabblad Indeling in de eigenschappen-editor van het element.

Vind de breedte-instelling

Het tabblad Indeling bevat belangrijke opties voor afmetingen die ervoor zorgen dat onze reactie-widget correct wordt weergegeven op verschillende schermformaten.

In het tabblad Layout stelt u de breedte in op 100%. Dit zorgt ervoor dat de commentaarwidget de volledige breedte van de container inneemt en zich correct aanpast aan verschillende schermformaten.

Breedte instellen op 100%

Nadat u de invoerwaarde hebt gewijzigd naar 100 (of het gewenste percentage) moet u op de vervolgkeuzelijst naast het getal klikken om het van pixels naar procenten te wijzigen.

Stel ook een minimale hoogte in (bijv. 400px) om te zorgen dat de commentaarwidget voldoende ruimte heeft om correct te worden weergegeven.

Nadat u deze wijzigingen hebt aangebracht, klikt u op de knop Voorbeeld om uw FastComments-widget in actie te zien!

Goed gedaan! Je hebt live reacties toegevoegd aan je Bubble.io-site.

Als je een 'permission denied'-fout bent tegengekomen, of FastComments wilt aanpassen, lees dan verder.

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen of de configuratie wilt aanpassen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.