Le widget Page Reacts affiche un ensemble personnalisable d'icônes de réaction dans 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 par 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 séparées optionnelles pour les réactions sélectionnées/non sélectionnées.
• Vous pouvez décider si vous voulez afficher la liste des utilisateurs qui ont réagi lorsque la souris passe au-dessus de l'une des réactions.

Exemple de code pour 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 de likes flottant affiche une boîte flottante en bas à droite de l'écran avec les comptes de likes 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 mémorise les pages qu'ils ont aimées. S'ils sont connectés sur fastcomments.com, cela est lié à leur compte pour aider à empêcher les personnes d'aimer une page plusieurs fois.

Il détecte également automatiquement les préférences de mode sombre du navigateur de l'utilisateur et change son apparence vers une version sombre si souhaité.

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'identifiant de la page/de l'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 associer les réactions au compte de l'utilisateur à des fins d'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 Floating Likes (asynchrone)

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 transmettre des payloads SSO sécurisé ou SSO simple :

Exemple de code Floating Likes SSO sécurisé

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 Floating Likes SSO simple

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 blog :

Code des likes 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