Page Reacts-widgeten viser et tilpasseligt sæt reaktionsikoner på kommentarfeltet.

Brugere kan klikke på billederne for at reagere, og den husker de reaktioner, de har valgt pr. side. Hvis de er logget ind på fastcomments.com, er dette knyttet til deres konto.

Hvis du klikker på Run i eksemplet nedenfor kan du se det i aktion.

For Side-reaktioner skal vi beslutte to ting:

• Hvilke reaktionsbilleder der skal bruges.
• Et kort id til at navngive hver reaktion.

Valgfrit:

• Du kan også definere separate billeder for valgte/ikke-valgte reaktioner.
• Du kan beslutte, om du vil vise listen over brugere, der har reageret, når du bevæger musen over en af reaktionerne.

Side-reaktioner kodeeksempel

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

Konfigurationen for frontend-biblioteker som React, Angular osv. er den samme.

Det flydende likes-widget viser en flydende boks i nederste højre hjørne af skærmen med antal likes og kommentarer. Du kan se det i aktion på denne side!

Brugere kan klikke på hjertet for at like siden, og det husker sider, de har liket. Hvis de er logget ind på fastcomments.com, er dette knyttet til deres konto for at forhindre, at folk kan like en side flere gange.

Det registrerer også automatisk brugerens browsers præferencer for mørk tilstand og skifter sit udseende til en mørk version, hvis det ønskes.

Installation er enkel:

Floating Likes kodeeksempel

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

Type-signaturen for konstruktøren er:

Konfiguration

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Skift dette for at angive side-/artikel-id. Som standard er det side-URL'en.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Den understøtter sso for at knytte reaktionerne til brugerens konto til autentificering.

I øjeblikket understøttes kun VanillaJS. Hvis du gerne vil have denne widget føjet til et af vores klientbiblioteker, så lad os det vide!

Asynkron version

Floating Likes asynkront kodeeksempel

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

Med SSO

Vi kan også sende Secure SSO- eller Simple SSO-payloads:

Floating Likes Secure SSO kodeeksempel

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 // send sso-objekt

8 });

9</script>

10

Floating Likes Simple SSO kodeeksempel

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

For WordPress kan denne funktion aktiveres ved at installere et plugin som WPCode og tilføje følgende HTML-udsnit til bloggens sidefod:

Flydende Likes-kode til 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