Add Live Commenting to Framer Sites

Sa FastComments možemo lako dodati komentare uživo na bilo koji sajt izgrađen sa Framer.

U ovom tutorijalu ćemo pokriti samo instalaciju Live Commenting vidžeta. Ako vam je potrebna pomoć pri instalaciji drugih vidžeta, ili podešavanju SSO, slobodno napravite tiket za podršku.

Korak 1: Otvorite uređivač

Prvo, otvorite editor za vaš sajt.

U našem primeru ćemo dodati FastComments na stranice našeg bloga, ali bilo koja vrsta stranice bi trebalo da radi.

Otvorite editor

Korak 2: Dodajte blok za ugrađivanje

Sada ćemo dodati Embed blok.

Idite na Insert u gornjem levom uglu:

Kliknite Insert

Zatim pomerite levu bočnu traku nadole i pređite mišem preko Utility.

Next you'll want to click and drag the Embed block to the end of your blog.

It's important you click and drag as shown, and not just click it. If you just click it, then Framer will insert it outside of your blog and you'll have to drag it around later.

Pronađite Embed vidžet

Prevucite i otpustite Embed vidžet

Sada ćete imati prazan Embed vidžet, i kada ga izaberete pojaviće se bočna traka sa desne strane. Možete proširiti bočnu traku, i videćete nešto ovako:

Otvorite podešavanja Embed-a

Sada promenimo tip Embed vidžeta u HTML:

Postavite kao HTML vidžet

Sada ste spremni za FastComments Framer isječak koda u sledećem koraku.

Korak 3: Kopirajte i nalepite FastComments kod specifičan za Framer

Ispod se nalazi FastComments snippet za Framer Live Comments.

FastComments Framer-specifičan snippet komentara

Copy

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="fastcomments-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // neki provajderi menjaju snippet koda tako da bude asinhron
            const container = document.getElementById('fastcomments-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsUI) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsUI(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

Ili, alternativno, možete koristiti Streaming Chat widget. FastComments snippet za Framer Streaming Chat je:

FastComments Framer-specifičan snippet za Streaming Chat

Copy

<script src="https://cdn.fastcomments.com/js/embed-live-chat.min.js"></script>
<div id="fastcomments-live-chat-widget" style="width: 100%;height: 100%;"></div>
<script>
    (function fcLoad() {
        function tryLoad() {
            // neki provajderi menjaju snippet koda tako da bude asinhron
            const container = document.getElementById('fastcomments-live-chat-widget');
            if (!container) {
                return waitRetry();
            }
            if (!window.FastCommentsLiveChat) {
                return waitRetry();
            }
            if (container.fastCommentsSetup) {
                return;
            }
            window.FastCommentsLiveChat(container, {
                tenantId: 'demo',
                pageTitle: top.document.title,
                url: top.location.href,
                urlId: top.location.pathname
            });
            container.fastCommentsSetup = true;
        }
        function waitRetry() {
            setTimeout(tryLoad, 500);
        }
        tryLoad();
    })();
</script>

FastComments podržava Framer editor, tako da biste trebali videti nešto ovako nakon što nalepite kod (možda ćete morati kliknuti Publish):

Pregled widgeta za komentare

Sada kad pregledate svoj sajt trebalo bi da vidite deo za komentare! U bočnoj traci Framera možete, ako želite, postaviti widget da bude pune širine.

Imajte na umu da Framer ograničava visinu widgeta i ne podržava automatsko prilagođavanje veličine, zato smo ovde izabrali Live Chat widget jer ima fiksnu visinu.

Korak 4: Prilagodite visinu widgeta i stranice

Možemo poboljšati pozicioniranje widgeta na dva načina.

Prvo, u levom panelu, podesite visinu widgeta na fill i 1fr:

Visina widgeta za komentare

Zatim treba da popravimo podrazumevanu Framer konfiguraciju stranice. Podrazumevano postavlja visinu stranice na fiksnu veličinu, što može odseći niti komentara. Zato i ovo postavimo na fill.

Podesite visinu stranice

Možda ćete morati da eksperimentišete sa visinom stranice dok ne bude onakva kakvu želite.

Greške domena

Možete dobiti grešku autorizacije, kao u sledećem primeru:

Nedostaje konfiguracija domena

Razlog je što FastComments ne zna da treba da dozvoli korišćenje vašeg naloga na ovom domenu.

U tom slučaju, rešenje je jednostavno. Potrebno je samo da dodate svoj sajt na vaš FastComments.com nalog.

Idite ovde da dodate svoj sajt na vaš nalog.

Prilagođavanje

FastComments je dizajniran da se prilagodi vašem sajtu.

Ako želite da dodate prilagođeni stil ili podesite konfiguraciju, Pogledajte našu dokumentaciju o prilagođavanju da saznate kako.

Jezik 🇷🇸 Srpski (Latinica)