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

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

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

For Page Reacts에서는 두 가지를 결정해야 합니다:

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

선택적으로:

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

페이지 리액트 코드 예제

Copy Run

1

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

3<div id="page-reacts-example"></div>

4<script>

5 window.fcConfigs = [{

6 target: '#page-reacts-example',

7 tenantId: 'demo',

8 pageReactConfig: {

9 showUsers: true,

10 reacts: [

11 {id: 'droll', src: 'https://docs.fastcomments.com/images/emojis/droll.png'},

12 {id: 'he', src: 'https://docs.fastcomments.com/images/emojis/heart-eyes.png'},

13 {id: 'laugh', src: 'https://docs.fastcomments.com/images/emojis/laugh.png'},

14 {id: 'puke', src: 'https://docs.fastcomments.com/images/emojis/puke.png', selectedSrc: 'https://docs.fastcomments.com/images/emojis/puke-bw.png' },

15 {id: 'rofl', src: 'https://docs.fastcomments.com/images/emojis/rofl.png' },

16 ]

17 }

18 }];

19</script>

20

React, Angular 등 프런트엔드 라이브러리의 구성은 동일합니다.

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

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

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

설치는 간단합니다:

플로팅 좋아요 코드 예제

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo'

7 });

8</script>

9

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

구성

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - 페이지/기사 ID를 설정하려면 이를 변경하세요. 기본적으로 페이지 URL입니다.

8 * @property {() => void} [onOpenComments]

9 * @property {object} [sso]

10 * @constructor

11 */

12

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

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

비동기 버전

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

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js?v=2" async></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

9 tenantId: 'demo'

10 });

11 } else {

12 setTimeout(tryLoad, 50);

13 }

14 }

15

16 tryLoad();

17 })();

18</script>

19

SSO 사용

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

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

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 sso // sso 객체 전달

8 });

9</script>

10

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

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-page-likes-floating.min.js"></script>

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

6 tenantId: 'demo',

7 simpleSSO: {

8 id: 'some-user-id',

9 username: 'some username',

10 email: 'some@email.com',

11 }

12 });

13</script>

14

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

WordPress용 플로팅 좋아요 코드

Copy

1

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

3<div id="fastcomments-page-likes-floating"></div>

4<script>

5 (function () {

6 function tryLoad() {

7 if (window.FastCommentsEmbedPageLikesFloating) {

8 const articles = document.getElementsByTagName('article');

9 if (!articles.length) {

10 return console.warn('Article not found to show fastcomments likes.');

11 }

12 window.FastCommentsEmbedPageLikesFloating(document.getElementById('fastcomments-page-likes-floating'), {

13 tenantId: '-VuPDR12d-v_',

14 urlId: articles[0].id.replace('post-', '')

15 });

16 } else {

17 setTimeout(tryLoad, 50);

18 }

19 }

20

21 tryLoad();

22 })();

23</script>

24