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 Reakcije na stranici moramo da odlučimo o dve stvari:

• Koje slike reakcija koristiti.
• Kratak id za imenovanje svake reakcije.

Opcionalno:

• Možete takođe definisati opcione odvojene slike za izabrane/neuizabrane reakcije.
• Možete odlučiti da li želite da prikažete listu korisnika koji su reagovali kada se miš pomeri preko jedne od reakcija.

Primer koda za Reakcije na stranici

Copy Run

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="page-reacts-example"></div>

4<script>

5 window.fcConfigs = [{

6 target: '#page-reacts-example',

7 tenantId: 'demo',

8 pageReactConfig: {

9 showUsers: true,

10 reacts: [

11 {id: 'droll', src: 'https://docs.fastcomments.com/images/emojis/droll.png'},

12 {id: 'he', src: 'https://docs.fastcomments.com/images/emojis/heart-eyes.png'},

13 {id: 'laugh', src: 'https://docs.fastcomments.com/images/emojis/laugh.png'},

14 {id: 'puke', src: 'https://docs.fastcomments.com/images/emojis/puke.png', selectedSrc: 'https://docs.fastcomments.com/images/emojis/puke-bw.png' },

15 {id: 'rofl', src: 'https://docs.fastcomments.com/images/emojis/rofl.png' },

16 ]

17 }

18 }];

19</script>

20

Konfiguracija za React, Angular i ostale front-end 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