Bubble.io 사이트에 실시간 댓글 추가

먼저 FastComments를 추가하려는 페이지/레이아웃으로 이동하세요. Bubble 편집기에서 Visual Elements 사이드바의 HTML 요소를 페이지에 끌어다 놓으세요.

HTML 요소 추가

HTML 요소를 사용하면 FastComments 위젯을 Bubble 앱에 직접 삽입할 수 있습니다.

방금 추가한 HTML 요소를 클릭하세요. 표시되는 속성 편집기에서 HTML 필드에 다음 코드를 붙여넣으세요:

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

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 // Bubble은 코드 스니펫을 비동기(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

FastComments 코드 삽입

참고: 이 코드는 Bubble의 동적 환경에서 FastComments가 올바르게 로드되도록 재시도 메커니즘을 포함합니다. 다른 코드 스니펫은 작동하지 않습니다.

가입 후 'demo'를 실제 FastComments 테넌트 ID로 바꿔야 합니다. FastComments.com에 로그인되어 있으면 이미 바뀌어 있을 것입니다.

댓글 위젯이 올바르게 표시되도록 하려면 HTML 요소의 너비를 조정해야 합니다. 요소의 속성 편집기에서 Layout 탭을 찾으세요.

너비 설정 찾기

Layout 탭에는 다양한 화면 크기에서 댓글 위젯이 올바르게 표시되도록 도와주는 중요한 크기 옵션들이 포함되어 있습니다.

레이아웃 탭에서 너비를 **100%**로 설정하세요. 이렇게 하면 댓글 위젯이 컨테이너의 전체 너비를 차지하고 다양한 화면 크기에 맞게 올바르게 반응합니다.

너비를 100%로 설정

입력 값을 100 (또는 원하는 백분율)로 변경한 후에는 숫자 옆의 드롭다운을 클릭하여 픽셀에서 퍼센트로 변경해야 합니다.

또한 댓글 위젯이 제대로 표시될 수 있도록 최소 높이(예: 400px)를 설정하세요.

변경을 마친 후 Preview 버튼을 클릭하여 FastComments 위젯이 작동하는 모습을 확인하세요!

잘하셨습니다! Bubble.io 사이트에 라이브 댓글 기능을 추가하셨습니다.

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

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

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