Wix 사이트에 댓글 추가

이 예제에서는 FastComments 라이브 댓글을 블로그 게시물 페이지에 추가하겠습니다.

이를 위해 Wix 에디터에서 사이트를 엽니다.

그런 다음, 올바른 페이지를 편집하고 있는지 확인해야 합니다.

We want to make sure that we show a unique comment thread for each blog post, so let's edit Blog Pages -> Post.

1단계: 동적 게시물 페이지 편집

이제 Add -> Embed Code -> Embed HTML로 이동합니다.

2단계: Embed HTML 블록 추가

이렇게 하면 다음과 같이 텅 빈 박스가 생성됩니다:

초기 블록

이 예제는 Wix와 호환되도록 커스텀 코드를 사용합니다. 다른 튜토리얼의 FastComments 코드 스니펫은 사용할 수 없습니다.

Enter Code를 클릭하고 HTML을 선택하여 커스텀 HTML 대화상자를 추가하는 양식을 엽니다:

3단계: HTML 대화상자 열기

다음 HTML 스니펫을 복사하여 대화상자에 붙여넣고, Update를 클릭합니다:

Wix 댓글 코드 스니펫

Copy

1

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

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

3단계: 붙여넣기 및 저장

이제 매우 작은 크기의 댓글 위젯이 표시됩니다:

3단계: 결과

다음으로 이것을 페이지에 맞게 위치와 크기를 조정하겠습니다.

이제 댓글 위젯을 추가했으니 페이지에 배치해 보겠습니다.

4단계: 크기 조정

이 튜토리얼에서는 활성 페이지에 따라 현재 스레드를 변경할 수 있습니다. 그러나 Wix가 이 기능을 열어주기 전까지는 댓글 위젯을 동적으로 크기 조정할 수 없습니다. 그때까지는 페이지에서 댓글 영역의 크기를 어느 정도로 할지 결정하여 적절히 크기를 지정해야 합니다.

다음으로, 댓글 쓰레드가 현재 페이지에 따라 변경되어 사용자가 현재 표시된 콘텐츠에 대해 토론할 수 있도록 설정하겠습니다.

다음 단계를 수행하지 않으면 사이트 전체에 대해 하나의 전역 댓글 쓰레드만 있게 되며, 이는 별로 유용하지 않습니다.

개발 모드

이 기능을 추가하려면 Wix에서 Dev Mode라고 부르는 모드로 들어가야 합니다.

화면 상단에서 Dev Mode 옵션을 클릭하세요.

개발 모드 활성화

요소 ID 설정

이를 위해 커스텀 코드를 추가할 예정이지만, 먼저 새 임베드 요소를 참조할 수 있도록 ID를 부여해야 합니다.

이름을 fastcomments로 하겠습니다.

추가한 새 임베드 요소를 클릭하면, 개발 모드에서 오른쪽 아래에 html1과 같은 값이 있는 ID 필드를 볼 수 있습니다:

ID 필드

이 값을 fastcomments로 변경한 뒤 Enter 키를 누르세요:

ID 설정

이제 댓글 영역에 현재 우리가 보고 있는 페이지를 알려주는 커스텀 코드를 추가할 수 있습니다.

화면 하단에서 다음과 같은 코드 편집기를 볼 수 있습니다:

편집기 열기

다음 코드를 복사하여 그곳에 붙여넣으세요:

Wix 댓글 네비게이션 스니펫

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

네비게이션 코드 추가

이제 한숨 돌리고 사이트를 미리 볼 수 있습니다. 페이지에 따라 변경되는 댓글 영역이 보일 것입니다. 축하합니다!

문제가 있으면 아래 댓글 상자에 알려주세요.

FastComments는 사이트에 맞게 사용자 지정할 수 있도록 설계되었습니다.

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