Page Reacts | FastComments Docs

FastComments는 페이지별 반응의 여러 유형을 지원합니다. 우리는 "페이지 리액트"(이 페이지 하단에 데모됨)라고 부르는, 사용자 정의 가능한 이모지 또는 아이콘을 지원하며, 표시될 수 댓글 영역 위에.

우리는 또한 화면 오른쪽 하단에 나타나는 Floating Likes 위젯도 제공합니다. 이 문서는 둘 다 다룹니다.

페이지 리액션

Page Reacts 위젯은 댓글 위젯에 사용자 정의 가능한 반응 아이콘 세트를 표시합니다.

사용자는 이미지를 클릭하여 반응할 수 있으며, 페이지별로 선택한 반응을 기억합니다. fastcomments.com에 로그인한 경우 이는 그들의 계정에 연결됩니다.

아래 예제에서 Run을 클릭하면 작동 모습을 볼 수 있습니다.

설치 - 바닐라 JS

페이지 리액션에서는 두 가지를 결정해야 합니다:

어떤 리액션 이미지를 사용할지.
각 리액션의 이름으로 사용할 짧은 id.

선택적으로:

선택된/선택되지 않은 리액션을 위한 별도의 이미지를 정의할 수도 있습니다.
리액션 중 하나 위에 마우스를 올렸을 때 리액션한 사용자 목록을 표시할지 여부를 결정할 수 있습니다.

페이지 리액션 코드 예제

Copy

Run

<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>
<div id="page-reacts-example"></div>
<script>
    window.FastCommentsUI(document.getElementById('page-reacts-example'), {
        tenantId: 'demo',
        pageReactConfig: {
            showUsers: true,
            reacts: [
                {id: 'droll', src: 'https://docs.fastcomments.com/images/emojis/droll.png'},
                {id: 'he', src: 'https://docs.fastcomments.com/images/emojis/heart-eyes.png'},
                {id: 'laugh', src: 'https://docs.fastcomments.com/images/emojis/laugh.png'},
                {id: 'puke', src: 'https://docs.fastcomments.com/images/emojis/puke.png', selectedSrc: 'https://docs.fastcomments.com/images/emojis/puke-bw.png' },
                {id: 'rofl', src: 'https://docs.fastcomments.com/images/emojis/rofl.png' },
            ]
        }
    });
</script>

React, Angular 등의 프론트엔드 라이브러리에 대한 구성도 동일합니다.

플로팅 좋아요 위젯

플로팅 좋아요 위젯은 좋아요 및 댓글 수가 표시된 상자를 화면 오른쪽 하단에 띄워 보여줍니다. 이 페이지에서 실제로 작동하는 모습을 확인할 수 있습니다!

사용자는 하트를 클릭하여 페이지에 좋아요를 누를 수 있으며, 사용자가 좋아요를 누른 페이지를 기억합니다. 만약 사용자가 fastcomments.com에 로그인되어 있다면, 이는 그들의 계정과 연결되어 한 페이지에 여러 번 좋아요를 누르는 것을 방지하는 데 도움이 됩니다.

또한 사용자의 브라우저 다크 모드 선호도를 자동으로 감지하여 원하면 스킨을 다크 버전으로 변경합니다.

설치 - 바닐라 JS

설치는 간단합니다:

플로팅 좋아요 코드 예제

Copy

<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>
<div id="fastcomments-page-likes-floating"></div>
<script>
    window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {
        tenantId: 'demo'
    });
</script>

생성자의 타입 시그니처는 다음과 같습니다:

구성

Copy

/**
 *
 * @param {HTMLElement} targetElement
 * @param config
 * @property {string} tenantId
 * @property {string} urlId - 페이지/기사 ID를 설정하려면 이를 변경하세요. 기본적으로 페이지 URL입니다.
 * @property {() => void} [onOpenComments]
 * @property {object} [sso]
 * @constructor
 */

이는 인증을 위해 반응(좋아요 등)을 사용자의 계정에 연결하는 SSO를 지원합니다.

현재는 VanillaJS만 지원됩니다. 이 위젯을 당사의 클라이언트 라이브러리 중 하나에 추가하길 원하시면 알려주세요!

비동기 버전

플로팅 좋아요 코드 비동기 예제

Copy

<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js?v=2" async></script>
<div id="fastcomments-page-likes-floating"></div>
<script>
    (function () {
        function tryLoad() {
            if (window.FastCommentsEmbedPageLikesFloating) {
                window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {
                    tenantId: 'demo'
                });
            } else {
                setTimeout(tryLoad, 50);
            }
        }
        tryLoad();
    })();
</script>

SSO 사용

보안 SSO(Secure SSO) 또는 간단한 SSO(Simple SSO) 페이로드도 전달할 수 있습니다:

플로팅 좋아요 보안 SSO 코드 예제

Copy

<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>
<div id="fastcomments-page-likes-floating"></div>
<script>
    window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {
        tenantId: 'demo',
        sso // sso 객체 전달
    });
</script>

플로팅 좋아요 간단한 SSO 코드 예제

Copy

<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>
<div id="fastcomments-page-likes-floating"></div>
<script>
    window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {
        tenantId: 'demo',
        simpleSSO: {
            id: 'some-user-id',
            username: 'some username',
            email: 'some@email.com',
        }
    });
</script>

설치 - 워드프레스

WordPress에서는 WPCode와 같은 플러그인을 설치하고 다음 HTML 스니펫을 블로그 하단(footer)에 추가하면 이 기능을 활성화할 수 있습니다:

WordPress용 플로팅 좋아요 코드

Copy

<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js" async></script>
<div id="fastcomments-page-likes-floating"></div>
<script>
    (function () {
        function tryLoad() {
            if (window.FastCommentsEmbedPageLikesFloating) {
                const articles = document.getElementsByTagName('article');
                if (!articles.length) {
                    return console.warn('Article not found to show fastcomments likes.');
                }
                window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {
                    tenantId: '-VuPDR12d-v_',
                    urlId: articles[0].id.replace('post-', '')
                });
            } else {
                setTimeout(tryLoad, 50);
            }
        }
        tryLoad();
    })();
</script>

언어 🇰🇷 한국어

페이지 리액션

플로팅 좋아요 위젯

페이지 리액션

설치 - 바닐라 JS

플로팅 좋아요 위젯

설치 - 바닐라 JS

비동기 버전

SSO 사용

설치 - 워드프레스