Page Reacts 小工具會在評論小工具上顯示一組可自訂的反應圖示。

使用者可以點擊圖像來表達反應，且系統會記住他們在每個頁面所選的反應。如果他們已登入 fastcomments.com，這些反應將會與他們的帳戶綁定。

如果你在下面的範例上點選 Run，就可以看到其實際效果。

針對 Page Reacts，我們需要決定兩件事：

• 要使用哪些反應圖像。
• 一個用來命名每個反應的短 id。

選擇性：

• 你也可以為已選取/未選取的反應定義不同的圖像（可選）。
• 你可以決定是否在滑鼠移到某個反應上時顯示已回應使用者的清單。

Page Reacts 程式碼範例

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