Віджет Page Reacts відображає настроюваний набір іконок реакцій у віджеті коментарів.

Користувачі можуть натискати на зображення, щоб відреагувати, і він запам'ятовує реакції, які вони вибрали для кожної сторінки. Якщо вони увійшли в fastcomments.com, це пов'язано з їхнім обліковим записом.

Якщо ви натиснете Run на прикладі нижче, ви зможете побачити це в дії.

Для реакцій сторінки нам потрібно вирішити дві речі:

• Які зображення реакцій використовувати.
• Короткий 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 та інших фронтенд-бібліотек є така сама.

Плаваючий віджет лайків відображає плаваюче вікно в правому нижньому куті екрану з кількістю лайків та коментарів. Ви можете побачити його в дії на цій сторінці!

Користувачі можуть натиснути на сердечко, щоб поставити лайк сторінці, і воно запам'ятовує сторінки, які вони лайкнули. Якщо вони увійшли на fastcomments.com, це пов'язано з їхнім обліковим записом, щоб допомогти запобігти тому, щоб люди ставили лайк сторінці кілька разів.

Воно також автоматично визначає налаштування темного режиму браузера користувача і, за бажанням, змінює свій вигляд на темну версію.

Встановлення просте:

Приклад коду плаваючих вподобань

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

The type signature of the constructor is:

Конфігурація

Copy

1

2/**

3 *

4 * @param {HTMLElement} targetElement

5 * @param config

6 * @property {string} tenantId

7 * @property {string} urlId - Змініть це, щоб встановити ідентифікатор сторінки/статті. За замовчуванням це URL сторінки.

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

9 * @property {object} [sso]

10 * @constructor

11 */

12

It supports sso to tie the reacts to the user's account for authentication.

Currently, only VanillaJS is supported. If you'd like this widget to be added to one of our client libraries, let us know!

Асинхронна версія

Асинхронний приклад коду плаваючих вподобань

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