Add Live Commenting to Framer Sites

Najprej odprite urejevalnik za vaše spletno mesto.

V našem primeru bomo FastComments dodali na strani našega bloga, vendar bi morala delovati katera koli vrsta strani.

Odprite urejevalnik

Zdaj dodajmo blok Embed.

Pojdite na Insert v zgornjem levem kotu:

Kliknite `Insert`

Nato se pomaknite navzdol po levem stranskem stolpcu in postavite kazalec miške nad Utility.

Nato boste želeli klikniti in povleči blok Utility na konec svojega bloga.

Pomembno je, da kliknete in povlečete kot je prikazano, in ne samo kliknete. Če ga samo kliknete, ga bo Framer vstavil zunaj vašega bloga in ga boste morali pozneje prestavljati.

Poiščite pripomoček Embed

Povlecite in spustite pripomoček Embed

Zdaj boste imeli prazen pripomoček Embed, in ko ga izberete, se bo na desni strani prikazal stranski stolpec. Stranski stolpec lahko razširite, in videli boste nekaj takega:

Odprite nastavitve pripomočka Embed

Zdaj spremenimo tip pripomočka Embed v HTML:

Nastavite kot HTML pripomoček

Zdaj ste pripravljeni na FastComments Framer Code snippet v naslednjem koraku.

Spodaj je FastComments izrezek za Framer Live Comments.

FastComments Framer-specifičen delček za komentarje

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 // nekateri ponudniki spremenijo delček kode v asinhrono

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

Ali pa lahko alternativno uporabite vdelani klepet v živo (Streaming Chat). FastComments izrezek za Framer Streaming Chat je:

FastComments Framer-specifičen delček klepeta v živo

Copy

1

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

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

4<script>

5 (function fcLoad() {

6

7 function tryLoad() {

8 // nekateri ponudniki spremenijo delček kode v asinhrono

9 const container = document.getElementById('fastcomments-live-chat-widget');

10 if (!container) {

11 return waitRetry();

12 }

13 if (!window.FastCommentsLiveChat) {

14 return waitRetry();

15 }

16 if (container.fastCommentsSetup) {

17 return;

18 }

19 window.FastCommentsLiveChat(container, {

20 tenantId: 'demo',

21 pageTitle: top.document.title,

22 url: top.location.href,

23 urlId: top.location.pathname

24 });

25 container.fastCommentsSetup = true;

26 }

27 function waitRetry() {

28 setTimeout(tryLoad, 500);

29 }

30 tryLoad();

31 })();

32</script>

33

FastComments podpira urejevalnik Framer, tako da bi morali videti nekaj takega, ko prilepite kodo (morda boste morali klikniti Publish):

Predogled gradnika komentarjev

Zdaj, ko si ogledate svojo stran, bi morali videti območje za komentarje! V stranskem meniju Framer lahko po želji nastavite tudi, da je gradnik polne širine.

Upoštevajte, da Framer omejuje višino gradnikov in ne podpira samodejnega prilagajanja velikosti, zato smo tukaj izbrali gradnik Klepeta v živo, ker ima fiksno višino.

Postavitev widgeta lahko izboljšamo na dva načina.

Najprej, v levem podoknu nastavite višino widgeta na fill in 1fr:

Višina komentarnega widgeta

Nato moramo popraviti privzeto konfiguracijo strani v Framerju. Privzeto nastavi višino strani na fiksno velikost, kar lahko odreže niti komentarjev. Zato tudi to nastavite na fill.

Nastavite višino strani

Morda boste morali prilagoditi višino strani, da bo takšna, kot želite.

FastComments je zasnovan tako, da ga lahko prilagodite svojemu spletnemu mestu.

Če želite dodati lastno oblikovanje ali prilagoditi konfiguracijo, Oglejte si našo dokumentacijo o prilagoditvah, da izveste, kako.