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

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

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

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

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

Опционално:

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

Пример кода за 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

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

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

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

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

Instalacija je jednostavna:

Пример кода за лебдеће лајкове

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

Типска сигнатура конструктора је:

Конфигурација

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Промените ово да бисте поставили id странице/артикла. По подразумеваној вредности, то је URL странице.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

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

Тренутно је подржан само VanillaJS. Ако желите да овај видгет буде додат у једну од наших клијентских библиотека, јавите нам!

Асинхрона верзија

Пример асинхроног кода за лебдеће лајкове

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

Са SSO

Такође можемо проследити Secure SSO или Simple SSO податке:

Пример кода за лебдеће лајкове са 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 // проследити sso објекат

8 });

9</script>

10

Пример кода за лебдеће лајкове са 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

За WordPress, ова функција се може омогућити инсталирањем додатка као што је WPCode и додавањем следећег HTML исечка у подножје блога:

Код за плавајуће лајкове за 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