Le widget Page Reacts affiche un ensemble d'icônes de réaction personnalisable sur le widget de commentaires.

Les utilisateurs peuvent cliquer sur les images pour réagir, et il mémorise les réactions qu'ils ont sélectionnées pour chaque page. S'ils sont connectés à fastcomments.com, cela est lié à leur compte.

Si vous cliquez sur Run dans l'exemple ci-dessous, vous pouvez le voir en action.

Pour Page Reacts nous devons décider de deux choses :

• Quelles images de réaction utiliser.
• Un id court pour nommer chaque réaction.

Optionnellement :

• Vous pouvez également définir des images distinctes facultatives pour les réactions sélectionnées/non sélectionnées.
• Vous pouvez décider si vous souhaitez afficher la liste des utilisateurs ayant réagi lorsque vous déplacez la souris sur l'une des réactions.

Exemple de code 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 configuration pour les bibliothèques frontend React, Angular, etc. est la même.

Le widget flottant de mentions J’aime affiche une boîte flottante en bas à droite de l’écran avec le nombre de mentions J’aime et de commentaires. Vous pouvez le voir en action sur cette page!

Les utilisateurs peuvent cliquer sur le cœur pour aimer la page, et il se souvient des pages qu'ils ont aimées. S'ils sont connectés à fastcomments.com, cela est lié à leur compte afin d'aider à éviter que des personnes n'aiment une page plusieurs fois.

Il détecte également automatiquement les préférences de mode sombre du navigateur de l'utilisateur et adapte son apparence à une version sombre si l'utilisateur le souhaite.

L'installation est simple :

Exemple de code : 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 signature de type du constructeur est :

Configuration

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Changez ceci pour définir l'ID de la page/article. Par défaut, il s'agit de l'URL de la page.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Il prend en charge le SSO pour lier les réactions au compte de l'utilisateur pour l'authentification.

Actuellement, seul VanillaJS est pris en charge. Si vous souhaitez que ce widget soit ajouté à l'une de nos bibliothèques clientes, faites-le nous savoir !

Version asynchrone

Exemple de code asynchrone : Floating Likes

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

Avec SSO

Nous pouvons également passer des charges utiles SSO sécurisées ou SSO simples :

Exemple de code SSO sécurisé : 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 sso // passer l'objet SSO

8 });

9</script>

10

Exemple de code Simple SSO : 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 simpleSSO: {

8 id: 'some-user-id',

9 username: 'some username',

10 email: 'some@email.com',

11 }

12 });

13</script>

14

Pour WordPress, cette fonctionnalité peut être activée en installant un plugin comme WPCode et en ajoutant l'extrait HTML suivant au pied de page du blogue :

Code des boutons « J’aime » flottants pour 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