Il widget Page Reacts visualizza un set personalizzabile di icone di reazione nel widget dei commenti.

Gli utenti possono cliccare le immagini per reagire, e ricorda le reazioni che hanno selezionato per pagina. Se hanno effettuato l'accesso su fastcomments.com, questo è legato al loro account.

Se clicchi su Run nell'esempio qui sotto puoi vederlo in azione.

Per Page Reacts dobbiamo decidere due cose:

• Quali immagini di reazione utilizzare.
• Un breve id per nominare ogni reazione.

Opzionalmente:

• È inoltre possibile definire immagini separate opzionali per le reazioni selezionate/non selezionate.
• È possibile decidere se mostrare l'elenco degli utenti che hanno reagito quando si sposta il mouse sopra una delle reazioni.

Esempio di codice per 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

La configurazione per le librerie frontend React, Angular e simili è la stessa.

Il widget flottante dei "Mi piace" mostra una casella fluttuante nell'angolo in basso a destra dello schermo con i conteggi dei Mi piace e dei commenti. Puoi vederlo in azione in questa pagina!

Gli utenti possono cliccare il cuore per mettere "Mi piace" alla pagina, e il widget ricorda le pagine a cui hanno messo "Mi piace". Se hanno effettuato l'accesso su fastcomments.com, questo è collegato al loro account per aiutare a impedire che le persone mettano "Mi piace" a una pagina più volte.

Rileva anche automaticamente le preferenze della modalità scura del browser dell'utente e cambia il suo aspetto in una versione scura, se desiderato.

L'installazione è semplice:

Esempio di codice Floating Likes

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

La firma del costruttore è:

Configurazione

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Cambia questo per impostare l'id della pagina/articolo. Per impostazione predefinita, è l'URL della pagina.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Supporta sso per associare le reazioni all'account dell'utente per l'autenticazione.

Attualmente è supportato solo VanillaJS. Se desideri che questo widget venga aggiunto a una delle nostre librerie client, faccelo sapere!

Versione Async

Esempio di codice Floating Likes (Async)

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

Con SSO

Possiamo anche passare payload Secure SSO o Simple SSO:

Esempio di codice Floating Likes con Secure 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 // passa l'oggetto sso

8 });

9</script>

10

Esempio di codice Floating Likes con Simple 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

Per WordPress, questa funzione può essere abilitata installando un plugin come WPCode e aggiungendo il seguente frammento HTML al footer del blog:

Codice Mi Piace Fluttuante per 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