Squarespace 사이트에 댓글 추가

이 섹션에서는 Squarespace 블로그에 라이브 댓글 기능을 추가하는 방법을 알아봅니다.

코드를 한 번만 추가하면 위젯이 기존의 모든 블로그 게시물과, 그리고 앞으로 생성하는 모든 블로그 게시물에 자동으로 추가됩니다.

댓글 스레드는 각 블로그 게시물마다 고유합니다.

편집기에서 왼쪽의 페이지를 열어 시작합니다:

페이지 열기

아래에서 오른쪽에 톱니 아이콘이 있는 Blog를 볼 수 있습니다. 톱니 아이콘을 클릭하여 블로그 설정을 엽니다:

블로그 설정 열기

이제 Advanced로 이동한 다음 Post Blog Item Code Injection으로 갑니다:

블로그 항목 코드 설정 열기

다음과 같은 빈 코드 영역이 표시됩니다:

빈 코드 영역

이제 다음 코드 스니펫을 복사할 수 있습니다(스니펫 오른쪽 상단의 복사 버튼을 사용하세요):

Squarespace 블로그 댓글 코드

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 tenantId = 'demo'; // 귀하의 계정 ID

7

8 function tryLoad() {

9 // 다양한 레이아웃에서 로드 시도

10 let targetDiv = document.querySelector('.blog-item-comments-content');

11 if (!targetDiv) {

12 targetDiv = document.getElementById('fastcomments-widget');

13 }

14 window.FastCommentsUI(targetDiv, {

15 tenantId

16 });

17 }

18

19 tryLoad();

20 })();

21</script>

22

23

...then paste in the code area and click save:

붙여넣고 저장

성공했습니다! 이제 모든 블로그 게시물에서 FastComments Comment Widget을 볼 수 있습니다.

성공!

Squarespace에 FastComments를 설정하신 것을 축하합니다! Domain Error가 발생했거나 댓글 영역을 사용자 정의하는 방법을 알고 싶다면 계속 읽으세요!

이 섹션에서는 Squarespace 사이트의 모든 페이지에 실시간 댓글 기능을 추가하는 방법을 배웁니다.

코드는 한 번만 추가하면 되며 위젯은 기존의 모든 페이지와, 그리고 앞으로 생성하는 모든 페이지에 자동으로 추가됩니다.

댓글 스레드는 각 페이지마다 고유합니다.

편집기 왼쪽에서 설정을 여는 것으로 시작하겠습니다:

설정 열기

아래쪽에서 Developer Tools를 볼 수 있습니다. 이 항목을 클릭하세요:

개발자 도구 열기

이제 Code Injection으로 이동합니다:

Code Injection 열기

이제 코드 추가가 가능한 두 영역이 보입니다. 하나는 HEADER, 다른 하나는 FOOTER 라벨이 붙어 있습니다. 우리는 FOOTER 영역에 코드를 추가할 것입니다:

빈 Footer 영역

다음 단계에서 코드를 복사하여 추가하겠습니다.

이제 다음 코드 스니펫을 복사할 수 있습니다. 코드 스니펫 우측 상단에 나타나는 복사 버튼을 사용하세요.

코드에서 구성할 수 있는 항목이 몇 가지 있으니, 4행부터 7행을 확인하세요.

Squarespace 모든 페이지 댓글 코드

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 tenantId = 'demo'; // 계정 ID

7

8 function tryLoad() {

9 // 다양한 레이아웃에 대해 로드 시도

10 let targetDiv = document.querySelector('.blog-item-comments-content');

11 if (!targetDiv) {

12 targetDiv = document.getElementById('fastcomments-widget');

13 }

14 window.FastCommentsUI(targetDiv, {

15 tenantId

16 });

17 }

18

19 tryLoad();

20 })();

21</script>

22

23

...그런 다음 코드 영역에 붙여넣고 저장을 클릭하세요. FOOTER 블록에 코드가 들어있으면 아래와 같이 표시됩니다:

붙여넣기 및 저장

If you're having issues, make sure near the bottom it doesn't say "tenantId": "demo". It should show your tenant id if you are logged in. If not, reach out to support.

성공했습니다! 이제 모든 페이지에서 FastComments 댓글 위젯을 볼 수 있습니다.

Squarespace에서 FastComments 설정을 완료하신 것을 축하합니다! 도메인 오류가 발생했거나 댓글 영역을 사용자화하는 방법을 배우고 싶다면, 계속 읽어보세요!

이 섹션에서는 Squarespace 사이트의 특정 페이지에 라이브 댓글 기능을 추가하는 방법을 배웁니다.

이 방법을 사용하면 댓글 위젯을 추가하려는 각 페이지에 코드를 직접 추가해야 합니다.

댓글 스레드는 각 페이지마다 고유합니다.

특정 페이지에 댓글 위젯을 추가할 때 우리는 약간 더 많은 제어권을 가집니다.

원하는 정확한 위치에 위젯을 추가할 수 있으며, 이 튜토리얼에서는 맞춤 코드 블록을 추가하여 그렇게 할 것입니다.

먼저 댓글을 추가하려는 페이지를 열고 왼쪽 상단의 편집을 클릭하세요.

이 예에서는 댓글 전용 섹션을 추가하겠지만, 페이지의 기존 섹션에 추가할 수도 있습니다.

섹션을 추가해 보겠습니다:

섹션 추가

빈 섹션을 추가하겠습니다:

빈 섹션 추가

큰 빈 영역이 추가된 것을 볼 수 있습니다. 왼쪽 상단의 ADD BLOCK을 클릭하세요:

블록 추가

아래로 스크롤하여 Code 옵션을 찾은 다음 클릭합니다:

코드 위젯 선택

댓글 위젯을 배치하고 싶은 방식으로 코드 블록의 위치를 지정합니다:

위치

코드 블록을 편집합니다:

코드 블록 편집

다음 단계에서는 코드를 복사하여 추가하겠습니다.

이제 다음 코드 스니펫을 복사할 수 있습니다. 스니펫 우측 상단에 나타나는 복사 버튼을 사용하세요.

코드에서 구성할 수 있는 항목이 몇 가지 있습니다. 4행부터 7행을 확인하세요.

Squarespace 단일 페이지 코드

Copy

1

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

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

4<script>

5 window.fcConfigs = [{

6 target: '#fastcomments-widget',

7 tenantId: 'demo' // 귀하의 계정 ID

8 }];

9</script>

10

다음과 같이 보입니다:

붙여넣기 및 저장

이제 오른쪽 상단에서 저장을 클릭하세요.

Preview in Safe Mode 옵션은 작동하지 않지만, 사이트를 방문하면 위젯이 나타납니다.

문제가 발생하면, 하단 근처에 "tenantId": "demo"라고 표시되어 있지 않은지 확인하세요. 로그인되어 있으면 귀하의 tenant id가 표시되어야 합니다. 그렇지 않으면 지원팀에 문의하세요.

성공했습니다! 이제 페이지에서 FastComments 댓글 위젯을 볼 수 있습니다.

Squarespace에 FastComments를 설정하신 것을 축하합니다! 도메인 오류가 발생했거나 댓글 영역을 사용자화하는 방법을 배우고 싶다면 계속 읽어보세요!

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

사용자 지정 스타일을 추가하거나 구성을 조정하려면, 맞춤 설정 문서을 확인하세요.