ווידג'ט Page Reacts מציג סט אייקונים של תגובות שניתן להתאמה אישית בווידג'ט של ההערות.

משתמשים יכולים ללחוץ על התמונות כדי להגיב, והמערכת זוכרת את התגובות שבחרו עבור כל עמוד. אם הם מחוברים ל-fastcomments.com, זה מקושר אל החשבון שלהם.

אם תלחץ על Run בדוגמה שלהלן תוכל לראות זאת בפעולה.

לגבי תגובות בעמוד עלינו להחליט שתי נקודות:

• אילו תמונות תגובה להשתמש בהן.
• מזהה קצר (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

התצורה עבור ספריות ה־frontend כמו 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 - שנה זאת כדי להגדיר את מזהה הדף/המאמר. כברירת מחדל, זהו כתובת ה-URL של הדף.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

זה תומך ב sso כדי לקשר את ה-reacts לחשבון המשתמש לצרכי אימות.

כעת נתמך רק 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 מאובטח או 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