Добавете живо коментиране към сайтове Framer

Първо, отворете редактора за вашия сайт.

В нашия пример ще добавим FastComments към страниците на нашия блог, но трябва да работи с всеки тип страница.

Отворете редактора

Сега нека добавим блок Embed.

Отидете на Insert в горния ляв ъгъл:

Кликнете Insert

След това превъртете лявата странична лента надолу и задръжте мишката върху Utility.

След това ще искате да кликнете и плъзнете блока Embed до края на вашия блог.

Важно е да кликнете и плъзнете, както е показано, а не просто да кликнете. Ако само кликнете, Framer ще го вмъкне извън вашия блог и ще трябва да го плъзнете на място по-късно.

Намерете уиджета Embed

Плъзнете и пуснете уиджета Embed

Сега ще имате празен уиджет Embed, а когато го изберете, ще получите странична лента вдясно. Можете да разгънете страничната лента и ще видите нещо такова:

Отворете настройките на Embed

Сега нека променим типа на уиджета Embed на HTML:

Задаване като HTML уиджет

Сега сте готови за кодовия фрагмент FastComments Framer в следващата стъпка.

FastComments snippet-ът за Framer Live Comments е по-долу.

FastComments Framer-специфичен snippet за коментари

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 // някои доставчици правят кодовия snippet асинхронен

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

Или, като алтернатива, можете да използвате уиджета Streaming Chat. FastComments snippet-ът за Framer Streaming Chat е:

FastComments Framer-специфичен snippet за Streaming Chat

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 // някои доставчици правят кодовия snippet асинхронен

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 поддържа редактора Framer, така че след като поставите кода, трябва да видите нещо подобно (може да се наложи да кликнете Publish):

Преглед на уиджета за коментари

Сега, когато видите сайта си, трябва да видите зоната за коментари! В страничната лента на Framer можете, ако желаете, да зададете и уиджета на пълна ширина.

Имайте предвид, че Framer ограничава височината на уиджетите и не поддържа автоматично преоразмеряване, затова тук избрахме уиджета Live Chat, тъй като той е с фиксирана височина.

Можем да подобрим позиционирането на уиджета, като направим две неща.

Първо, в левия панел задайте височината на уиджета на fill и 1fr:

Височина на уиджета за коментари

След това трябва да поправим конфигурацията на страницата по подразбиране на Framer. По подразбиране тя задава височината на страницата на фиксиран размер, което може да отреже нишките с коментари. Така че нека зададем и това на fill.

Задаване на височина на страницата

Може да се наложи да поэкспериментирате с височината на страницата, за да я настроите както искате.

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

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