Page Reacts видџет приказује прилагодљив скуп иконица реакција на коментарском видџету.

Корисници могу кликнути на слике да би реаговали, и он памти реакције које су одабрали по страници. Ако су пријављени на fastcomments.com, ово је везано за њихов налог.

Ако кликнете на Run на примеру испод можете видјети како ради.

За Page Reacts морамо одлучити о двије ствари:

• Које слике реакција користити.
• Кратак id за именовање сваке реакције.

Опционо:

• Можете такође дефинисати опционе посебне слике за одабране/неодабране реакције.
• Можете одлучити да ли желите приказати списак корисника који су реаговали када померите миша преко једне од реакција.

Пример кода за реакције странице

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

Конфигурација за React, Angular и сличне frontend библиотеке је иста.

Видгет за лајкове који плута приказује плутајући оквир у доњем десном углу екрана са бројем лајкова и коментара. Можете га видјети у акцији на овој страни!

Корисници могу кликнути на срце да лајкују страну, и он памти стране које су лајковали. Ако су пријављени на fastcomments.com, ово је везано за њихов налог како би се спречило да људи више пута лајкују исту страну.

Такође аутоматски открива преференције корисниковог прегледача за тамни режим и мења свој изглед у тамну верзију ако је то пожељно.

Instalacija je jednostavna:

Primjer 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 - Promijenite ovo da postavite ID stranice/artikla. Po zadanom, to je URL stranice.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Podržava SSO za povezivanje reakcija sa korisničkim nalogom radi autentifikacije.

Trenutno je podržan samo VanillaJS. Ako želite da se ovaj widget doda u neku od naših klijentskih biblioteka, obavijestite nas!

Asinhrona verzija

Asinhroni primjer 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 proslijediti Sigurni SSO ili Jednostavni SSO podatke:

Primjer koda za Sigurni 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 // proslijedite sso objekat

8 });

9</script>

10

Primjer koda za Jednostavni 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 poput 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