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.

Za Page Reacts se moramo odločiti o dveh stvareh:

• Katere slike reakcij uporabiti.
• Kratek id za poimenovanje vsake reakcije.

Neobvezno:

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

Primer kode za odzive strani

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 frontend knjižnice, kot so React, Angular in podobne, 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