FastComments.com

Ionos 사이트에 댓글 추가


FastComments를 사용하면 Ionos로 구축된 모든 사이트에 라이브 댓글 기능을 쉽게 추가할 수 있습니다.

이 튜토리얼은 FastComments 계정이 필요합니다. 먼저 가입한 다음 다시 이곳으로 돌아오는 것을 권장합니다. 여기에서 계정을 생성할 수 있습니다.


1단계: 문의 양식 추가 Internal Link

먼저 FastComments가 대체할 연락처 양식을 추가하겠습니다.

이를 위해 사이트 편집기를 열고 원하는 페이지에서 Add Section을 클릭하세요.

그런 다음 왼쪽에서 Content -> Contact -> Contact Form으로 이동합니다(아래와 같이):

연락처 양식 추가
연락처 양식 추가

다음으로 FastComments가 양식을 대체하도록 알려야 합니다. 기본 양식 제목을 클릭하세요:

양식 제목 설정
양식 제목 설정

FastComments Goes Here로 제목을 설정합니다. 대소문자 및 공백이 정확히 같아야 하며, 그렇지 않으면 작동하지 않으므로 이 텍스트를 복사하여 붙여넣을 것을 권장합니다.

완료되면 다음과 같이 표시됩니다:

제목 설정 완료
제목 설정 완료

1단계가 끝났습니다!

2단계: FastComments.com 코드 추가 Internal Link

다음으로 FastComments 위젯 코드를 사이트에 추가하겠습니다. 이 코드는 제목이 FastComments Goes Here인 모든 폼을 찾아 FastComments로 교체합니다.

그럼 사이트 편집기 왼쪽 하단의 Settings로 이동해 보겠습니다:

설정 열기
설정 열기

Custom Head Code 섹션을 엽니다:

사용자 헤드 코드 열기
사용자 헤드 코드 열기

Ionos의 경우 FastComments 위젯 코드의 특별한 버전이 필요합니다. 다른 튜토리얼의 코드 스니펫은 작동하지 않습니다.

이제 다음 코드를 복사하세요:

Ionos FastComments 스니펫
Copy Copy
1
2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
3<script>
4 (function () {
5 let loaded = false;
6 let interval = null;
7
8 function attemptLoad() {
9 const nodes = document.querySelectorAll('h2');
10
11 nodes.forEach(function (node) {
12 if (node.innerText && node.innerText.trim() === 'FastComments Goes Here') {
13 // 전체 너비가 아닌 요소를 가져옵니다
14 const target = node.parentNode.parentNode.parentNode.parentNode.parentNode;
15 target.innerHTML = '';
16 FastCommentsUI(target, {
17 tenantId: "demo"
18 });
19 interval && clearInterval(interval);
20 loaded = true;
21 }
22 });
23 }
24
25 attemptLoad();
26 if (!loaded) {
27 interval = setInterval(attemptLoad, 300);
28 }
29 })();
30</script>
31

...그리고 아래와 같이 붙여넣습니다:

붙여넣기 및 저장
붙여넣기 및 저장

3단계: 게시하기 Internal Link


이제 사이트를 게시하기만 하면 끝입니다.

왼쪽 상단에서 Content를 클릭하여 콘텐츠 편집기로 돌아갑니다:

콘텐츠로 돌아가기
콘텐츠로 돌아가기

그런 다음 게시할 수 있습니다!

게시!
게시!

이제 완료되었습니다! FastComments가 사이트에 적용되어 있어야 합니다. 다음과 유사한 화면을 볼 수 있습니다:

완료!
완료!

성공 Internal Link


멋진 작업입니다! Ionos 사이트에 라이브 댓글 기능을 추가했습니다.

권한 거부 오류가 발생했거나 FastComments를 사용자화하려면 계속 읽으세요.


맞춤 설정 Internal Link

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

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