Das Page Reacts-Widget zeigt eine anpassbare Auswahl von Reaktionssymbolen im Kommentar-Widget an.

Benutzer können auf die Bilder klicken, um zu reagieren, und es merkt sich die Reaktionen, die sie pro Seite ausgewählt haben. Wenn sie bei fastcomments.com angemeldet sind, ist dies mit ihrem Konto verknüpft.

Wenn Sie im folgenden Beispiel auf Run klicken, können Sie es in Aktion sehen.

Für Seitenreaktionen müssen wir zwei Dinge entscheiden:

• Welche Reaktionsbilder verwendet werden sollen.
• Eine kurze id, um jede Reaktion zu benennen.

Optional:

• Sie können außerdem optionale separate Bilder für ausgewählte/nicht ausgewählte Reaktionen definieren.
• Sie können entscheiden, ob Sie die Liste der Nutzer anzeigen möchten, die reagiert haben, wenn Sie mit der Maus über eine der Reaktionen fahren.

Codebeispiel für Seitenreaktionen

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

Die Konfiguration für die React-, Angular- und andere Frontend-Bibliotheken ist dieselbe.

Das Floating-Likes-Widget zeigt ein schwebendes Kästchen unten rechts auf dem Bildschirm mit Angaben zur Anzahl der Likes und Kommentare. Sie können es auf dieser Seite in Aktion sehen!

Benutzer können auf das Herz klicken, um die Seite zu liken, und es merkt sich die Seiten, die sie geliked haben. Wenn sie bei fastcomments.com angemeldet sind, ist dies mit ihrem Konto verknüpft, um zu verhindern, dass Personen eine Seite mehrfach liken.

Es erkennt außerdem automatisch die Dark-Mode-Einstellungen des Browsers des Nutzers und wechselt bei Bedarf in eine dunkle Darstellung.

Die Installation ist einfach:

Floating Likes Code-Beispiel

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

Die Typsignatur des Konstruktors lautet:

Konfiguration

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Ändern Sie dies, um die Seiten-/Artikel-ID festzulegen. Standardmäßig ist es die Seiten-URL.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Es unterstützt sso, um die Reaktionen mit dem Benutzerkonto zur Authentifizierung zu verknüpfen.

Derzeit wird nur VanillaJS unterstützt. Wenn Sie möchten, dass dieses Widget zu einer unserer Client-Bibliotheken hinzugefügt wird, lassen Sie es uns wissen!

Asynchrone Version

Floating Likes Code Async-Beispiel

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

Mit SSO

Wir können außerdem Secure SSO- oder Simple SSO-Payloads übergeben:

Floating Likes Secure SSO Code-Beispiel

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-Objekt übergeben

8 });

9</script>

10

Floating Likes Simple SSO Code-Beispiel

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

Für WordPress kann dieses Feature aktiviert werden, indem Sie ein Plugin wie WPCode installieren und den folgenden HTML-Snippet in die Fußzeile des Blogs einfügen:

Floating Likes-Code für 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