El widget Page Reacts muestra un conjunto personalizable de iconos de reacción en el widget de comentarios.

Los usuarios pueden hacer clic en las imágenes para reaccionar, y recuerda las reacciones que han seleccionado por página. Si han iniciado sesión en fastcomments.com, esto está vinculado a su cuenta.

Si hace clic en Run en el ejemplo de abajo puedes verlo en acción.

Para Page Reacts tenemos que decidir dos cosas:

• Qué imágenes de reacción usar.
• Un id corto para nombrar cada reacción.

Opcionalmente:

• También puedes definir imágenes separadas opcionales para reacciones seleccionadas/no seleccionadas.
• Puedes decidir si quieres mostrar la lista de usuarios que reaccionaron al mover el ratón sobre una de las reacciones.

Ejemplo de código de Reacciones de página

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 configuración para las bibliotecas frontend React, Angular, y demás es la misma.

El widget de "me gusta" flotante muestra una caja flotante en la esquina inferior derecha de la pantalla con los contadores de "me gusta" y comentarios. ¡Puedes verlo en acción en esta página!

Los usuarios pueden hacer clic en el corazón para darle "me gusta" a la página, y recuerda las páginas que han marcado con "me gusta". Si han iniciado sesión en fastcomments.com, esto está vinculado a su cuenta para ayudar a evitar que las personas den "me gusta" a una página varias veces.

También detecta automáticamente las preferencias de modo oscuro del navegador del usuario y cambia su apariencia a una versión oscura si así se desea.

La instalación es sencilla:

Ejemplo de código de 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 de tipo del constructor es:

Configuración

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Cambie esto para establecer el id de la página/artículo. Por defecto, es la URL de la página.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Admite SSO para vincular las reacciones a la cuenta del usuario para la autenticación.

Actualmente, solo se admite VanillaJS. Si desea que este widget se agregue a una de nuestras bibliotecas cliente, ¡háganoslo saber!

Versión asíncrona

Ejemplo de código asíncrono de 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

Con SSO

También podemos pasar cargas útiles de SSO seguro o SSO simple:

Ejemplo de código de SSO seguro de 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 // pasar objeto sso

8 });

9</script>

10

Ejemplo de código de SSO simple de 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

Para WordPress, esta función se puede habilitar instalando un complemento como WPCode y agregando el siguiente fragmento HTML al pie del blog:

Código de Me gusta flotante para 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