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

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

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

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

• Које слике реакција ћемо користити.
• Кратак id да именујемо сваку реакцију.

Опционо:

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

Примјер кода за Page Reacts

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

Конфигурација за 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

Tip potpisa 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. Podrazumijevano, 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 widget bude dodat jednoj od naših klijentskih biblioteka, javite nam!

Asinhrona verzija

Primjer 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đer možemo proslijediti Secure SSO ili Simple SSO podatke:

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

8 });

9</script>

10

Primjer koda 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 poput WPCode i dodavanjem sljedeć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