Page Reacts | FastComments Docs

FastComments תומך במספר סוגים של תגובות לדף. אנו תומכים במה שאנחנו קוראים לו "Page Reacts" (מוצג בתחתית דף זה) שהן אימוג'ים מותאמים אישית, או סמלונים, שיכולים להופיע מעל אזור ההערות.

יש לנו גם את הווידג'ט Floating Likes שמופיע בפינה הימנית התחתונה של המסך. התיעוד הזה מכסה את שניהם.

תגובות לעמוד

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

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

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

התקנה - VanillaJS

עבור Page Reacts עלינו להחליט על שתי נקודות:

אילו תמונות תגובה להשתמש.
id קצר לשם כל תגובה.

באופן אופציונלי:

ניתן גם להגדיר תמונות נפרדות אופציונליות לתגובות שנבחרו/לא נבחרו.
ניתן להחליט אם להציג את רשימת המשתמשים שהגיבו בעת העברת העכבר מעל אחת מהתגובות.

דוגמת קוד ל-Page Reacts

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>

ההגדרה עבור ספריות ה־frontend כמו React, Angular וכו' זהה.

ווידג'ט הלייקים הצף

הווידג'ט של לייקים צף מציג תיבה צפה בפינה הימנית התחתונה של המסך עם מספרי לייקים ותגובות. ניתן לראות אותו בפעולה בדף זה!

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

כמו כן הוא מזהה אוטומטית את העדפות מצב כהה של הדפדפן של המשתמש ומשנה את המראה שלו לגרסה כהה אם רוצים.

התקנה - VanillaJS

ההתקנה פשוטה:

דוגמת קוד - לייקים צפים

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 - שנה זאת כדי להגדיר את מזהה הדף/המאמר. כברירת מחדל, זהו כתובת ה-URL של הדף.
 * @property {() => void} [onOpenComments]
 * @property {object} [sso]
 * @constructor
 */

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

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

קוד לייקים צפים ל־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>

שפה 🇮🇱 עברית

תגובות לעמוד

ווידג'ט הלייקים הצף

תגובות לעמוד

התקנה - VanillaJS

ווידג'ט הלייקים הצף

התקנה - VanillaJS

גרסה אסינכרונית

עם SSO

התקנה - וורדפרס