Add Live Commenting to Typeflo.io Blogs

Typeflo.io 블로그에 FastComments를 추가하려면 먼저 블로그의 대시보드로 이동한 다음 왼쪽 사이드바에서 설정을 클릭하세요.

설정 클릭

다음으로 설정 페이지 상단에서 사용자 지정 코드 탭을 클릭하세요.

사용자 지정 코드 탭 클릭

사용자 지정 코드를 추가할 수 있는 세 섹션(헤더, 본문, 푸터)이 표시됩니다. FastComments는 푸터 섹션을 사용합니다.

Custom Code 탭의 Footer 섹션에 다음 코드를 붙여넣으세요:

Typeflo.io 라이브 댓글 코드 스니펫

Copy

1

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

3<script>

4 (function () {

5 function load() {

6 let target = null;

7 let lastInstance;

8 if (document.querySelector('.fastcomments-widget')) {

9 setTimeout(load, 1000);

10 return;

11 }

12 if (lastInstance) {

13 lastInstance.destroy();

14 }

15 if (window.FastCommentsUI) {

16 const newElement = document.createElement('div');

17 newElement.classList.add('fastcomments-widget');

18 const subscribeSection = document.querySelector('.nc-SectionSubscribe2');

19 if (subscribeSection) {

20 subscribeSection.parentNode.insertBefore(newElement, subscribeSection);

21 target = newElement;

22 } else {

23 const fullWidthSection = document.querySelector('.container.w-full');

24 if (fullWidthSection) {

25 fullWidthSection.prepend(newElement);

26 target = newElement;

27 }

28 }

29 }

30 if (target) {

31 lastInstance = FastCommentsUI(target, {

32 "tenantId": "demo"

33 });

34 }

35 setTimeout(load, 1000);

36 }

37

38 load();

39 })();

40</script>

41

Footer 섹션에 코드 붙여넣기

코드를 붙여넣은 후 변경 사항을 적용하려면 Save 버튼을 클릭하세요.

참고: 이 코드는 Typeflo.io 블로그 게시물에서 FastComments 위젯을 동적으로 최적의 위치에 배치하는 로직을 포함합니다. 다른 코드 스니펫은 Typeflo.io의 레이아웃에서 제대로 작동하지 않을 수 있습니다.

가입 후 실제 FastComments 테넌트 ID로 'demo'를 교체해야 합니다. FastComments.com에 로그인한 상태라면 이미 교체되어 있을 것입니다.

잘하셨습니다! Typeflo.io 블로그에 실시간 댓글 기능을 추가하셨습니다.

이제 FastComments가 블로그의 모든 게시물에 표시되어 독자들이 토론에 참여할 수 있습니다.

권한 거부 오류가 발생했거나 FastComments를 맞춤 설정하려면 계속 읽어보세요.

FastComments는 블로그 디자인에 맞게 맞춤화되도록 설계되었습니다.

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

Typeflo.io 블로그의 경우, FastComments 스크립트를 추가했던 동일한 Custom Code 섹션에 사용자 지정 CSS 스타일을 추가할 수 있습니다.