The Page Reacts 小部件在评论小部件上显示可定制的一组反应图标。

用户可以点击图像进行反应，并且会记住他们在每个页面上选择的反应。如果他们已登录 fastcomments.com，则该反应与他们的 account 相关联。

如果您在下面的示例上点击 Run，即可查看其运行效果。

对于页面反应 (Page Reacts)，我们需要决定两件事：

• 要使用哪些反应图片。
• 为每个反应指定一个简短的 id。

可选：

• 您也可以为已选中/未选中的反应定义单独的可选图片。
• 您可以决定在鼠标悬停在某个反应上时是否显示做出该反应的用户列表。

页面反应代码示例

Copy Run

1

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

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

4<script>

5 window.FastCommentsUI(document.getElementById('page-reacts-example'), {

6 tenantId: 'demo',

7 pageReactConfig: {

8 showUsers: true,

9 reacts: [

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

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

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

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

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

15 ]

16 }

17 });

18</script>

19

对于 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

我们也可以传递 Secure 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 片段添加到博客页脚来启用此功能：

适用于 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