De Page Reacts-widget toont een aanpasbare set reactiepictogrammen op de commentaarwidget.

Gebruikers kunnen op de afbeeldingen klikken om te reageren, en het onthoudt de reacties die ze per pagina hebben geselecteerd. Als ze zijn ingelogd op fastcomments.com, is dit gekoppeld aan hun account.

Als je op Run klikt in het onderstaande voorbeeld kun je het in actie zien.

Voor Pagina-reacties moeten we twee dingen beslissen:

• Welke afbeeldingen voor reacties te gebruiken.
• Een korte id om elke reactie te benoemen.

Optioneel:

• Je kunt ook optioneel afzonderlijke afbeeldingen definiëren voor geselecteerde/niet-geselecteerde reacties.
• Je kunt bepalen of je de lijst met gebruikers die hebben gereageerd wilt tonen wanneer je met de muis over een van de reacties beweegt.

Voorbeeldcode Pagina-reacties

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

De configuratie voor de React-, Angular- en andere frontend-bibliotheken is hetzelfde.

De zwevende vind-ik-leuk-widget toont een zwevend vak rechtsonder op het scherm met aantallen likes en reacties. Je kunt het in actie zien op deze pagina!

Gebruikers kunnen op het hartje klikken om de pagina te liken, en het onthoudt welke pagina's ze hebben geliked. Als ze zijn ingelogd op fastcomments.com, wordt dit gekoppeld aan hun account om te voorkomen dat mensen een pagina meerdere keren liken.

Het detecteert ook automatisch de voorkeuren voor de donkere modus van de browser van de gebruiker en past zijn uiterlijk aan naar een donkere versie indien gewenst.

Installatie is eenvoudig:

Voorbeeldcode 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

De typesignatuur van de constructor is:

Configuratie

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Wijzig dit om de pagina-/artikel-id in te stellen. Standaard is het de pagina-URL.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Het ondersteunt SSO om de reacties te koppelen aan het account van de gebruiker voor authenticatie.

Op dit moment wordt alleen VanillaJS ondersteund. Als je wilt dat deze widget aan een van onze clientbibliotheken wordt toegevoegd, laat het ons weten!

Async-versie

Voorbeeldcode Floating Likes (asynchroon)

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

Met SSO

We kunnen ook Secure SSO- of Simple SSO-payloads meegeven:

Voorbeeldcode Floating Likes (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 // geef sso-object door

8 });

9</script>

10

Voorbeeldcode Floating Likes (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

Voor WordPress kan deze functie worden ingeschakeld door een plugin zoals WPCode te installeren en het volgende HTML-fragment aan de voettekst van de blog toe te voegen:

Floating Likes-code voor 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