Page Reacts widget prikazuje prilagodljiv skup ikona reakcija na komentarskom widgetu.

Korisnici mogu kliknuti slike da reaguju, i pamti reakcije koje su odabrali po stranici. Ako su prijavljeni na fastcomments.com, ovo je vezano za njihov nalog.

Ako kliknete na Run u primeru ispod možete videti kako radi.

Za Page Reacts moramo odlučiti o dve stvari:

• Koje slike reakcija ćemo koristiti.
• Kratki id za imenovanje svake reakcije.

Opcionalno:

• Takođe možete definisati odvojene slike za izabrane/neizabrane reakcije.
• Možete odlučiti da li želite prikaz liste korisnika koji su reagovali kada se miš pređe preko jedne od reakcija.

Primer koda za 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

Konfiguracija za React, Angular i druge frontend biblioteke je ista.

Widget za plutajuće lajkove prikazuje okvir koji se pojavljuje u donjem desnom uglu ekrana sa brojem lajkova i komentara. Možete ga videti u akciji na ovoj stranici!

Korisnici mogu kliknuti na srce da lajkuju stranicu, i on pamti stranice koje su lajkovali. Ako su prijavljeni na fastcomments.com, ovo je povezano sa njihovim nalogom kako bi se sprečilo da ljudi više puta lajkuju istu stranicu.

Takođe automatski detektuje podešavanja tamnog režima u korisnikovom pretraživaču i, ako je poželjno, menja svoj izgled u tamnu verziju.

Instalacija je jednostavna:

Primer koda za plutajuće lajkove

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

Potpis tipa konstruktora je:

Konfiguracija

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Promenite ovo da biste postavili id stranice/članka. Po podrazumevanju, to je URL stranice.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Podržava SSO kako bi povezao reakcije sa korisničkim nalogom radi autentifikacije.

Trenutno je podržan samo VanillaJS. Ako želite da ovaj vidžet bude dodat u neku od naših klijentskih biblioteka, javite nam!

Asinhrona verzija

Primer asinhronog koda za plutajuće lajkove

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

Sa SSO

Takođe možemo proslediti Secure SSO ili Simple SSO podatke:

Primer koda za Secure SSO za plutajuće lajkove

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 // prosledi sso objekat

8 });

9</script>

10

Primer koda za Simple SSO za plutajuće lajkove

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

Za WordPress, ovu funkciju možete omogućiti instaliranjem dodatka kao što je WPCode i dodavanjem sledećeg HTML isječka u podnožje bloga:

Kod za plutajuće lajkove za 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