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 Embed blok.

Pojdite na Insert v zgornjem levem kotu:

Kliknite Insert

Nato se pomaknite navzdol v levi stranski vrstici in postavite kazalec miške na Utility.

Nato boste želeli klikniti in povleči blok Embed do konca vašega bloga.

Pomembno je, da kliknete in povlečete, kot je prikazano, in ne le kliknete. Če ga samo kliknete, bo Framer vstavil ta blok izven vašega bloga in ga boste morali kasneje premikati.

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 pojavila stranska vrstica. Stransko vrstico lahko razširite, in videli boste nekaj takega:

Odprite nastavitve Embed

Zdaj spremenimo tip pripomočka Embed v HTML:

Nastavite kot HTML pripomoček

Zdaj ste pripravljeni na odlomček kode FastComments za Framer 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.