Pripomoček Page Reacts prikazuje prilagodljiv nabor ikon odzivov na pripomočku za komentarje.

Uporabniki lahko kliknejo slike, da reagirajo, in si zapomni odzive, ki so jih izbrali za vsako stran. Če so prijavljeni na fastcomments.com, je to povezano z njihovim računom.

Če kliknete Run na spodnjem primeru si lahko ogledate delovanje.

Pri Page Reacts se moramo odločiti o dveh zadevah:

• Katero sliko reakcije bomo uporabili.
• Kratko id, s katerim poimenujemo vsako reakcijo.

Neobvezno:

• Lahko določite tudi ločene neobvezne slike za izbrane in neizbrane reakcije.
• Lahko se odločite, ali želite prikazati seznam uporabnikov, ki so reagirali, ko premaknete miško nad eno izmed reakcij.

Primer kode 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 in druge frontend knjižnice je enaka.

Plavajoči pripomoček za všečke prikazuje plavajočo škatlo v spodnjem desnem kotu zaslona s številom všečkov in komentarjev. Lahko si ga ogledate v akciji na tej strani!

Uporabniki lahko kliknejo srček, da všečkajo stran, in si zapomni strani, ki so jim všečkali. Če so prijavljeni na fastcomments.com, je to vezano na njihov račun, kar pomaga preprečiti, da bi ljudje stran všečkali večkrat.

Samodejno tudi zazna uporabnikove nastavitve temnega načina brskalnika in po želji spremeni svojo kožo v temno različico.

Namestitev je preprosta:

Primer kode za lebdeče všečke

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 podpisa konstruktorja je:

Konfiguracija

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Spremenite to za nastavitev ID-ja strani/članka. Privzeto je to URL strani.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

Podpira sso, da poveže reakcije z računom uporabnika za overjanje.

Trenutno je podprt samo VanillaJS. Če želite, da se ta pripomoček doda v eno izmed naših odjemalskih knjižnic, nam sporočite!

Asinhrona različica

Primer asinhrone kode za lebdeče všečke

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

Z SSO

Lahko posredujemo tudi Secure SSO ali Simple SSO podatke:

Primer kode za varno SSO za lebdeče všečke

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 // posredujte sso objekt

8 });

9</script>

10

Primer kode za preprosto SSO za lebdeče všečke

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 lahko to funkcijo omogočite z namestitvijo vtičnika, kot je WPCode, in dodajanjem naslednjega HTML odlomka v nogo bloga:

Koda lebdečih všečkov 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