Add Live Commenting to Framer Sites

먼저 사이트의 에디터를 엽니다.

이 예에서는 FastComments를 블로그 페이지에 추가할 것이지만, 어떤 유형의 페이지에서도 작동합니다.

에디터 열기

이제 Embed 블록을 추가해 보겠습니다.

Go to Insert in the top left:

Insert를 클릭하세요

Then scroll the left hand sidebar down and mouse over Utility.

Next you'll want to click and drag the Utility 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.

Embed 위젯 찾기

Embed 위젯 드래그 앤 드롭

Now you'll have an empty Embed widget, and when you select it you'll get a sidebar on the right. You can expand the sidebar, and you'll see something like this:

Embed 설정 열기

Now let's change the Embed widget type to HTML:

HTML 위젯으로 설정

Now you're ready for the FastComments Framer Code snippet in the next step.

아래는 Framer용 Live Comments FastComments 스니펫입니다.

FastComments Framer 전용 댓글 스니펫

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 // 일부 제공업체는 코드 스니펫을 비동기(async)로 변경합니다

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

또는, 대안으로 스트리밍 채팅 위젯을 사용할 수 있습니다. Framer용 Streaming Chat FastComments 스니펫은 다음과 같습니다:

FastComments Framer 전용 스트리밍 채팅 스니펫

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 // 일부 제공업체는 코드 스니펫을 비동기(async)로 변경합니다

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 위젯을 선택했습니다.

두 가지 작업으로 위젯의 위치를 개선할 수 있습니다.

First, on the left pane, set the widget's height to fill and 1fr:

댓글 위젯 높이

Next we need to fix the default Framer page config. By default it sets the page height to a fixed size, which can cut off comment threads. So let's set this to fill, too.

페이지 높이 설정

원하는 대로 되도록 페이지 높이를 조정해야 할 수도 있습니다.

FastComments는 귀하의 사이트에 맞게 맞춤화되도록 설계되었습니다.

맞춤 스타일을 추가하거나 구성을 조정하려면 맞춤화 문서 확인하기에서 방법을 확인하세요.